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,
),
],
...
),
Author by
Deven Valisten
Updated on January 01, 2023Comments
-
Deven Valisten over 1 year
im making a notes app like this :
as you can see, my title is below the leading and action icon, but I want to make it reverse like this:
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, ), ),