FLutter, AppBar leading and action margin - flutter

Question

How do i modify leading and the action with IconButton margin/position in appbar? and what is the default margin for leading and IconButton
i can just pust the leading and the action in title with row but i want more cleaner code so i try with leading: title: actions: but the leading & actions is not in the line with the content in the body, the body has margin: 24 left and right. I'm having a hard time using leading: title: actions: from the start writing code in flutter
what i mean is to make the leading and action in the line with the body
this is my appbar code
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
elevation: 1,
titleSpacing: 0,
automaticallyImplyLeading: false,
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.chevron_left),
),
title: Text(
'City Guide',
style: Constants.textAppBar3,
),
actions: [
IconButton(
onPressed: () {},
icon: Image.asset(
'assets/images/icon/icon_search.png',
width: 24,
height: 24,
),
),
IconButton(
onPressed: () {},
icon: Image.asset(
'assets/images/icon/icon_save.png',
width: 24,
height: 24,
),
),
IconButton(
onPressed: () {},
icon: Image.asset(
'assets/images/icon/icon_ticket.png',
width: 24,
height: 24,
),
),
],
),

Answer 1

IconButton have size of icon(default 24) and have padding(constrains-min) itself to create a gesture space. With the size of Button is 48, it mean padding of IconButton is 12, your body padding is 24 so we need more 12, try wrap your leading by Padding with left: 12
Example

Answer 2

Try this
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
iconTheme: const IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
elevation: 1,
titleSpacing: 0,
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.chevron_left),
),
title: const Text(
'City Guide',
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.local_activity,
color: Colors.black,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
),
Container(
margin: const EdgeInsets.only(right: 15),
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.radar,
color: Colors.black,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
),
),
],
),
body: Container(
margin: const EdgeInsets.only(left: 24, right: 24),
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}