Flutter – Gradient AppBar
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
Dart
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
Dart
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
Dart
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
Dart
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.
Dart
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.
Dart
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.
Dart
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.
Dart
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: