In this article, we will be implementing Flutter appbar actions. We’ll see what actions are in the appbar and how to properly implement them. We’ll be going through practical code examples for better understanding.
Introduction: Flutter Appbar Actions
Actions in the Flutter appbar can be used to put buttons, texts, or other widgets in the appbar of a flutter app. It will be shown on the right side of the flutter appbar.
Actions is actually a list of widgets, which means we can pass multiple flutter widgets in it. Let’s leave the boring part now and start implementing flutter appbar actions in flutter appbar.
Implementing Actions in Flutter Appbar
appBar: AppBar( actions:[] )
Appbar Actions Widgets
actions: [ Container( width: 50, color: Colors.red, )]
![Flutter Appbar Actions Customization [Detailed Guide] 2 flutter appbar actions](https://letmeflutter.com/wp-content/uploads/2022/04/IMG_20220424_030909-300x176.jpg)
Icon(Icons.logout)
Using Padding
Padding( padding: const EdgeInsets.all(10), child: Icon(Icons.logout), )
![Flutter Appbar Actions Customization [Detailed Guide] 4 flutter appbar actions padding](https://letmeflutter.com/wp-content/uploads/2022/04/IMG_20220424_024857-300x129.jpg)
Using SizedBox
actions: [ Icon(Icons.logout), SizedBox( width: 10, )
]
![Flutter Appbar Actions Customization [Detailed Guide] 5 flutter appbar actions padding](https://letmeflutter.com/wp-content/uploads/2022/04/IMG_20220424_024857-300x129.jpg)
Multiple Flutter Appbar Actions
actions: [ Padding( padding: const EdgeInsets.all(8.0), child: Icon(Icons.chat), ), Padding( padding: const EdgeInsets.all(8.0), child: Icon(Icons.email), ), Padding( padding: const EdgeInsets.all(8.0), child: Icon(Icons.logout), ), ]
![Flutter Appbar Actions Customization [Detailed Guide] 6 flutter appbar actions multiple icons](https://letmeflutter.com/wp-content/uploads/2022/04/IMG_20220424_025222-300x147.jpg)
Custom Flutter Appbar Source Code
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( debugShowCheckedModeBanner: false, title: 'Flutter Appbar Actions', home: flutterAppbarActions()); } } class flutterAppbarActions extends StatelessWidget { const flutterAppbarActions({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(backgroundColor: Colors.green, actions: [ Container( margin: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0), decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.green, boxShadow: [ BoxShadow(blurRadius: 5, color: Colors.grey.shade300) ]), child: Icon(Icons.chat)), Container( margin: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0), decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.green, boxShadow: [ BoxShadow(blurRadius: 5, color: Colors.grey.shade300) ]), child: Icon(Icons.email)), Container( margin: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0), decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.green, boxShadow: [ BoxShadow(blurRadius: 5, color: Colors.grey.shade300) ]), child: Icon(Icons.logout)), ]), ); } }
Conclusion
We’d be very glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this article.