Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mastering the Theming in Flutter

Mastering the Theming in Flutter

Muhammed Salih Güler

March 23, 2019
Tweet

More Decks by Muhammed Salih Güler

Other Decks in Programming

Transcript

  1. About Me • Android Engineer @ • Flutter and Dart

    GDE • Flutter Berlin Organiser
  2. Theming • A theme describes the colors and typographic choices

    of an application. • It’s important to establish a general language between your designer and developer
  3. Theming contd. • A primary color is the color displayed

    most frequently across your app’s screens and components. • A secondary color provides more ways to accent and distinguish your product.
  4. What is Flutter? • Google’s Mobile Development SDK • Open

    Source • One codebase for multiple platform • Written with Dart • Performant UX • Hot Reload
  5. Theming • Uses Theme widget • Applies a theme to

    descendant widgets. • It can be implemented in 2 ways ◦ App-wide ◦ Widget
  6. main.dart Theme( // Create a unique theme with "ThemeData" data:

    ThemeData( accentColor: Colors.yellow, ), child: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), );
  7. main.dart Theme( // Create a unique theme with "ThemeData" data:

    ThemeData( accentColor: Colors.yellow, ), child: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), );
  8. main.dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context)

    { return MaterialApp( theme: ThemeData( primarySwatch: Colors.deepOrange, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
  9. app.dart return AnimatedTheme( data: theme, isMaterialAppTheme: true, child: widget.builder !=

    null ? Builder( builder: (BuildContext context) { return widget.builder(context, child); }, ) : child, );
  10. ThemeData • Holds the color and typography values for a

    material design theme. • Used to configure a Theme widget.
  11. main.dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context)

    { return MaterialApp( theme: ThemeData( brightness: Brightness.dark ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
  12. main.dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context)

    { return MaterialApp( theme: ThemeData( primarySwatch: Colors.deepOrange, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
  13. main.dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context)

    { return MaterialApp( theme: ThemeData( accentColor: Colors.deepOrange, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
  14. ThemeData contd. • Colors and it’s brightness • Fonts •

    Icon themes • Individual themes for screen components • Cupertino theming
  15. Adding a Font • Download the file from a provider

    (Google Fonts) • Add it to pubspec.yaml
  16. regular 400 regular 400 Italic medium 500 medium 500 Italic

    semi-bold 600 semi-bold 600 Italic bold 700 bold 700 Italic extra-bold 800 extra-bold 800 Italic black 900 black 900 Italic Font weights
  17. pubspec.yaml fonts: - family: Raleway fonts: - asset: assets/fonts/Raleway-Medium.ttf -

    asset: assets/fonts/Raleway-MediumItalic.ttf style: italic - asset: assets/fonts/Raleway-Bold.ttf weight: 700
  18. main.dart const TextTheme({ this.display4, this.display3, this.display2, this.display1, this.headline, this.title, ...

    this.subhead, this.body2, this.body1, this.caption, this.button, this.subtitle, this.overline, });
  19. styles_example.dart class CustomStyles { // Text styles static const customTextStyle

    = const TextStyle( color: BrandColors.mainTextColor, fontFamily: "Raleway", fontStyle: FontStyle.italic, fontSize: 32.0 ); }
  20. styles_example.dart Text( 'You have pushed the button this many times:',

    style: CustomStyles.customTextStyle, textAlign: TextAlign.center, ),
  21. What to do next? Codelabs: • MDC 101 in Flutter

    Read: • Flutter theme documentation • Material Design website