Flutter - Gradient AppBar

Last Updated : 06 Jan, 2023

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:

PrefferedSize appbar — Preferred Size appbar

Flutter - Gradient AppBar

ms471841

Improve

Article Tags :

Dart
Flutter

Flutter - Gradient AppBar

Simple Light AppBar

Simple Dark AppBar

AppBar yellow Background with Red Text

Gradient AppBar Background

AppBar Grey Background centered Indigo Text with left icon

AppBar with Left and Right side icon

AppBar with Double icons on Sides

AppBar Preferred Size

Similar Reads

Thank You!

What kind of Experience do you want to share?