flutterdartflutter-layoutflutter-sliverflutter-sliverappbar

How to center the title of a SliverAppBar vertically?


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 :

    enter image description here