Flutter, how to move leading and action on SliverAppbar to the bottom

user_12162588 0
Viewed 533

im making a notes app like this :

My current app

as you can see, my title is below the leading and action icon, but I want to make it reverse like this:

My Target Layout

how can i make it like that? Here's my code :

SliverAppBar(
        leading: Icon(
          Icons.menu,
          color: Colors.black,
        ),
        actions: const [
          Icon(Icons.search, color: Colors.black),
          SizedBox(width: 8),
          Icon(Icons.more_vert, color: Colors.black),
          SizedBox(width: 14),
        ],
        elevation: 2,
        pinned: true,
        floating: true,
        backgroundColor: kLightBGColor,
        expandedHeight: 150,
        flexibleSpace: FlexibleSpaceBar(
          title: Text(
            'My Notes',
            style: TextStyle(
              color: Colors.grey.shade900,
              fontWeight: FontWeight.w400,
            ),
          ),
          centerTitle: true,
        ),
      ),
flutter-sliver flutter-layout flutter android
1 Answers

The best I could do was use a second SliverAppBar on top of the first, with some adjustments to both of their parameters. You may want to further customize to your preference:

CustomScrollView(
  slivers: [
    SliverAppBar(
      elevation: 0,
      pinned: true,
      floating: true,
      backgroundColor: Colors.grey,
      expandedHeight: 80,
      flexibleSpace: FlexibleSpaceBar(
        title: Text(
          'My Notes',
          style: TextStyle(
            color: Colors.grey.shade900,
            fontWeight: FontWeight.w400,
          ),
        ),
        centerTitle: true,
      ),
    ),
    SliverAppBar(
      leading: Icon(
        Icons.menu,
        color: Colors.black,
      ),
      actions: const [
        Icon(Icons.search, color: Colors.black),
        SizedBox(width: 8),
        Icon(Icons.more_vert, color: Colors.black),
        SizedBox(width: 14),
      ],
      pinned: true,
      backgroundColor: Colors.grey,
      expandedHeight: 45,
      collapsedHeight: 45,
      toolbarHeight: 20,
    ),
  ],

  ...
  
),
user_10030590
Related