Практическое применение 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. Много, который мы ведем командой мобильных разработчиков. Рассказываем про свой личный опыт и делимся советами от софт-скиллов до технических знаний. Будем рады новым участникам!