Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design Components in Flutter

Avatar for Maureen Josephine Maureen Josephine
August 08, 2019
Programming
0
52

Material Design Components in Flutter

A session to cover material design components and how to make them useful in a Flutter App

Avatar for Maureen Josephine

Maureen Josephine

August 08, 2019
Tweet

More Decks by Maureen Josephine

See All by Maureen Josephine
My Flutter Journey
Avatar for Maureen Josephine maureenjosephine
0
69
Setting Lint Rules in Flutter
Avatar for Maureen Josephine maureenjosephine
0
100
Testing Flutter Apps-DevfestTanzania
Avatar for Maureen Josephine maureenjosephine
0
29
Internationalizing Flutter Apps
Avatar for Maureen Josephine maureenjosephine
0
33
Atlassian Forge
Avatar for Maureen Josephine maureenjosephine
0
30
Building your First Flutter for Web App
Avatar for Maureen Josephine maureenjosephine
0
69
Atlassian Codegeist - Forge
Avatar for Maureen Josephine maureenjosephine
0
140
Trello Uses Cases - Atlassian
Avatar for Maureen Josephine maureenjosephine
0
21
Getting Started with Flutter
Avatar for Maureen Josephine maureenjosephine
0
33

Other Decks in Programming

See All in Programming
パッケージ設計の黒魔術/Kyoto.go#63
Avatar for kadota kyohei lufia
3
430
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
Avatar for clshinji clshinji
1
210
ソフトウェアテスト徹底指南書の紹介
Avatar for Hiroki Iseri goyoki
1
150
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
Avatar for Naoki Kishida kishida
22
5.7k
go test -json そして testing.T.Attr / Kyoto.go #63
Avatar for utagawa kiki utgwkk
3
300
機能追加とリーダー業務の類似性
Avatar for Rinchoku rinchoku
2
1.3k
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
4
1.4k
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
180
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
270
HTMLの品質ってなんだっけ？ “HTMLクライテリア”の設計と実践
Avatar for una unachang113
4
2.8k
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
180
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
Avatar for Taito Tanaka taitotnk
0
850

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k

Transcript

  1. MATERIAL DESIGN COMPONENTS IN FLUTTER

  2. MAUREEN JOSEPHINE Twitter: @J_Akello

  3. MATERIAL DESIGN?

  4. None

  5. Material design is a visual language that synthesizes the classic

    principles of good design with the innovation of technology and science.

  6. FIRST IMPRESSION ON MESSY ROOM?

  7. IMPRESSION ON A WELL ARRANGED ROOM

  8. WHY MATERIAL DESIGN? • Helps in delivering high quality outputs

    consistently across all platforms • Produces pleasant looking components that behave like real world objects. • Enhances user experience

  9. FACTORS TO CONSIDER • Brand • Color • Layout •

    Content doesn’t have to bore • Data

  10. FLUTTER APPROACH IN MATERIAL DESIGN Flutter is a technology developed

    by Google that can run on Android and iOS devices from a single codebase.

  11. MATERIAL COMPONENTS WIDGETS These are visual,behavioral and motion rich widgets

    implementing Material Design Guidelines. • App structure and navigation • Buttons • Input and selections • Dialogs, alerts and panels • Layouts.
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None

  18. SAMPLE APP WITH MATERIAL DESIGN COMPONENTS

  19. None