How to center the title of a SliverAppBar vertically?

Issue

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 :

Answered By – Shubhamhackz

Answer Checked By – Mildred Charles (FlutterFixes Admin)