How to center the title of a SliverAppBar vertically?

Question

I want to center the title vertically in my SliverAppBar. I found a solution on the internet where you put empty containers above and below the title so that the text is centered, but the problem is when you scroll up and only the small appbar is there, you don't see the title more because the empty containers are too big. I have centered my titel horizontally, but I also need it to be centered vertically. Does anyone know a solution for this problem?

This is my code at the moment:

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,
      ),
    ),
  ),

Answer 1

Try with below code

@override
Widget build(BuildContext context) {
return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        pinned: true,
        expandedHeight: 200,
        //backgroundColor: Colors.transparent,
        flexibleSpace: FlexibleSpaceBar(
          titlePadding: EdgeInsets.zero,
          centerTitle: true,
          title: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Flexible(
                flex: 3,
                child: Container(),
              ),
              Flexible(
                flex: 1,
                child:
                    Text("Should be centered", textAlign: TextAlign.center),
              ),
              Flexible(
                flex: 1,
                child: Container(),
              ),
            ],
          ),
          background: Image.asset("assets/earth.png", fit: BoxFit.cover),
        ),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.menu),
            tooltip: "Menu",
            onPressed: () {
              // onPressed handler
            },
          ),
        ],
      ),
      SliverFixedExtentList(
        itemExtent: 50,
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.green,
              child: Text("Index n°$index"),
            );
          },
        ),
      )
    ],
  ),
);
}

Answer 2

This is one of the possible way to do it :

 @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'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
 

OUTPUT :