Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mastering the Theming in Flutter
Search
Muhammed Salih Güler
March 23, 2019
Programming
0
98
Mastering the Theming in Flutter
Muhammed Salih Güler
March 23, 2019
Tweet
Share
More Decks by Muhammed Salih Güler
See All by Muhammed Salih Güler
Fluttercon 2023 - Flutter Talk
salihgueler
0
370
AWS Summit Stockholm - Amplify Studio
salihgueler
0
37
Serverlabs Flutter Talk
salihgueler
0
36
What is AWS Amplify - KotlinConf
salihgueler
0
77
Underengineering Contents: Creating Content For Everyone
salihgueler
0
21
How to prepare a proposal to conferences?
salihgueler
1
84
Flutter Study Jam Hannover
salihgueler
0
44
Write your first Flutter application
salihgueler
0
47
Mastering the Theming in Flutter
salihgueler
0
67
Other Decks in Programming
See All in Programming
Pydantic x Database API:turu-pyの開発
yassun7010
1
470
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
100
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
880
What is TDD?
urakawa_jinsei
1
200
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
3.8k
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
120
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
120
クラウドサービスの 利用コストを削減する技術 - 円安の真南風を感じて -
pyama86
3
240
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
220
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
150
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
240
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
110
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
240
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
42
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Adopting Sorbet at Scale
ufuk
73
8.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Web Components: a chance to create the future
zenorocha
310
42k
Gamification - CAS2011
davidbonilla
80
5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Transcript
Mastering the Theming in Flutter Muhammed Salih Guler @salihgueler 23.03.2019
About Me • Android Engineer @ • Flutter and Dart
GDE • Flutter Berlin Organiser
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
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.
What is Flutter? • Google’s Mobile Development SDK • Open
Source • One codebase for multiple platform • Written with Dart • Performant UX • Hot Reload
Theming in Flutter
None
Theming • Uses Theme widget • Applies a theme to
descendant widgets. • It can be implemented in 2 ways ◦ App-wide ◦ Widget
Creating Themes
theme.dart const Theme({ Key key, @required this.data, this.isMaterialAppTheme = false,
@required this.child, })
main.dart Theme( // Create a unique theme with "ThemeData" data:
ThemeData( accentColor: Colors.yellow, ), child: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), );
main.dart Theme( // Create a unique theme with "ThemeData" data:
ThemeData( accentColor: Colors.yellow, ), child: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), );
None
main.dart void main() => runApp(MyApp());
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'), ); } }
app.dart return AnimatedTheme( data: theme, isMaterialAppTheme: true, child: widget.builder !=
null ? Builder( builder: (BuildContext context) { return widget.builder(context, child); }, ) : child, );
None
ThemeData • Holds the color and typography values for a
material design theme. • Used to configure a Theme widget.
ThemeData contd. • Brightness ◦ Dark ◦ Light
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'), ); } }
None
ThemeData contd. • Primary color pallette ◦ primarySwatch
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'), ); } }
None
ThemeData contd. • Accent color ◦ accentColor or secondary color
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'), ); } }
None
ThemeData contd. • Colors and it’s brightness • Fonts •
Icon themes • Individual themes for screen components • Cupertino theming
Advanced Theming in Flutter (Okay not so much)
Adding a Font • Download the file from a provider
(Google Fonts) • Add it to pubspec.yaml
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
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
main.dart ThemeData( primaryColor: Colors.deepOrange, accentColor: Colors.deepPurple, fontFamily: 'Raleway' )
main.dart Text( '$_counter', style: Theme.of(context).textTheme.display1.copyWith(fontWeigh t: FontWeight.w700), )
None
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, });
styles_example.dart class BrandColors { // Color palette static const mainTextColor
= const Color(0xff000000); }
styles_example.dart class CustomStyles { // Text styles static const customTextStyle
= const TextStyle( color: BrandColors.mainTextColor, fontFamily: "Raleway", fontStyle: FontStyle.italic, fontSize: 32.0 ); }
styles_example.dart Text( 'You have pushed the button this many times:',
style: CustomStyles.customTextStyle, textAlign: TextAlign.center, ),
None
What to do next? Codelabs: • MDC 101 in Flutter
Read: • Flutter theme documentation • Material Design website
Thank You! • Twitter: @salihgueler • GitHub: @salihgueler • Medium:
@muhammedsalihguler • E-mail:
[email protected]