I know about titleSpacing in AppBar but that will only be applied to the title and if I put any leading icon, that won't work for me as expected. My whole screen has a padding of 28 pixels on left and right, which I can do using Padding widget in the Scaffold body. But I am struggling to do the same in the appBar. I don't want to add padding to each icon or title because I have multiple action icons. I only want to add a certain padding to the left of the first element of appBar and same for the last action icon of the appBar.
1 Answer
Now, it is a tough question to answer whether this approach is suggested or not, but you can basically make your custom appbar with slight changes to original AppBar.
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget { final AppBar appBar; CustomAppBar(this.appBar); @override Size get preferredSize => Size.fromHeight(56); @override Widget build(BuildContext context) => Row(children: [ SizedBox(width: 16), Expanded(child: appBar), SizedBox(width: 16), ]); } class CAE extends StatelessWidget { @override Widget build(BuildContext context) => Scaffold( appBar: CustomAppBar(AppBar( backgroundColor: Colors.white, elevation: 0, title: Text( 'Custom App Bar', style: TextStyle(color: Colors.black), ), leading: IconButton(icon: Icon(Icons.calendar_today)), actions: [ IconButton(icon: Icon(Icons.calendar_today)), IconButton(icon: Icon(Icons.calendar_today)) ], )), body: Container( color: Colors.deepOrange, ), ); } We are basically creating a Row that that has a SizedBox on each side of the actual AppBar.
But since this is just a Widget and does not extends AppBar, we can't use it in Scaffold.appBar directly.
You see, AppBar is just a Widget that implements PreferredSizeWidget. So we make our custom widget implement the same class. For this to work, we need to override the preferredSize getter.
From documentation of AppBar,
preferredSize = Size.fromHeight(toolbarHeight ?? 56 + (bottom?.preferredSize.height ?? 0.0)),
which can be simplified to just Size.fromHeight(56) and this is what I used in override.
Then, you can basically use your new widget in Scaffold like
Scaffold(appBar: CustomAppBar(AppBar(/* Whatever your actual AppBar is */))) Output.
In case you do want to set a backgroundColor, then do wrap then use a Container instead of SizedBox and then set color to it.
AppBarnever have a background color of its own ?AppBar, but thenmarginmeans that your app background color will appear at the right and left of your appbar. Other than this method and creating your own appbar, it seems like it isnt possible from what I checked in source code. it render Row([leading, text, trailing]) and Row can't be given padding, so you can only set individual padding, thats why I was asking.AppBarin transparent or white color so it does not matter if the color shows. I couldn't find a way to add Padding or Margin to theAppBar, can you help me with that please?