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:[] )
As we can see in the above code, we have successfully implemented our Flutter appbar actions. Using the actions constructor of the flutter appbar and passing a list of widgets as we can see but we haven’t passed any widgets yet. Let’s pass some flutter widgets to see the actions of the flutter appbar.
Appbar Actions Widgets
actions: [
Container(
width: 50,
color: Colors.red,
)]
We have given our appbar actions a container and have only given it a width and color. We can see that it automatically got the height of the flutter appbar and the Flutter appbar actions don’t have any predefined margin or padding from any dimension. Let’s understand it by using a flutter icon.
Icon(Icons.logout)
As we can see, the flutter icon is almost attached to the end but we can wrap it with padding or use a sized box explained in the below code.
Using Padding
Padding( padding: const EdgeInsets.all(10), child: Icon(Icons.logout), )
Using SizedBox
actions: [
Icon(Icons.logout),
SizedBox(
width: 10,
)]
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), ), ]
We have used three flutter icons in the appbar actions. We can use more or less depending on our requirements. Congrats on successfully implementing Flutter appbar actions. Below is a beautiful appbar actions design source code.
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
That’s all for this article. We have successfully implemented beautiful Flutter appbar actions. Hope you enjoyed it and have learned a lot from it. Implement it in your code and share your experience with us.
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.
