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

161

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

  ...
  
),
Share:
161
Deven Valisten
Author by

Deven Valisten

Updated on January 01, 2023

Comments

  • Deven Valisten
    Deven Valisten over 1 year

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