centering FlexibleSpaceBar in SliverAppBar

Question

How to centering the flexible space bar in sliverappbar do i just need use title? but how to set the size of the title where you can't, wasn't? Here the snippet code

class _ArticleAppBarState extends State<ArticleAppBar> with SingleTickerProviderStateMixin{
  
  Route _searchPageRoute(){
    return PageRouteBuilder(
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const Offset begin = Offset(0.0, 1.0);
        const Offset end = Offset.zero;
        const Cubic curves = Curves.easeInOut;
        Animatable<Offset> tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curves));
        return SlideTransition(position: animation.drive(tween));
      },
      pageBuilder: (context, animation, secondaryAnimation) {
        return const SearchArticlesPage();
      },
    );
  }


  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      expandedHeight: 64,
      centerTitle: true,
      forceElevated: true,
      
      flexibleSpace: FlexibleSpaceBar(
        title: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: GestureDetector(
                onTap: () => Navigator.of(context).push(_searchPageRoute()),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(kDefaultRoundedValue),
                    color: Colors.blueGrey.shade700.withOpacity(.20),
                  ),
                  child: const Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Icon(Icons.search_rounded),
                      Expanded(
                        child: Text("Search"),
                      )
                    ],
                  ),
                ),
              )
            ),
            IconButton(
              onPressed: () {
                
              },
              icon: const Icon(Icons.table_rows_rounded)
            )
          ],
        ),
      ),
      floating: true,
      pinned: true,
      snap: true,
    );
  }
}

The point is, just want to set the height to around 64 to 68 to look more propper ,centering it, and when scroll i want the app bar collapse

The search bar, i want to make center

Answer 1

You use toolbarHeight: to control the appBar's height and then use Container's height for search widget. I will also suggest checking SliverPersistentHeader for customization.

SliverAppBar(
  centerTitle: true,
  forceElevated: true,
  toolbarHeight: 64, /// custom height
  title: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        child: GestureDetector(
          onTap: () {},
          child: Container(
            height: 48, // custom height
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24),
              color: Colors.blueGrey.shade700.withOpacity(.20),
            ),
            child: const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Icon(Icons.search_rounded),
                Expanded(
                  child: Text("Search"),
                ),
              ],
            ),
          ),
        ),
      ),
      IconButton(onPressed: () {}, icon: const Icon(Icons.table_rows_rounded))
    ],
  ),
  floating: true,
  pinned: true,
  snap: true,
),