Appbar color, toolbar color, text, font and buttons are not changing by applying Theme Data in flutter App

Question

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Personal Expenses',
      theme: ThemeData(
    
        brightness: Brightness.light,
        primaryColor: Colors.lightGreen[800],
        primarySwatch: Colors.amber,
        errorColor: Colors.red,
        accentColor: Colors.cyan[600],
        fontFamily: 'Quicksand',
        textTheme: ThemeData.light().textTheme.copyWith(
            title: TextStyle(
              fontFamily: 'Quicksand',
              backgroundColor: Colors.grey,
              fontSize: 18,
            ),
        ),
        appBarTheme: AppBarTheme(
          textTheme: ThemeData.light().textTheme.copyWith(
              title: TextStyle(
                  fontFamily: 'OpenSans',
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic),
                  button: TextStyle(color: Colors.white),
              ),
          )
        ),
        home: MyHomePage(),
    );
  }

For example, to apply theme on Button I am doing this but theme does not work on it

FlatButton(
  color: Colors.white,
  textColor: Theme.of(context).textTheme.button.color,
  onPressed: _presentDatePicker,
  child: Text(
    'Choose Date',
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
)

Robin · Answer 1 · 2020-07-29T11:55:59.010

You set button text color under AppBarTheme not in textTheme which you refer in your FlatButton.

This may fix your problem.

FlatButton(
  color: Colors.white,
  textColor: Theme.of(context).AppBarTheme.textTheme.button.color,
  onPressed: _presentDatePicker,
  child: Text(
    'Choose Date',
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
)

Or you can set buttonColor like this

theme: ThemeData(
    primarySwatch: Colors.purple,
    accentColor: Colors.amber,
    buttonColor: Colors.white,
),

And use that buttonColor in your FlatButton like this

FlatButton(
  color: Colors.white,
  textColor: Theme.of(context).buttonColor,
  onPressed: _presentDatePicker,
  child: Text(
    'Choose Date',
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
)

Appbar color, toolbar color, text, font and buttons are not changing by applying Theme Data in flutter App

1 Answers1