AppBar in Flutter
Flutter AppBar is a widget from flutter which is located at top of a mobile application which usually contains a menu, title, toolbar widgets, leading. usually the AppBar is wrapped in a scaffold and can be given properties like: actions, actionsIconTheme, automaticallyImplyLeading, backgroundColor, bottom, bottomOpacity, centerTitle, clipBehavior, elevation, excludeHeaderSemantics, flexibleSpace,
forceMaterialTransparency, foregroundColor, hashCode, iconTheme, key, leading, leadingWidth, notificationPredicate, preferredSize, primary, runtimeType, scrolledUnderElevation,
shadowColor, shape, surfaceTintColor, systemOverlayStyle, title, titleSpacing, titleTextStyle, toolbarHeight, toolbarOpacity, toolbarTextStyle
This tutorial will show you how to create AppBar and modification it
How do you make an appbar in Flutter?
First of course we have to create a new project first, open VScode editor then select the Terminal menu-> New terminal then type the command “flutter create app789” to create a new project with the name app789
then enter our project with the command “cd app789“, if you use VScode editor so you can immediately run the project we just created by selecting the menu Run->start_debugging if no error will appear like this picture
AppBar example in Flutter
Below are some examples of appbars, but previously there were initial steps before continuing to enter the appbar coding, that is:
To use an image from a URL in Flutter, we can use a NetworkImage, an example of its use is as follows:
image: NetworkImage(‘https://drive.google.com /uc?export=downloadid=1Kbdez5JbjC8oLMtn51mYSPSMKBobt9HW’),
I am use Google Drive to save my images, which is printed in bold from the code above is the id of the image, please change it according to your image id on Google Drive.
2. Create a folder with the name assets then in the assets folder a new folder is created with the name images.
The folder structure is as below
3. You can download the logo ini https://drive.google.com/file/d/1qxr4PlDYqjV51hK_qtI-BhMGLvNuXgMJ/view?usp=sharing and save it to assets/images in your folder
4. Open the pubspec.yaml file and in the dev_dependencies: title add this code
assets:
– assets/images/
– assets/images/photo1.jpg
and then save it, this code have function to tell where is the location of the images that we will use later
5. open main.dart (in the lib folder) then delete all the code and copy the code for some of the appbar examples below then paste the code in main.dart
First AppBar Example
in this first appbar example we will add the restaurant icon, seacrh icon, more_vert icon and logo, here we will also give the background color of our appbar
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a blue toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//title: const Text("Lemongrass"),
backgroundColor: const Color.fromARGB(255, 26, 25, 25),
leading: GestureDetector(
onTap: () {/* Write listener code here */},
child: const Icon(
Icons.restaurant, // add custom icons also
),
),
//set warna icon
iconTheme: IconThemeData(
color: Colors.white, //change your color here
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 55.0),
child: Image.asset(
'assets/images/logo.png',
scale: 6,
),
),
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: const Icon(
Icons.search,
size: 26.0,
),
)),
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: const Icon(Icons.more_vert),
)),
],
),
);
}
}
class CustomAppBarShape extends ContinuousRectangleBorder {
final double multi;
const CustomAppBarShape({this.multi = 0.1});
@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
double height = rect.height;
double width = rect.width;
var path = Path();
path.lineTo(0, height + width * multi);
path.arcToPoint(
Offset(width * multi, height),
radius: Radius.circular(width * multi),
);
path.lineTo(width * (1 - multi), height);
path.arcToPoint(
Offset(width, height + width * multi),
radius: Radius.circular(width * multi),
);
path.lineTo(width, 0);
path.close();
return path;
}
}If you using Vscode editor, You can run this code with Run->start debuging, you can choise of device on bottom right on your editor, if successs you can look like the images below
Second AppBar Example
The second AppBar example is same like above example but we add the radius properties in the container, here is the code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a blue toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// memberi warna background
backgroundColor: Color.fromARGB(255, 48, 48, 48),
//setting title di tengah" / center
centerTitle: true,
//menambah title dan memberi warna textnya
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/logo.png',
scale: 8,
alignment: Alignment.topLeft,
),
],
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Text(
'Hello Guest',
textAlign: TextAlign.right,
style: TextStyle(
color: Color.fromARGB(255, 252, 251, 251),
), //<-- S
)),
],
//menambah icon
leading: const Icon(Icons.restaurant),
//set warna icon
iconTheme: IconThemeData(
color: Colors.white, //change your color here
),
//menambah shape dengan class CustomAppBarShape,untuk class ada dibawah
shape: const CustomAppBarShape(multi: 0.05),
),
);
}
}
class CustomAppBarShape extends ContinuousRectangleBorder {
final double multi;
const CustomAppBarShape({this.multi = 0.1});
@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
double height = rect.height;
double width = rect.width;
var path = Path();
path.lineTo(0, height + width * multi);
path.arcToPoint(
Offset(width * multi, height),
radius: Radius.circular(width * multi),
);
path.lineTo(width * (1 - multi), height);
path.arcToPoint(
Offset(width, height + width * multi),
radius: Radius.circular(width * multi),
);
path.lineTo(width, 0);
path.close();
return path;
}
}If success the result is like the image s below:
Third Appbar Example
We can give the AppBar widget a border radius and background images so that the AppBar becomes more attractive, here is the 3rd AppBar example
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a blue toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(120),
child: AppBar(
centerTitle: true,
flexibleSpace: ClipRRect(
borderRadius: const BorderRadius.only(
bottomRight: Radius.circular(50),
bottomLeft: Radius.circular(50)),
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://drive.google.com/uc?export=download&id=1Kbdez5JbjC8oLMtn51mYSPSMKBobt9HW'),
fit: BoxFit.fill,
)),
),
),
title: const Text(
'LEMONGRASS',
style: TextStyle(color: Color.fromARGB(255, 170, 170, 170)),
),
leading: GestureDetector(
onTap: () {/* Write listener code here */},
child: const Icon(
Icons.restaurant, // add custom icons also
),
),
//set warna icon
iconTheme: const IconThemeData(
color:
Color.fromARGB(255, 170, 170, 170), //change your color here
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: const Icon(
Icons.more_vert,
size: 26.0,
),
)),
],
backgroundColor: Colors.amber,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(50),
bottomLeft: Radius.circular(50)),
),
)),
);
}
}
class CustomAppBarShape extends ContinuousRectangleBorder {
final double multi;
const CustomAppBarShape({this.multi = 0.1});
@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
double height = rect.height;
double width = rect.width;
var path = Path();
path.lineTo(0, height + width * multi);
path.arcToPoint(
Offset(width * multi, height),
radius: Radius.circular(width * multi),
);
path.lineTo(width * (1 - multi), height);
path.arcToPoint(
Offset(width, height + width * multi),
radius: Radius.circular(width * multi),
);
path.lineTo(width, 0);
path.close();
return path;
}
}If your code runing well, the screen will show like below
Ok, That is the flutter AppBar tutorial, thx u.