CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-appbar
Hunt
Hunt

Reputation: 8425

Define gradient of AppBar in AppBarTheme within ThemeData

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),
    ),
  ),

Upvotes: 0

Views: 1022

Answers (2)

cameron1024
cameron1024

Reputation: 10156

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

Upvotes: 1

Marijn Berends
Marijn Berends

Reputation: 203

What you are asking is not possible. You sadly enough cannot assign a gradient to a color. The only way is with the flexibleSpace.

appBar: AppBar(
          centerTitle: true,
            title: Text(widget.title),
            flexibleSpace: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: <Color>[
                  Colors.red,
                  Colors.blue
                ])          
             ),        
         ),      
     ),

Upvotes: 0

Related Questions