Выравнивание виджетов по центру/снизу при просмотре списка | Интересное руководство по Flutter

Во-первых, это будет звучать как Ааа. слишком просто…». Вам не нужно было писать статью на эту тему, но реальность такова, что большинство из нас часто сталкивается с этой проблемой. Вот и решил смириться раз и навсегда, на будущее. Начнем…

Иногда, особенно когда есть связанные ближайшие сроки, мы застреваем в (менее приоритетных) исправлениях пользовательского интерфейса. Итак, я дам вам быстрое исправление фрагмента пользовательского интерфейса, которое вы можете реализовать напрямую. Кроме того, у него наверняка будет адаптация в соответствии с потребностями вашего приложения.

Оглавление

Пример фрагмента

Выравнивание виджета(ов) по центру/снизу при просмотре списка

- Образец фрагмента

Вы можете следовать этому фрагменту:

Scaffold(
 body: Column(
  children: [
    //Top Widgets - Align, Text etc..

   Expanded(
     child: ListView(
       shrinkWrap: true,
       children: [
         /// Middle Content (smooth rendering)
       ],

      ///Bottom Widget
     ],
   ),
);

Перейдем к следующему разделу.

- Выравнивание виджета(ов) по центру/снизу при просмотре списка

Прежде чем мы обсудим это дальше, давайте разберемся с этим на примере.

Допустим, у нас есть Ящикдля отображения следующего:

Заголовок ящика (изображение, электронная почта, имя)

Средний контент

Нижний виджет

Что касается Внизу, у нас есть «Версия приложения» или «Выйти кнопка». Мы можем записать такой фрагмент:

Drawer(
      child: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color(0xff5B86E5),
              Color(0xff36D1DC),
            ],
          ),
        ),
        child: Column(
          children: [

            ///Top Content
            DrawerHeader(
              child: Column(
                children: [
                  Container(
                    margin: EdgeInsets.only(top: 4.h),
                    child: Align(
                      alignment: Alignment.topRight,
                      child: InkWell(
                        child: Image.asset("assets/icons/menu.png"),
                        onTap: () {
                          globalKey.currentState!.closeDrawer();
                        },
                      ),
                    ),
                  ),

                  Row(
                            children: [
                              CircleAvatar(
                                  backgroundImage: NetworkImage(
                                      (state.data as AuthMember).photo!),
                                  radius: 9.w,
                                ),
                              Expanded(
                                child: Demo.subHeaderText(
                                  text: (state.data as AuthMember).name,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 6.w,
                                  color: DemoTheme.appWhite,
                                ),
                              ),
                            ],
                          ),

             ///Middie Content
            Expanded(
              child: ListView(
                shrinkWrap: true,
                padding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 2.h),
                children: [
                  DrawerItemWidget(
                    picture: 'one',
                    title: "title 1",
                    onTap: () {},
                  ),

                  DrawerItemWidget(
                    picture: 'two',
                    title: "title 2",
                    onTap: () {},
                  ),

                  DrawerItemWidget(
                    picture: 'third',
                    title: "title 3",
                    onTap: () {},
                  ),
                ],
              ),
            ),


            ///Bottom Content
            Align(
                      alignment: Alignment.bottomCenter,
                      child: Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: 2.w, vertical: 2.h),
                        child: Demo.subHeaderText(
                          text: "Version ${current_version}",
                          fontWeight: FontWeight.normal,
                          fontSize: 5.w,
                          color: DemoTheme.appWhite,
                        ),
                      ),
                    ),
          ],
        ),
      ),
    );

Однако речь идет не только о Drawer, но и о других виджетах.

В завершение этой статьи. Я изо всех сил старался объяснить описанный выше сценарий, но мне бы хотелось услышать от вас об этой или остальных моих статьях.

Следуйте за мной, чтобы узнать больше…

Вы можете найти меня в социальных сетях:

- YOUTUBE

У меня есть свой канал, на котором я люблю обучать Flutter. Есть тонны видео там.

P.S. На GitHub также доступны видеоролики по решению проблем.

- ЛИНКЕДИН

Я доступен для «Внешняя работа».

- - -Хорошего дня - - - -