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

Solution

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 :

Comments

[SOS video]

Thanks for your response, but it doesn't work for me, because when I scroll up and the appbar becomes small (basic appbar), the text is at the top and no longer in the middle. Do you know a solution for this?

[Shubhamhackz]

@SOSvideo I fixed my code. Please check now.