In this post, we will be implementing Flutter appbar actions padding using a proper Flutter appbar code example so you can have a clear idea of how to practically implement it in your Flutter app. So let’s now wait anymore and start understanding Flutter appbar actions padding.
What is Flutter Appbar Actions Padding?
Flutter appbar actions padding as the names suggests, it is used to give padding to the Flutter appbar actions so it can have a distance from the Flutter appbar borders. Flutter appbar actions is used to show a list of Flutter widgets at the right side of the Flutter appbar. Let’s now see how it looks using Flutter example.
Default Flutter Appbar Actions Padding
To see the default padding of Flutter appbar actions, we have to define a simple Flutter appbar widget and by using its actions constructor, we can pass a list of widgets to it. For demonstration, I have used a Flutter text widget. See the below code:
appBar: AppBar(
actions: [Text('A text')],
)
Implementing Flutter Appbar Actions Padding
In order to implement Flutter appbar actions padding to the list of actions items, we have to wrap the items with padding class. For demonstration, we will take the above example and apply padding to it. See the below code:
actions: [
Padding(
padding: EdgeInsets.all(20),
child: Text('A text'),
)
],
actions: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Login'),
),
Padding(
padding: const EdgeInsets.all(8.0), child: Icon(Icons.email)),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Signout'),
),
],
)
],
Flutter Appbar Actions Padding Implementation Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
actions: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Login'),
),
Padding(
padding: const EdgeInsets.all(8.0), child: Icon(Icons.email)),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Signout'),
),
],
)
],
)));
}
}Conclusion
In conclusion, you have now learned practically what Flutter appbar actions padding is and how to customize it in your Flutter appbar. I appreciate your time for reading this post and would appreciate your feedback. I have other post for you on Flutter widgets, Flutter application development, Flutter animations, Flutter templates with source code and many more. Thank you for reading this post.
