In this tutorial, we’re going to add AppBar with your flutter application. where app bar contains menu icons, title, action buttons, change background color of AppBar.
Checkout Flutter Tutorials for more articles on flutter
Let’s start by creating new project or you can also choose exiting project
flutter create appbar
cd appbar
cd appbar
once we created a new project, we can start working with lib/main.dart file
Flutter AppBar Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold(
appBar: AppBar(
title: Text("CODESUNDAR"),
leading: Icon(Icons.menu),
backgroundColor: Colors.redAccent,
actions: <Widget>[
IconButton(icon: Icon(Icons.videocam), onPressed: () => { }),
IconButton(icon: Icon(Icons.account_circle), onPressed: () => { })
]
)
));
}
}Explanation: We have created a stateless widget (because, we’re not going to handle any data at this moment).
- We have implemented material design with MaterialApp, which needs Scaffold (is nothing but a single page / view).
- Scaffold widget contains more parameters but for now, we only need appBar
- Inside AppBar widget we have passed title: as Text widget
- We have set backgroundColor using Colors objects (you can choose any colors)
- leading parameter allows you to put any widget as leftside (front slot) where actions are right side.
- Now, we have created IconButton inside actions
Final output for flutter AppBar
Hope this tutorial helps you.
