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

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
0
54

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
71
Setting Lint Rules in Flutter
Avatar for Maureen Josephine maureenjosephine
0
110
Testing Flutter Apps-DevfestTanzania
Avatar for Maureen Josephine maureenjosephine
0
31
Internationalizing Flutter Apps
Avatar for Maureen Josephine maureenjosephine
0
35
Atlassian Forge
Avatar for Maureen Josephine maureenjosephine
0
32
Building your First Flutter for Web App
Avatar for Maureen Josephine maureenjosephine
0
71
Atlassian Codegeist - Forge
Avatar for Maureen Josephine maureenjosephine
0
140
Trello Uses Cases - Atlassian
Avatar for Maureen Josephine maureenjosephine
0
24
Getting Started with Flutter
Avatar for Maureen Josephine maureenjosephine
0
38

Other Decks in Programming

See All in Programming
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
730
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.3k
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
160

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
48
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
180
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
940
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
340
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
690

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