Define gradient of AppBar in AppBarTheme within ThemeData

Issue

I am trying to create the application theme data in a flutter and while defining the ThemeData i want to customize the AppBar of my application with the gradient look. Now, in ThemeData we have AppBarTheme option but not sure how to define gradient using AppBarTheme.

However, using AppBar in Scaffold i am able to define the gradient but looking for a way to define it in ThemeData

Following is the working code of gradient but in Scaffold, not sure how would I add the flexibleSpace in AppBarTheme

return Scaffold(
      appBar: AppBar(
       
        title: Text(
          'Dashboard',
        ),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[
                const Color(0xFFD26934),
                const Color(0xFFFF9B44),
              ],
            ),
          ),
        ),
      ),

Would like to define gradient here

ThemeData(
    fontFamily: 'Lato-Regular',
    appBarTheme: AppBarTheme(
      titleTextStyle: TextStyle(color: Colors.white),
    ),
  ),

Solution

package:flutter/material attempts to implement Google’s Material Design: https://material.io/design

This is a specific set of style guidelines, developed by Google, and puts certain rules in place. One of the rules that they put in place is that app bars should be a solid colour (i.e. not a gradient).

Because Flutter tries to match this spec, it doesn’t allow gradients in AppBar widgets. But you can always make your own.

For example:

class GradientAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) => DecoratedBox(
    child: Text('My Title'),
    decoration: BoxDecoration(
      gradient: // your gradient here
    ),
  );

  @override
  Size get preferredSize => Size(double.infinity, 60);  
}

Note, if you want to pass your custom app bar to Scaffold.appBar it needs to implement PreferredSizeWidget and override preferredSize so the scaffold knows how big to make it.

You will also probably want to extract things like title, actions, etc into parameters to GradientAppBar so you can reuse it

Answered By – cameron1024

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)