Monday, October 15, 2018

Flutter using Themes

There are two ways to define themes: App-wide or using Theme Widgets that define the colors and font styles for a particular part of our application
n order to share a Theme containing colors and font styles across our entire app, we can provide ThemeData to the MaterialApp constructor.

MaterialApp(
  title: title,
  theme: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);

Creating unique ThemeData
Theme(
  // Create a unique theme with "ThemeData"
  data: ThemeData(
    accentColor: Colors.yellow,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

Extending the parent theme
Rather than overriding everything, it often makes sense to extend the parent theme. We can achieve this by using the copyWith method.

Theme(
  // Find and Extend the parent theme using "copyWith". Please see the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);


References:
https://flutter.io/cookbook/design/themes/

No comments:

Post a Comment