Реализация эффекта параллакса
Эффект параллаксной прокрутки достигается путем легкого сдвига фонового изображения в направлении, противоположном остальной части списка. Когда элементы списка скользят вверх по экрану, каждое фоновое изображение слегка сдвигается вниз. И наоборот, когда элементы списка скользят вниз по экрану, каждое фоновое изображение слегка сдвигается вверх. Визуально это приводит к параллаксу.
Предварительный просмотр:
Когда вы прокручиваете список карточек (например, содержащих изображения) в приложении, вы можете заметить, что эти изображения прокручиваются медленнее, чем остальная часть экрана. Это выглядит так, как будто карточки в списке находятся на переднем плане, а сами изображения — далеко на заднем. Этот эффект известен как параллакс.
В этом рецепте вы создадите эффект параллакса, построив список карточек (с закругленными углами, содержащих текст). Каждая карточка также содержит изображение. По мере того как карточки перемещаются вверх по экрану, изображения на каждой карточке перемещаются вниз.
Создайте список для хранения элементов параллакса
Чтобы отобразить список изображений с параллакс-прокруткой, сначала необходимо отобразить список.
class ParallaxRecipe extends StatelessWidget {
const ParallaxRecipe({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: const [],
),
);
}
}
Отображение элементов с текстом и статичным изображением
Каждый элемент списка отображает фоновое изображение в виде закругленного прямоугольника, иллюстрирующее одно из семи мест в мире. Поверх фонового изображения располагается название места и его страны, расположенные в левом нижнем углу. Между фоновым изображением и текстом находится темный градиент, который улучшает читаемость текста на фоне.
@immutable
class LocationListItem extends StatelessWidget {
const LocationListItem({
super.key,
required this.imageUrl,
required this.name,
required this.country,
});
final String imageUrl;
final String name;
final String country;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: AspectRatio(
aspectRatio: 16 / 9,
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Stack(
children: [
_buildParallaxBackground(context),
_buildGradient(),
_buildTitleAndSubtitle(),
],
),
),
),
);
}
Widget _buildParallaxBackground(BuildContext context) {
return Image.network(
imageUrl,
fit: BoxFit.cover,
);
}
Widget _buildGradient() {
return Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black.withOpacity(0.7)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.6, 0.95],
),
),
),
);
}
Widget _buildTitleAndSubtitle() {
return Positioned(
left: 20,
bottom: 20,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Text(
country,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
),
),
],
),
);
}
}
//Next, add the list items to your ParallaxRecipe widget.
class ParallaxRecipe extends StatelessWidget {
const ParallaxRecipe({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
for (final location in locations)
LocationListItem(
imageUrl: location.imageUrl,
name: location.name,
country: location.place,
),
],
),
);
}
}
Приведенный выше код предназначен для базового понимания. Если вам нужен полный исходный код, перейдите по ссылке ниже. Я создал приложение с эффектом параллакса в Flutter.
Полный исходный код
Не стесняйтесь обращаться за любым руководством или помощью. Я отвечу вам в ближайшее время.
Спасибо!