Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Material Design Components in Flutter

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Maureen Josephine Maureen Josephine
August 08, 2019
Programming
60
0

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

More Decks by Maureen Josephine

See All by Maureen Josephine
My Flutter Journey
Avatar for Maureen Josephine maureenjosephine
0
80
Setting Lint Rules in Flutter
Avatar for Maureen Josephine maureenjosephine
0
120
Testing Flutter Apps-DevfestTanzania
Avatar for Maureen Josephine maureenjosephine
0
37
Internationalizing Flutter Apps
Avatar for Maureen Josephine maureenjosephine
0
56
Atlassian Forge
Avatar for Maureen Josephine maureenjosephine
0
37
Building your First Flutter for Web App
Avatar for Maureen Josephine maureenjosephine
0
74
Atlassian Codegeist - Forge
Avatar for Maureen Josephine maureenjosephine
0
160
Trello Uses Cases - Atlassian
Avatar for Maureen Josephine maureenjosephine
0
37
Getting Started with Flutter
Avatar for Maureen Josephine maureenjosephine
0
52

Other Decks in Programming

See All in Programming
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
420
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
160
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.6k
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
220
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
600
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
190
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
430
Rでドレミ/Do-Re-Mi_with_R
Avatar for florets1 florets1
0
130
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
170
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
200
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
750
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
120

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.8k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
400
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
360
Done Done
Avatar for chrislema chrislema
187
17k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
330
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340

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