Mastering the Theming in Flutter

Slide 1

Slide 1 text

Mastering the Theming in Flutter Muhammed Salih Guler @salihgueler 23.03.2019

Slide 2

Slide 2 text

About Me ● Android Engineer @ ● Flutter and Dart GDE ● Flutter Berlin Organiser

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

What is Flutter? ● Google’s Mobile Development SDK ● Open Source ● One codebase for multiple platform ● Written with Dart ● Performant UX ● Hot Reload

Slide 6

Slide 6 text

Theming in Flutter

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Theming ● Uses Theme widget ● Applies a theme to descendant widgets. ● It can be implemented in 2 ways ○ App-wide ○ Widget

Slide 9

Slide 9 text

Creating Themes

Slide 10

Slide 10 text

theme.dart const Theme({ Key key, @required this.data, this.isMaterialAppTheme = false, @required this.child, })

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

main.dart void main() => runApp(MyApp());

Slide 15

Slide 15 text

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'), ); } }

Slide 16

Slide 16 text

app.dart return AnimatedTheme( data: theme, isMaterialAppTheme: true, child: widget.builder != null ? Builder( builder: (BuildContext context) { return widget.builder(context, child); }, ) : child, );

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

ThemeData ● Holds the color and typography values for a material design theme. ● Used to conﬁgure a Theme widget.

Slide 19

Slide 19 text

ThemeData contd. ● Brightness ○ Dark ○ Light

Slide 20

Slide 20 text

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'), ); } }

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ThemeData contd. ● Primary color pallette ○ primarySwatch

Slide 23

Slide 23 text

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ThemeData contd. ● Accent color ○ accentColor or secondary color

Slide 26

Slide 26 text

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'), ); } }

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

ThemeData contd. ● Colors and it’s brightness ● Fonts ● Icon themes ● Individual themes for screen components ● Cupertino theming

Slide 29

Slide 29 text

Advanced Theming in Flutter (Okay not so much)

Slide 30

Slide 30 text

Adding a Font ● Download the ﬁle from a provider (Google Fonts) ● Add it to pubspec.yaml

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

main.dart ThemeData( primaryColor: Colors.deepOrange, accentColor: Colors.deepPurple, fontFamily: 'Raleway' )

Slide 34

Slide 34 text

main.dart Text( '$_counter', style: Theme.of(context).textTheme.display1.copyWith(fontWeigh t: FontWeight.w700), )

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

styles_example.dart class BrandColors { // Color palette static const mainTextColor = const Color(0xff000000); }

Slide 38

Slide 38 text

styles_example.dart class CustomStyles { // Text styles static const customTextStyle = const TextStyle( color: BrandColors.mainTextColor, fontFamily: "Raleway", fontStyle: FontStyle.italic, fontSize: 32.0 ); }

Slide 39

Slide 39 text

styles_example.dart Text( 'You have pushed the button this many times:', style: CustomStyles.customTextStyle, textAlign: TextAlign.center, ),

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

What to do next? Codelabs: ● MDC 101 in Flutter Read: ● Flutter theme documentation ● Material Design website

Slide 42

Slide 42 text

Thank You! ● Twitter: @salihgueler ● GitHub: @salihgueler ● Medium: @muhammedsalihguler ● E-mail: [email protected]