Как центрировать заголовок SliverAppBar по вертикали?

Я хочу центрировать заголовок по вертикали в моем SliverAppBar. Я нашел в Интернете решение, в котором вы размещаете пустые контейнеры над и под заголовком, чтобы текст располагался по центру, но проблема в том, что когда вы прокручиваете вверх и есть только маленькая панель приложений, вы больше не видите заголовок, потому что пустые контейнеры слишком велики. Я центрировал свой заголовок по горизонтали, но мне также нужно, чтобы он был центрирован по вертикали. Кто-нибудь знает решение этой проблемы?

Это мой код на данный момент:

SliverAppBar(
    expandedHeight: MediaQuery.of(context).size.height * 0.20,
    floating: false,
    pinned: true,
    flexibleSpace: FlexibleSpaceBar(
      centerTitle: true,
      title: Text("Training"),
      background: Image.asset(
        "assets/purpleBackground.png",
        fit: BoxFit.cover,
      ),
    ),
  ),

flutter dart flutter-layout flutter-sliver flutter-sliverappbar
person SOS video    schedule 12.02.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это один из возможных способов сделать это:

 @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: height * 0.2,
            collapsedHeight: height * 0.075,
            flexibleSpace: LayoutBuilder(
              builder: (context, constraints) {
                double appBarHeight = constraints.biggest.height; //getting AppBar height
                bool isExpanded = appBarHeight > height * 0.2; //check if AppBar is expanded
                return FlexibleSpaceBar(
                  titlePadding: EdgeInsets.zero,
                  centerTitle: true,
                  title: SizedBox(
                    height: height * 0.15,
                    child: Column(
                      mainAxisAlignment: isExpanded
                          ? MainAxisAlignment.center
                          : MainAxisAlignment.end,
                      children: <Widget>[
                        Container(
                          padding:
                              isExpanded ? EdgeInsets.zero : EdgeInsets.all(20),
                          child: Text(
                            "Training",
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate.fixed(
              List.generate(
                50,
                (index) => ListTile(
                  title: Text('Index $index'),
                ),
              ),
            ),
          ),
        ],
      ),
    );

ВЫВОД:

введите здесь описание изображения

person Shubhamhackz    schedule 12.02.2021
comment
Спасибо за ваш ответ, но это не работает для меня, потому что, когда я прокручиваю вверх и панель приложений становится маленькой (базовая панель приложений), текст находится вверху, а не посередине. Вы знаете решение для этого? - person SOS video; 12.02.2021
comment
@SOSvideo Я исправил свой код. Пожалуйста, проверьте сейчас. - person Shubhamhackz; 13.02.2021