AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in flutter which gives the functionality of the AppBar out of the box. Approximately Every mobile Application has AppBar in it which makes the Application well and good. In this article, we will see Gradient AppBar and cover the following content.
- Simple Light AppBar
- Simple Dark AppBar
- AppBar yellow Background with Red Text
- Gradient AppBar Background
- AppBar Grey background centered Indigo Text with the left icon
- AppBar with Left and Right side icons
- AppBar with Double icons on Sides
- AppBar Preferred Size
Simple Light AppBar
Turn the Main Background color to light.
Code
import 'package:flutter/material.dart' ;
void main() => runApp(SimpleAppBarLightRun());
// stateless widget class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false ,
theme: ThemeData.light(),
// scaffold
home: Scaffold(
// appbar with title property
appBar: AppBar(
title: Text( 'App Bar' ),
),
),
);
}
} |
Output:
Simple Dark AppBar
In the MaterialApp, make the theme Dark, Turn the main background color to dark.
Code
import 'package:flutter/material.dart' ;
void main() => runApp(SimpleAppBarLightRun());
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(
title: Text( 'App Bar' ),
),
),
);
}
} |
Output:
AppBar yellow Background with Red Text
You can still style the AppBar and apply the wanted text and background color. We can give backgroundColor in the AppBar. And in the style property of the text, we can change the text color.
Code
import 'package:flutter/material.dart' ;
void main() => runApp(SimpleAppBarLightRun());
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.yellow,
title: Text( 'App Bar' ,style: TextStyle(color: Colors.red),),
),
),
);
}
} |
Output:
Gradient AppBar Background
You can still style the AppBar by using the gradient widget. Following the code below.
Code
import 'package:flutter/material.dart' ;
void main() => runApp(GradientAppBarRun());
// stateless widget class GradientAppBarRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// returning MaterialApp
return MaterialApp (
debugShowCheckedModeBanner: false ,
theme: ThemeData.light (),
home:
// scaffold
Scaffold (
body:
CustomScrollView (
slivers: <Widget>[
// sliverappbar for gradient widget
SliverAppBar (
pinned: true ,
expandedHeight: 50,
flexibleSpace: Container (
decoration: BoxDecoration (
// LinearGradient
gradient: LinearGradient (
// colors for gradient
colors: [
Colors.deepPurpleAccent,
Colors.yellowAccent,
],
),
),
),
// title of appbar
title: Text ( "Gradient AppBar!" ),
),
SliverList (
delegate: SliverChildListDelegate ([
// Body Element
],
),
),
],
),
),
);
}
} |
Output:
AppBar Grey Background centered Indigo Text with left icon
You can Add a left icon to the AppBar using the leading property of the AppBar.
import 'package:flutter/material.dart' ;
void main() => runApp(AppBarLeftIconRun());
// stateless widget class AppBarLeftIconRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false ,
// scaffold
home: Scaffold(
// appbar with center text true
appBar: AppBar(
centerTitle: true ,
// leading icon
leading: new Icon(Icons.ac_unit),
// text in the center of the text
title: Text(
'LeftIcon' ,
textDirection : TextDirection.ltr,
style: TextStyle(
// text color
color: Colors.indigo,
),
),
// background of the appbar
backgroundColor: Colors.grey,
),
),
);
}
} |
Output:
AppBar with Left and Right side icon
You can also add the icon on the right side of the AppBar, using the actions property of the AppBar.
import 'package:flutter/material.dart' ;
void main() => runApp(AppBarLeftIconRun());
// stateless widget class AppBarLeftIconRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false ,
// scaffold
home: Scaffold(
// appbar with center text true
appBar: AppBar(
centerTitle: true ,
leading: IconButton(
onpressed:(){},
// leading icon
icon:Icon(Icons.account),
),
actions:[
// actions property for right side icons
IconButton(
onpressed:(){},
icon:Icon(Icons.account),
],
// text in the center of the text.
title: Text(
'<--Icon-->' ,
textDirection : TextDirection.ltr,
style: TextStyle(
// text color
color: Colors.indigo,
),
),
// background of the appbar
backgroundColor: Colors.grey,
),
),
);
}
} |
Output:
AppBar with Double icons on Sides
You can add multiple icons in the AppBar. In leading we are using row for multiple icons, but actions can take multiple children.
import 'package:flutter/material.dart' ;
void main() => runApp(AppBarDoubleSideIconsRun());
// stateless widget class AppBarDoubleSideIconsRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
theme: ThemeData.light(),
// scaffold
home: Scaffold(
// appbar
appBar:AppBar(
leading: Padding(
padding: EdgeInsets.only(left: 2),
// row is using for multiple icons
child: Row(
children: <Widget>[
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
Expanded(
child: IconButton(
onPressed:(){},
icon:
Icon(Icons.account_circle),
),
),
],
),
),
title: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Text( '<--Icons-->' ),
],
),
// actions widget
actions: <Widget>[
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
],
),
),
);
}
} |
Output:
AppBar Preferred Size
By using the Preferred Size widget we can give the size of the AppBar.
import 'package:flutter/material.dart' ;
void main() => runApp(AppBarSize());
// stateless widget class AppBarSize extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false ,
// scaffold
home: Scaffold(
// preferredSize widget
appBar: PreferredSize(
preferredSize:Size.fromHeight(150.0),
child:AppBar(
flexibleSpace:Center(
child:Text( 'AppBar With Height 150' ),
),
),
)
),
);
}
} |
Output: