How to Add Background Image to AppBar in Flutter

How to Add Background Image to AppBar in Flutter

by with No Comment AppBarHowTosScaffold

Flutter allows developers to change the background color of an app bar easily by providing backgroundColor option. Instead of background color, we may want to add a background image to the app bar.

To add the background image to AppBar widget, we can use the flexibleSpace option of the widget. The flexibleSpace property of AppBar accepts a widget as its value, so we can pass a Container widget as its value and set an image background to the Container.

example:

appBar: AppBar(
        title: Text('How to Flutter', style: TextStyle(
            color: Colors.white,
            fontSize: 28
        ),) ,
        centerTitle: true,
        flexibleSpace: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/sample.png'),
                  fit: BoxFit.fill
              )
          ),
        ),

      ),

In this way we can add a background image to an AppBar in Flutter.

How to Make Body Background Image apply to AppBar also ?

Other requirement similar to this can be like, you want to make your body’s background image extends to AppBar also. We can achieve that by making the background color of AppBar transparent and using the extendBodyBehindAppBar option of the Scaffold widget and set its value to true.

Also make sure that you have set the value of elevation to 0 in AppBar, since its default value is not zero and you may find a small shadow between the Body and AppBar if its value is not zero. If you want a separation between the app bar and the body, then you can play with this elevation property and set its value accordingly.

example:

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text('How to Flutter', style: TextStyle(
            color: Colors.white,
            fontSize: 28
        ),) ,
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/bgimg.jpg'),
            fit: BoxFit.fill
          )
        ),
      ),
    )

 

How to add Gradient Background Color to AppBar Widget in Flutter

How to add Gradient Background Color to AppBar Widget in Flutter

by with No Comment AppBarHowTos

AppBar widget in Flutter comes with a background color option which takes a solid color as its value. By default we cannot add gradient color to AppBar using the available background color option.

One way to add gradient color to the AppBar is by using its flexibleSpace property. The flexibleSpace property of the AppBar accepts a widget as its value, so we can assign a container to it which itself implements a gradient background color.

example:

...
appBar: AppBar(
          title: Text('How to Flutter'),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    colors: <Color>[Colors.purple, Colors.blue])),
          )),
...

The output for the above code

Another way to implement the gradient background color for the AppBar is to mock it with other widgets. That is, we can remove the appBar option from the Scaffold widget and have to design other widgets which then looks and functions like AppBar.

How to Customize the Back Button in AppBar Widget in Flutter

How to Customize the Back Button in AppBar Widget in Flutter

by with No Comment AppBarHowTos

Often we may want to customize the back button which gets added to any page’s app bar automatically.

Changing the Color of the Back Button Icon

The default color of the back button icon, which Flutter adds to any page’s app bar when pushed onto another page is white. If you want to change only the color and not the icon itself, then we can change the color in couple of ways.

1. Using the leading option

The leading option of AppBar accepts a widget as its value. We can pass the BackButton widget as the value and set its color to any desired color.

example:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        leading: BackButton(
          color: Colors.black,
        ),

      ),
    ) ;
  }
2. Using the iconTheme option of AppBar

We can use the iconTheme option of AppBar widget which accepts IconThemeData as its value and sets the color to any desired color.

example:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        iconTheme: IconThemeData(
          color: Colors.redAccent
        ),
      ),
    ) ;
  }

Changing the Back Button Icon in AppBar

We can also change the default back button to any other icon. Though we can use an image or even text also in place of the back button, mostly we may be interested to have an icon.

When we replace the default back button to any other widget, we also needs to implement the default functionality of the back button (popping the page)  by ourselves.

example:

AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        leading: GestureDetector(
          child: Icon( Icons.arrow_back_ios, color: Colors.black,  ),
          onTap: () {
            Navigator.pop(context);
          } ,
        ) ,
      ),

Instead of using GestureDetector, we can also use any other widget, for example IconButton.

Read more on AppBar in Flutter : AppBar

How to Change the Background Color of AppBar widget in Flutter

How to Change the Background Color of AppBar widget in Flutter

by with No Comment AppBarHowTos

In most of the Flutter applications we may not want to use the default colors and want to use app/ theme specific colors. AppBar is one of the widget which gets a good amount of attention and changing its background color can have a good impact on user experience.

The background color of AppBar widget can be changed in a couple of ways in Flutter.

  1. By modifying global theme
  2. Providing a backgroundColor option at widget level

Modifying Global Theme

We can modify the global theme of a Flutter application inside main.dart file in MaterialApp widget. We can give provide a different color to the primarySwatch option than the default color which is blue.

example:

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink ,
      ),
      home: AppBarHowTo() ,
    );
  }

At AppBar Widget level

The global colors can be modified at a widget level. Though the way of modifying global colors is different from widget to widget, it is a straight forward process for AppBar background color. The AppBar accepts a backgroundColor option whose value needs to be a Color.

example:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter') ,
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
    ) ;
  }

Read more about AppBar here: AppBar – A Deep Dive

How to Center the title in AppBar widget in Flutter

How to Center the title in AppBar widget in Flutter

by with No Comment AppBarHowTos

By default the title in the AppBar widget in Flutter applications is left aligned and we may want to align it to the center.

Aligning title of AppBar widget to Center in Flutter is very much straight forward. All we need to do is to add an option centerTitle and set its value to true in the widget.

centerTitle: true

full code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter') ,
        centerTitle: true,
      ),
    ) ;
  }

The output for the above code will be:

Read more about AppBar widget here: Deep Dive into AppBar