Mastering the Theming in Flutter

Transcript

1. Mastering the Theming in Flutter Muhammed Salih Guler @salihgueler 14.05.2019
2. About Me • Android Engineer @ • Flutter and Dart GDE • Flutter Berlin Co-organiser
3. 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
4. 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.
5. What is Flutter? • Google’s Mobile Development SDK • Open Source • One codebase for multiple platform • Written with Dart • Performant UX • Hot Reload
6. Theming in Flutter
8. Theming • Uses Theme widget • Applies a theme to descendant widgets. • It can be implemented in 2 ways ◦ App-wide ◦ Widget
9. Creating Themes
10. theme.dart const Theme({ Key key, @required this.data, this.isMaterialAppTheme = false, @required this.child, })
11. main.dart Theme( // Create a unique theme with "ThemeData" data: ThemeData( accentColor: Colors.yellow, ), child: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), );
12. main.dart Theme( // Create a unique theme with "ThemeData" data: ThemeData( accentColor: Colors.yellow, ), child: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), );
14. main.dart void main() => runApp(MyApp());
15. 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'), ); } }
16. app.dart return AnimatedTheme( data: theme, isMaterialAppTheme: true, child: widget.builder != null ? Builder( builder: (BuildContext context) { return widget.builder(context, child); }, ) : child, );
18. ThemeData • Holds the color and typography values for a material design theme. • Used to configure a Theme widget.
19. ThemeData contd. • Brightness ◦ Dark ◦ Light
20. 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'), ); } }
22. ThemeData contd. • Primary color pallette ◦ primarySwatch
23. 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'), ); } }
25. ThemeData contd. • Accent color ◦ accentColor or secondary color
26. 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'), ); } }
28. ThemeData contd. • Colors and it’s brightness • Fonts • Icon themes • Individual themes for screen components • Cupertino theming
29. Advanced Theming in Flutter (Okay not so much)
30. Adding a Font • Download the file from a provider (Google Fonts) • Add it to pubspec.yaml
31. 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
32. 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
33. main.dart ThemeData( primaryColor: Colors.deepOrange, accentColor: Colors.deepPurple, fontFamily: 'Raleway' )
34. main.dart Text( '$_counter', style: Theme.of(context).textTheme.display1.copyWith(fontWeigh t: FontWeight.w700), )
36. 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, });
37. styles_example.dart class BrandColors { // Color palette static const mainTextColor = const Color(0xff000000); }
38. styles_example.dart class CustomStyles { // Text styles static const customTextStyle = const TextStyle( color: BrandColors.mainTextColor, fontFamily: "Raleway", fontStyle: FontStyle.italic, fontSize: 32.0 ); }
39. styles_example.dart Text( 'You have pushed the button this many times:', style: CustomStyles.customTextStyle, textAlign: TextAlign.center, ),
41. What to do next? Codelabs: • MDC 101 in Flutter Read: • Flutter theme documentation • Material Design website
42. Thank You! • Twitter: @salihgueler • GitHub: @salihgueler • Medium: @muhammedsalihguler • E-mail: muhammedsalihguler@gmail.com