Каков наилучший способ покрыть все панели навигации в флаттер - PullRequest
0 голосов
/ 25 января 2020

Я создал этот пользовательский интерфейс, используя флаттер, но я не думаю, что это лучший способ, и я хочу спросить об анимации синего контейнера вверху и отображении двух значков, ведущих и перемещающихся как навигационная панель при прокрутке

enter image description here

и это мой код:

width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    fSectionHeight = 0.35*height;
    return CupertinoPageScaffold(
      backgroundColor: CupertinoColors.white,
      child: SingleChildScrollView(
        child: SafeArea(
          top: false,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                  padding: EdgeInsets.only(top: 50,bottom: 20,left: 20,right: 20),
                  margin: EdgeInsets.only(bottom: 20),
                  color: Color(0xFF2FBFFF),
                  height: fSectionHeight,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      GestureDetector(
                        onTap: (){  },
                        child: Icon(CupertinoIcons.back,color: CupertinoColors.white,size: 28),
                      ),
                      GestureDetector(
                          onTap: (){ print("camera cliked"); },
                          child: Container(
                            child: Align(
                              alignment: Alignment.centerRight,
                              child: Icon(CupertinoIcons.photo_camera_solid,color: CupertinoColors.white,size: 44),
                            ),
                            width: width,
                          )
                      ),
                    ],
                  )
              ),
              Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(left: 20,right:20),
                    child: Column(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Align(
                                alignment: Alignment.centerLeft,
                                child: Text("Titre de l'article",style: Styles.formFieldTitle)
                            ),......................
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        )
      )
    );

1 Ответ

0 голосов
/ 25 января 2020

Вы можете использовать SliverAppBar для анимации панели приложений по мере необходимости.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...