flutter: is there an easy way to layout my app bar? - flutter

Question

I'm new to flutter so please bear with me. When I implement an app bar, sometimes it only has a title, some other time it has a title and returns button on the left of the bar, also, sometimes it adds another button on the right of the bar. I have to layout differently to suit different situations which are quite troublesome. Is there a convenient widget that provides three optional properties to allow me to set my title, left button, and right button or any good layout strategy? What I have done is below.
AppBar(
backgroundColor: Colors.gray,
elevation: 0.0,
title: Container(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(bottom: ScreenUtil.dp(11)),
height: ScreenUtil.dp(22),
width: ScreenUtil.dp(160),
child: Text(
'title',
style: TextStyle(
fontSize: ScreenUtil.sp(17), fontFamily: FontFamily.family, color: Colors.black, fontWeight: FontWeight.w600
)
),
alignment: Alignment.center,
),
),
),
),
```

Answer 1

You should learn more about the Appbar with other properties to assist with the things you need like leading, trailing, ...
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: _title,
home: MyStatelessWidget(),
);
}
}
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));
void openPage(BuildContext context) {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Next page'),
),
body: const Center(
child: Text(
'This is the next page',
style: TextStyle(fontSize: 24),
),
),
);
},
));
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
leading: Icon(Icons.navigate_next),
title: const Text('AppBar Demo'),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_alert),
tooltip: 'Show Snackbar',
onPressed: () {
scaffoldKey.currentState.showSnackBar(snackBar);
},
),
IconButton(
icon: const Icon(Icons.navigate_next),
tooltip: 'Next page',
onPressed: () {
openPage(context);
},
),
],
),
body: const Center(
child: Text(
'This is the home page',
style: TextStyle(fontSize: 24),
),
),
);
}
}