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
100
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
410
AWS Summit Stockholm - Amplify Studio
salihgueler
0
41
Serverlabs Flutter Talk
salihgueler
0
37
What is AWS Amplify - KotlinConf
salihgueler
0
78
Underengineering Contents: Creating Content For Everyone
salihgueler
0
24
How to prepare a proposal to conferences?
salihgueler
1
86
Flutter Study Jam Hannover
salihgueler
0
47
Write your first Flutter application
salihgueler
0
48
Mastering the Theming in Flutter
salihgueler
0
69
Other Decks in Programming
See All in Programming
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Rails アプリ地図考 Flush Cut
makicamel
1
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Featured
See All Featured
A better future with KSS
kneath
238
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Adopting Sorbet at Scale
ufuk
74
9.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
RailsConf 2023
tenderlove
29
1k
How GitHub (no longer) Works
holman
313
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Designing for humans not robots
tammielis
250
25k
Typedesign – Prime Four
hannesfritz
40
2.5k
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]