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
May 14, 2019
Programming
0
71
Mastering the Theming in Flutter
Muhammed Salih Güler
May 14, 2019
Tweet
Share
More Decks by Muhammed Salih Güler
See All by Muhammed Salih Güler
Fluttercon 2023 - Flutter Talk
salihgueler
0
450
AWS Summit Stockholm - Amplify Studio
salihgueler
0
45
Serverlabs Flutter Talk
salihgueler
0
45
What is AWS Amplify - KotlinConf
salihgueler
0
85
Underengineering Contents: Creating Content For Everyone
salihgueler
0
32
How to prepare a proposal to conferences?
salihgueler
1
95
Flutter Study Jam Hannover
salihgueler
0
54
Write your first Flutter application
salihgueler
0
57
What's new for Flutter at I/O 2019
salihgueler
0
30
Other Decks in Programming
See All in Programming
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
550
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
170
生成AI時代のコンポーネントライブラリの作り方
touyou
1
230
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Writing Fast Ruby
sferik
628
62k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Rails Girls Zürich Keynote
gr2m
95
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Review Best Practice
trishagee
69
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Transcript
Mastering the Theming in Flutter Muhammed Salih Guler @salihgueler 14.05.2019
About Me • Android Engineer @ • Flutter and Dart
GDE • Flutter Berlin Co-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]