Практическое применение Sliver’ов для создания современного UI
Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev агентства продуктовой разработки Amiga и соавтор телеграм-канала Flutter. Много.
Мы уже касались темы Sliver’ов, а сегодня я предлагаю погрузиться в практику. В нашей текущей работе над приложением для сети пекарен, где множество интересных задач и вопросов интерфейса, я активно применяю Sliver’ы и другие виджеты. Давайте рассмотрим, как эти техники могут преобразить создание современного пользовательского интерфейса.
Используем Stack для эффекта перекрытия карточки. Для этого применяем DraggableScrollableSheet:
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
child: CreateProfileCard(state.pageState),
),
DraggableScrollableSheet(
initialChildSize: 379 / 640,
minChildSize: 379 / 640,
maxChildSize: 1,
builder: (context, scrollController) {
return Container(
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: const BorderRadius.vertical(top: Radius.circular(30)),
),
padding: const EdgeInsets.fromLTRB(16, 6, 16, 0),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 15.0),
child: SvgPicture.asset(AppConstants.icons + 'holder.svg'),
),
Expanded(
child: CustomScrollView(
controller: scrollController,
slivers: [...],
),
),
],
),
);
},
),В DraggableScrollableSheet передаем скролл контроллер в наш CustomScroollView для использования Sliver«ов:
Для таких элементов UI используем SliverToBoxAdapter:
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: MainBanners(state.pageState),
),
), // элемент CustomScrollView
class MainBanners extends StatelessWidget {
const MainBanners(this.pageState, {Key? key}) : super(key: key);
final MainPageState pageState;
@override
Widget build(BuildContext context) {
return Container(
height: 120,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: CarouselSlider(
options: CarouselOptions(
autoPlay: true,
height: 88,
viewportFraction: 1.025,
),
items: List.generate(
5,
(index) => InkWell(
onTap: () {},
child: Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16)), color: setColor.elementAt(index)),
),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(
5,
(index) => InkWell(
onTap: () {},
child: Container(
width: 16.0,
height: 6.0,
margin: const EdgeInsets.symmetric(
vertical: 12.0,
horizontal: 4.0,
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(4)),
color: Theme.of(context).primaryColor.withOpacity(0.5),
),
),
)).toList(),
),
],
),
);
}
}SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 28.0, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'НОВИНКИ',
style: Theme.of(context)
.textTheme
.headlineLarge
?.copyWith(color: AppColors.black),
),
Row(
children: [
Text(
'все',
style: Theme.of(context)
.textTheme
.bodyLarge
?.copyWith(color: AppColors.black),
),
const SizedBox(width: 4),
SvgPicture.asset(AppConstants.icons + 'deep_arrow.svg'),
],
),
],
),
),
),А для прокручиваемых списков используем SliverList и SliverGrid:
SliverGrid.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 160 / 208,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: 4,
itemBuilder: (context, index) => Container(
padding: const EdgeInsets.only(bottom: 8),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
color: AppColors.white,
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.1),
blurRadius: 6,
),
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.15),
blurRadius: 2,
),
],
),
child: Column(
children: [
Container(
height: 120,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(8)),
),
)
],
),
),
),Slivers во Flutter представляют собой мощный инструмент для создания гибких и эффективных UI. Они позволяют легко реагировать на действия пользователя, работать с большими объемами данных и создавать привлекательные анимированные макеты.
Смело используйте Slivers для улучшения UI/UX в ваших приложениях на Flutter, и пользователи скажут вам спасибо!
Подписывайтесь на наш авторский телеграм-канал Flutter. Много, который мы ведем командой мобильных разработчиков. Рассказываем про свой личный опыт и делимся советами от софт-скиллов до технических знаний. Будем рады новым участникам!
