How To Implement Flutter Appbar Actions Padding

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')],
    )

As you can see in the image given above, the Flutter text widget that we have used does not show any padding applied to it. It is shown at the top right corner of the Flutter appbar. Let’s now see how to apply Flutter appbar actions padding to it.

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'),
        )
      ],

As you can see in the above image, we have applied padding to the text widget and you can see that now the text is looking at a distance from the Flutter appbar borders.

Let’s now take a list of items and apply Flutter appbar actions padding to it. We have taken a Flutter icon widget and Flutter text widgets, each having its own padding and wrap it with a Flutter row widget. See the below code:

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'),
            ),
          ],
        )
      ],

In the above image, you can see that we have multiple Flutter widgets in Flutter appbar actions, each having a padding. You can use EdgeInsets.symmetric or EdgeInsets.only to give different padding to different directions.

Now you have a complete and practical understanding of how to use Flutter appbar actions padding. Write in the comment section if you still have any queries regarding Flutter appbar actions padding.

The complete source code for the above mentioned code in which Flutter appbar actions padding is implemented is given in the next section.

Flutter Appbar Actions Padding Implementation Source Code

flutter appbar actions custom padding

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.

What is Flutter Appbar Actions Padding?

Default Flutter Appbar Actions Padding

Implementing Flutter Appbar Actions Padding

Flutter Appbar Actions Padding Implementation Source Code

Conclusion

Leave a Comment Cancel Reply