CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC) | by Michael Thomsen | Flutter | Medium</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2018-05-10T19:11:32.163Z"/><meta data-rh="true" name="title" content="Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC) | by Michael Thomsen | Flutter | Medium"/><meta data-rh="true" property="og:title" content="Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material…"/><meta data-rh="true" property="al:android:url" content="medium://p/13ae9279ef19"/><meta data-rh="true" property="al:ios:url" content="medium://p/13ae9279ef19"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="At Google I/O 2018, the Material team announced a important update to Material Design, with a strong focus on enabling mobile apps to stand out from the rest by systematically applying brand-specific…"/><meta data-rh="true" property="og:description" content="At Google I/O 2018, the Material team announced a important update to Material Design, with a strong focus on enabling mobile apps to stand…"/><meta data-rh="true" property="og:url" content="https://medium.com/flutter/building-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19"/><meta data-rh="true" property="al:web:url" content="https://medium.com/flutter/building-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*cyTGpzWuHqvYFGTV7uQyXA.png"/><meta data-rh="true" property="article:author" content="https://medium.com/@mit.mit"/><meta data-rh="true" name="author" content="Michael Thomsen"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material…"/><meta data-rh="true" name="twitter:site" content="@flutterdev"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/13ae9279ef19"/><meta data-rh="true" property="twitter:description" content="At Google I/O 2018, the Material team announced a important update to Material Design, with a strong focus on enabling mobile apps to stand…"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*cyTGpzWuHqvYFGTV7uQyXA.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="3 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@mit.mit"/><link data-rh="true" rel="canonical" href="https://medium.com/flutter/building-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/13ae9279ef19"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*cyTGpzWuHqvYFGTV7uQyXA.png"],"url":"https:\u002F\u002Fmedium.com\u002Fflutter\u002Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19","dateCreated":"2018-05-10T19:11:32.163Z","datePublished":"2018-05-10T19:11:32.163Z","dateModified":"2018-06-21T10:26:28.644Z","headline":"Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)","name":"Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)","description":"At Google I\u002FO 2018, the Material team announced a important update to Material Design, with a strong focus on enabling mobile apps to stand out from the rest by systematically applying brand-specific…","identifier":"13ae9279ef19","author":{"@type":"Person","name":"Michael Thomsen","url":"https:\u002F\u002Fmedium.com\u002F@mit.mit"},"creator":["Michael Thomsen"],"publisher":{"@type":"Organization","name":"Flutter","url":"https:\u002F\u002Fmedium.com\u002Fflutter","logo":{"@type":"ImageObject","width":228,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:456\u002F1*KvnfbD1F5CzEsU9wSmRZyA.png"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Fflutter\u002Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19"}</script><style type="text/css" data-fela-rehydration="572" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="572" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(73, 139, 209, 1)}.es{border-color:rgba(73, 139, 209, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(73, 139, 209, 1)}.ez:disabled:hover{border-color:rgba(73, 139, 209, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.ia{align-items:baseline}.ib{width:48px}.ic{height:48px}.id{border:2px solid rgba(255, 255, 255, 1)}.ie{z-index:0}.if{box-shadow:none}.ig{border:1px solid rgba(0, 0, 0, 0.05)}.ih{margin-left:-12px}.ii{width:28px}.ij{height:28px}.ik{z-index:1}.il{width:24px}.im{margin-bottom:2px}.in{flex-wrap:nowrap}.io{font-size:16px}.ip{line-height:24px}.ir{margin:0 8px}.is{display:inline}.it{color:rgba(73, 139, 209, 1)}.iu{fill:rgba(73, 139, 209, 1)}.ix{flex:0 0 auto}.ja{flex-wrap:wrap}.jd{white-space:pre-wrap}.je{margin-right:4px}.jf{overflow:hidden}.jg{max-height:20px}.jh{text-overflow:ellipsis}.ji{display:-webkit-box}.jj{-webkit-line-clamp:1}.jk{-webkit-box-orient:vertical}.jl{word-break:break-all}.jn{padding-left:8px}.jo{padding-right:8px}.kp> *{flex-shrink:0}.kq{overflow-x:scroll}.kr::-webkit-scrollbar{display:none}.ks{scrollbar-width:none}.kt{-ms-overflow-style:none}.ku{width:74px}.kv{flex-direction:row}.kw{z-index:2}.kz{-webkit-user-select:none}.la{border:0}.lb{fill:rgba(117, 117, 117, 1)}.le{outline:0}.lf{user-select:none}.lg> svg{pointer-events:none}.lp{cursor:progress}.lq{margin-left:4px}.lr{margin-top:0px}.ls{opacity:1}.lt{padding:4px 0}.lw{width:16px}.ly{display:inline-flex}.me{max-width:100%}.mf{padding:8px 2px}.mg svg{color:#6B6B6B}.mx{line-height:1.58}.my{letter-spacing:-0.004em}.mz{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.nu{margin-bottom:-0.46em}.nv{text-decoration:underline}.nw{font-style:italic}.nx{clear:both}.od{margin-left:auto}.oe{margin-right:auto}.of{max-width:2500px}.ol{padding-top:5px}.om{padding-bottom:5px}.oo{cursor:zoom-in}.op{z-index:auto}.or{height:auto}.os{margin-top:10px}.ot{max-width:728px}.ow{max-width:400px}.ox{line-height:1.18}.oy{letter-spacing:-0.022em}.oz{font-weight:600}.pp{margin-bottom:-0.31em}.pv{max-width:3264px}.pw{line-height:1.12}.qp{margin-bottom:-0.28em}.qq{margin:auto}.qr{padding-bottom:56.206088992974244%}.qs{height:0}.qt{list-style-type:decimal}.qu{margin-left:30px}.qv{padding-left:0px}.rb{margin-bottom:26px}.rc{margin-top:6px}.rd{margin-top:8px}.re{margin-right:8px}.rf{padding:8px 16px}.rg{border-radius:100px}.rh{transition:background 300ms ease}.rj{white-space:nowrap}.rk{border-top:none}.rl{margin-bottom:14px}.rm{height:52px}.rn{max-height:52px}.ro{box-sizing:content-box}.rp{position:static}.rr{max-width:155px}.rx{margin-right:20px}.sd{height:0px}.se{margin-bottom:40px}.sf{margin-bottom:48px}.st{border-radius:2px}.sv{height:64px}.sw{width:64px}.sx{align-self:flex-end}.sy{flex:1 1 auto}.tc{padding-right:4px}.td{font-weight:500}.tk{margin-top:16px}.tl{color:rgba(255, 255, 255, 1)}.tm{fill:rgba(255, 255, 255, 1)}.tn{background:rgba(25, 25, 25, 1)}.to{border-color:rgba(25, 25, 25, 1)}.tr:disabled{opacity:0.1}.ts:disabled:hover{background:rgba(25, 25, 25, 1)}.tt:disabled:hover{border-color:rgba(25, 25, 25, 1)}.uc{gap:18px}.ud{fill:rgba(61, 61, 61, 1)}.uf{margin-top:32px}.ug{fill:#242424}.uh{background:0}.ui{border-color:#242424}.uj:disabled:hover{color:#242424}.uk:disabled:hover{fill:#242424}.ul:disabled:hover{border-color:#242424}.uw{border-bottom:solid 1px #E5E5E5}.ux{margin-top:72px}.uy{padding:24px 0}.uz{margin-bottom:0px}.va{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(68, 119, 175, 1)}.eu:hover{border-color:rgba(68, 119, 175, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.iq:hover{text-decoration:underline}.iv:hover:not(:disabled){color:rgba(68, 119, 175, 1)}.iw:hover:not(:disabled){fill:rgba(68, 119, 175, 1)}.ld:hover{fill:rgba(8, 8, 8, 1)}.lu:hover{fill:#000000}.lv:hover p{color:#000000}.lx:hover{color:#000000}.mh:hover svg{color:#000000}.ri:hover{background-color:#F2F2F2}.su:hover{background-color:none}.tp:hover{background:#000000}.tq:hover{border-color:#242424}.ue:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.lc:focus{fill:rgba(8, 8, 8, 1)}.mi:focus svg{color:#000000}.oq:focus{transform:scale(1.01)}.lh:active{border-style:none}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:68px}.gc{max-width:680px}.hq{font-size:42px}.hr{margin-top:1.19em}.hs{margin-bottom:32px}.ht{line-height:52px}.hu{letter-spacing:-0.011em}.hz{align-items:center}.kb{border-top:solid 1px #F2F2F2}.kc{border-bottom:solid 1px #F2F2F2}.kd{margin:32px 0 0}.ke{padding:3px 8px}.kn> *{margin-right:24px}.ko> :last-child{margin-right:0}.lo{margin-top:0px}.md{margin:0}.nq{font-size:20px}.nr{margin-top:2.14em}.ns{line-height:32px}.nt{letter-spacing:-0.003em}.oc{max-width:1192px}.ok{margin-top:56px}.pm{margin-top:1.72em}.pn{line-height:24px}.po{letter-spacing:0}.pu{margin-top:0.94em}.ql{font-size:24px}.qm{margin-top:1.95em}.qn{line-height:30px}.qo{letter-spacing:-0.016em}.ra{margin-top:1.14em}.rw{display:inline-block}.sc{margin-bottom:104px}.sg{flex-direction:row}.sj{margin-bottom:0}.sk{margin-right:20px}.sz{max-width:500px}.ty{margin-bottom:88px}.ub{margin-bottom:72px}.uq{width:min-width}.uv{padding-top:72px}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.ln{margin-top:0px}.ou{margin-left:auto}.ov{text-align:center}.rv{display:inline-block}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lm{margin-top:0px}.ru{display:inline-block}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lk{margin-top:0px}.ll{margin-right:0px}.rt{display:inline-block}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{margin-bottom:24px}.gz{line-height:38px}.ha{letter-spacing:-0.014em}.hv{align-items:flex-start}.iy{flex-direction:column}.jb{margin-bottom:2px}.jp{margin:24px -24px 0}.jq{padding:0}.kf> *{margin-right:8px}.kg> :last-child{margin-right:24px}.kx{margin-left:0px}.li{margin-top:0px}.lj{margin-right:0px}.lz{margin:0}.mj{border:1px solid #F2F2F2}.mk{border-radius:99em}.ml{padding:0px 16px 0px 12px}.mm{height:38px}.mn{align-items:center}.mp svg{margin-right:8px}.na{font-size:18px}.nb{margin-top:1.56em}.nc{line-height:28px}.nd{letter-spacing:-0.003em}.ny{max-width:100%}.og{margin-top:40px}.pa{font-size:16px}.pb{margin-top:1.23em}.pc{letter-spacing:0}.pq{margin-top:0.67em}.px{font-size:20px}.py{margin-top:1.2em}.pz{line-height:24px}.qw{margin-top:1.34em}.rs{display:inline-block}.ry{margin-bottom:96px}.sr{margin-bottom:20px}.ss{margin-right:0}.te{font-size:24px}.tf{line-height:30px}.tg{letter-spacing:-0.016em}.tu{margin-bottom:64px}.um{width:100%}.ur{padding-top:48px}.mo:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hl{font-size:42px}.hm{margin-top:1.19em}.hn{margin-bottom:32px}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.hy{align-items:center}.jx{border-top:solid 1px #F2F2F2}.jy{border-bottom:solid 1px #F2F2F2}.jz{margin:32px 0 0}.ka{padding:3px 8px}.kl> *{margin-right:24px}.km> :last-child{margin-right:0}.mc{margin:0}.nm{font-size:20px}.nn{margin-top:2.14em}.no{line-height:32px}.np{letter-spacing:-0.003em}.ob{max-width:1192px}.oj{margin-top:56px}.pj{margin-top:1.72em}.pk{line-height:24px}.pl{letter-spacing:0}.pt{margin-top:0.94em}.qh{font-size:24px}.qi{margin-top:1.95em}.qj{line-height:30px}.qk{letter-spacing:-0.016em}.qz{margin-top:1.14em}.sb{margin-bottom:104px}.sh{flex-direction:row}.sl{margin-bottom:0}.sm{margin-right:20px}.ta{max-width:500px}.tx{margin-bottom:88px}.ua{margin-bottom:72px}.up{width:min-width}.uu{padding-top:72px}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:68px}.ga{max-width:680px}.hg{font-size:42px}.hh{margin-top:1.19em}.hi{margin-bottom:32px}.hj{line-height:52px}.hk{letter-spacing:-0.011em}.hx{align-items:center}.jt{border-top:solid 1px #F2F2F2}.ju{border-bottom:solid 1px #F2F2F2}.jv{margin:32px 0 0}.jw{padding:3px 8px}.kj> *{margin-right:24px}.kk> :last-child{margin-right:0}.mb{margin:0}.ni{font-size:20px}.nj{margin-top:2.14em}.nk{line-height:32px}.nl{letter-spacing:-0.003em}.oa{max-width:100%}.oi{margin-top:56px}.pg{margin-top:1.72em}.ph{line-height:24px}.pi{letter-spacing:0}.ps{margin-top:0.94em}.qd{font-size:24px}.qe{margin-top:1.95em}.qf{line-height:30px}.qg{letter-spacing:-0.016em}.qy{margin-top:1.14em}.sa{margin-bottom:104px}.si{flex-direction:row}.sn{margin-bottom:0}.so{margin-right:20px}.tb{max-width:500px}.tw{margin-bottom:88px}.tz{margin-bottom:72px}.uo{width:min-width}.ut{padding-top:72px}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:4px}.hb{font-size:32px}.hc{margin-top:1.01em}.hd{margin-bottom:24px}.he{line-height:38px}.hf{letter-spacing:-0.014em}.hw{align-items:flex-start}.iz{flex-direction:column}.jc{margin-bottom:2px}.jr{margin:24px 0 0}.js{padding:0}.kh> *{margin-right:8px}.ki> :last-child{margin-right:8px}.ky{margin-left:0px}.ma{margin:0}.mq{border:1px solid #F2F2F2}.mr{border-radius:99em}.ms{padding:0px 16px 0px 12px}.mt{height:38px}.mu{align-items:center}.mw svg{margin-right:8px}.ne{font-size:18px}.nf{margin-top:1.56em}.ng{line-height:28px}.nh{letter-spacing:-0.003em}.nz{max-width:100%}.oh{margin-top:40px}.pd{font-size:16px}.pe{margin-top:1.23em}.pf{letter-spacing:0}.pr{margin-top:0.67em}.qa{font-size:20px}.qb{margin-top:1.2em}.qc{line-height:24px}.qx{margin-top:1.34em}.rz{margin-bottom:96px}.sp{margin-bottom:20px}.sq{margin-right:0}.th{font-size:24px}.ti{line-height:30px}.tj{letter-spacing:-0.016em}.tv{margin-bottom:64px}.un{width:100%}.us{padding-top:48px}.mv:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="print">.rq{display:none}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jm{max-height:none}</style><style type="text/css" data-fela-rehydration="572" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.on{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2F13ae9279ef19&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav----------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&source=post_page---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" rel="noopener follow" href="/?source=---top_nav_layout_nav----------------------------------"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" rel="noopener follow" href="/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav-----------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" rel="noopener follow" href="/search?source=---top_nav_layout_nav----------------------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&source=post_page---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="ba48" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht hu bk" data-testid="storyTitle">Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)</h1><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="hv hw hx hy hz ab"><div><div class="ab ia"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@mit.mit?source=post_page---byline--13ae9279ef19--------------------------------"><div class="l ib ic by id ie"><div class="l fj"><img alt="Michael Thomsen" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/0*Y_CFLc1qadgr3tPK." width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="if by l dd de fs n ig ft"></div></div></div></a></div></div><div class="ih ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/flutter?source=post_page---byline--13ae9279ef19--------------------------------" rel="noopener follow"><div class="l ii ij by id ik"><div class="l fj"><img alt="Flutter" class="l fd by br il cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*5-aoK8IBmXve5whBQM90GA.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="if by l br il fs n ig ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="im ab q"><div class="ab q in"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b io ip bk"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" data-testid="authorName" rel="noopener follow" href="/@mit.mit?source=post_page---byline--13ae9279ef19--------------------------------">Michael Thomsen</a></p></div></div></div><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b io ip du"><span><a class="it iu ah ai aj ak al am an ao ap aq ar ex iv iw" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Fa6d788faa5e5&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&user=Michael+Thomsen&userId=a6d788faa5e5&source=post_page-a6d788faa5e5--byline--13ae9279ef19---------------------post_header-----------">Follow</a></span></p></div></div></span></div></div><div class="l ix"><span class="bf b bg z du"><div class="ab cn iy iz ja"><div class="jb jc ab"><div class="bf b bg z du ab jd"><span class="je l ix">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar iq ab q" data-testid="publicationName" href="https://medium.com/flutter?source=post_page---byline--13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b bg z jf jg jh ji jj jk jl jm bk">Flutter</p></a></div></div></div><div class="h k"><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">3 min read</span><div class="jn jo l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">May 10, 2018</span></div></span></div></span></div></div></div><div class="ab cp jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke"><div class="h k w fg fh q"><div class="ku l"><div class="ab q kv kw"><div class="pw-multi-vote-icon fj je kx ky kz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fflutter%2F13ae9279ef19&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&user=Michael+Thomsen&userId=a6d788faa5e5&source=---header_actions--13ae9279ef19---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="la ao lb lc ld le am lf lg lh kz"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l li lj lk ll lm ln lo"><p class="bf b dv z du"><span class="lp">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao la ls lt ab q fk lu lv" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lr"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count lq lr">1</span></p></button></div></div></div><div class="ab q kf kg kh ki kj kk kl km kn ko kp kq kr ks kt"><div class="lw k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F13ae9279ef19&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&source=---header_actions--13ae9279ef19---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lx" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd ly cn"><div class="l ae"><div class="ab cb"><div class="lz ma mb mc md me ci bh"><div class="ab"><div class="bm bh" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al mf an ao ap ex mg mh lv mi mj mk ml mm s mn mo mp mq mr ms mt u mu mv mw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al mf an ao ap ex mg mh lv mi mj mk ml mm s mn mo mp mq mr ms mt u mu mv mw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="4e2e" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk">At <a class="af nv" href="https://events.google.com/io/" rel="noopener ugc nofollow" target="_blank">Google I/O 2018</a>, the Material team <a class="af nv" href="https://design.google/library/making-more-with-material/" rel="noopener ugc nofollow" target="_blank">announced</a> a important update to Material Design, with a strong focus on enabling mobile apps to stand out from the rest by systematically applying brand-specific design. This is <a class="af nv" href="https://material.io/design/material-theming/" rel="noopener ugc nofollow" target="_blank">Material Theming</a>. The following study shows customized Material components, combined together to create a brand-specific design for ‘Shrine’, an e-commerce app that sells clothing and home goods. <a class="af nv" href="http://flutter.io" rel="noopener ugc nofollow" target="_blank">Flutter</a> is the perfect framework for realizing designs like this!</p><p id="dc1e" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><em class="nw">“I’m incredibly excited to welcome Flutter into the official set of Material Design Components as a full fledged peer to our Android, iOS and Web offerings. Flutter’s philosophy of flexible and adaptable widgets is a great fit for Material Theming, and Flutter’s ability for real time UI iteration is a game changer in the way we polish and refine designs.”</em></p><p id="5842" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk">- Matías Duarte, VP, Material Design</p></div></div><div class="nx"><div class="ab cb"><div class="lz ny ma nz mb oa cf ob cg oc ci bh"><figure class="og oh oi oj ok nx ol om paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="od oe of"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*cyTGpzWuHqvYFGTV7uQyXA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*cyTGpzWuHqvYFGTV7uQyXA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*cyTGpzWuHqvYFGTV7uQyXA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*cyTGpzWuHqvYFGTV7uQyXA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*cyTGpzWuHqvYFGTV7uQyXA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*cyTGpzWuHqvYFGTV7uQyXA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*cyTGpzWuHqvYFGTV7uQyXA.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*cyTGpzWuHqvYFGTV7uQyXA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*cyTGpzWuHqvYFGTV7uQyXA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*cyTGpzWuHqvYFGTV7uQyXA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*cyTGpzWuHqvYFGTV7uQyXA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*cyTGpzWuHqvYFGTV7uQyXA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*cyTGpzWuHqvYFGTV7uQyXA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*cyTGpzWuHqvYFGTV7uQyXA.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="" class="bh me or c" width="1000" height="563" loading="eager" role="presentation"/></picture></div></div><figcaption class="os ff ot od oe ou ov bf b bg z du">UI elements from the ‘Shrine brand-specific design’ using<br/>Material Theming and Material Components</figcaption></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><figure class="og oh oi oj ok nx od oe paragraph-image"><div class="od oe ow"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*L2vOm-w6u4c-WRU6qZ9W_A.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*L2vOm-w6u4c-WRU6qZ9W_A.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*L2vOm-w6u4c-WRU6qZ9W_A.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*L2vOm-w6u4c-WRU6qZ9W_A.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*L2vOm-w6u4c-WRU6qZ9W_A.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*L2vOm-w6u4c-WRU6qZ9W_A.png 1100w, https://miro.medium.com/v2/resize:fit:800/format:webp/1*L2vOm-w6u4c-WRU6qZ9W_A.png 800w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 400px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*L2vOm-w6u4c-WRU6qZ9W_A.png 640w, https://miro.medium.com/v2/resize:fit:720/1*L2vOm-w6u4c-WRU6qZ9W_A.png 720w, https://miro.medium.com/v2/resize:fit:750/1*L2vOm-w6u4c-WRU6qZ9W_A.png 750w, https://miro.medium.com/v2/resize:fit:786/1*L2vOm-w6u4c-WRU6qZ9W_A.png 786w, https://miro.medium.com/v2/resize:fit:828/1*L2vOm-w6u4c-WRU6qZ9W_A.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*L2vOm-w6u4c-WRU6qZ9W_A.png 1100w, https://miro.medium.com/v2/resize:fit:800/1*L2vOm-w6u4c-WRU6qZ9W_A.png 800w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 400px"/><img alt="" class="bh me or c" width="400" height="775" loading="eager" role="presentation"/></picture></div><figcaption class="os ff ot od oe ou ov bf b bg z du">A screenshot from the Shrine design implemented using Flutter & Material Components</figcaption></figure><h2 id="5041" class="ox oy gu bf oz pa pb dy pc pd pe ea pf ni pg ph pi nm pj pk pl nq pm pn po pp bk">Official Flutter support for Material Components</h2><p id="4783" class="pw-post-body-paragraph mx my gu mz b na pq nc nd ne pr ng nh ni ps nk nl nm pt no np nq pu ns nt nu gn bk">One of Flutter’s core tenets is best-in-class support for creating expressive and flexible mobile UI. To support this goal, we are delighted to announce that Material has now adopted Flutter as a first-class platform! Flutter is included in design and engineering discussions, documentation, official support, content from Google Design, and education along with Android, iOS, and web. Material has even started a dedicated Flutter engineering team that works hand-in-hand with Flutter’s Material library engineers. This partnership will allow Flutter to stay even more current as Material Design continues to evolve and add features like Material Theming. You can find more information at <a class="af nv" href="http://material.io/develop/flutter" rel="noopener ugc nofollow" target="_blank">material.io/develop/flutter</a>.</p><h2 id="e597" class="ox oy gu bf oz pa pb dy pc pd pe ea pf ni pg ph pi nm pj pk pl nq pm pn po pp bk">Using Material Theming and Material Components in Flutter</h2><p id="9324" class="pw-post-body-paragraph mx my gu mz b na pq nc nd ne pr ng nh ni ps nk nl nm pt no np nq pu ns nt nu gn bk">Just in time for I/O, Flutter’s Material Components library has been updated to support dozens of new features, styles, and components from the updated Material system. These are available in <a class="af nv" rel="noopener" href="/flutter-io/flutter-beta-3-7d88125245dc">Flutter beta 3</a>, and are built right into the Flutter framework with no additional libraries needed! We have also worked on adding more examples of how to use these widgets in the <a class="af nv" href="https://play.google.com/store/apps/details?id=io.flutter.demo.gallery" rel="noopener ugc nofollow" target="_blank">Flutter Gallery</a>:</p><figure class="og oh oi oj ok nx od oe paragraph-image"><div role="button" tabindex="0" class="on oo fj op bh oq"><div class="od oe pv"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*3U83sHXcjpSZCceOlIjyHg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*3U83sHXcjpSZCceOlIjyHg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*3U83sHXcjpSZCceOlIjyHg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*3U83sHXcjpSZCceOlIjyHg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*3U83sHXcjpSZCceOlIjyHg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*3U83sHXcjpSZCceOlIjyHg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*3U83sHXcjpSZCceOlIjyHg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*3U83sHXcjpSZCceOlIjyHg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*3U83sHXcjpSZCceOlIjyHg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*3U83sHXcjpSZCceOlIjyHg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*3U83sHXcjpSZCceOlIjyHg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*3U83sHXcjpSZCceOlIjyHg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*3U83sHXcjpSZCceOlIjyHg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*3U83sHXcjpSZCceOlIjyHg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me or c" width="700" height="422" loading="lazy" role="presentation"/></picture></div></div><figcaption class="os ff ot od oe ou ov bf b bg z du">A selection of Material Components from the Flutter Gallery</figcaption></figure><h1 id="ade9" class="pw oy gu bf oz px py pz pc qa qb qc pf qd qe qf qg qh qi qj qk ql qm qn qo qp bk">Learning more</h1><p id="c58a" class="pw-post-body-paragraph mx my gu mz b na pq nc nd ne pr ng nh ni ps nk nl nm pt no np nq pu ns nt nu gn bk">For a quick introduction to Material Theming with Flutter, check-out our Google I/O session:</p><figure class="og oh oi oj ok nx"><div class="qq jf l fj"><div class="qr qs l"></div></div></figure><p id="3717" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk">Lastly, we are happy to announce four new codelabs that teach core concepts required to create beautiful and flexible user interfaces with Flutter and Material Components:</p><ol class=""><li id="d50b" class="mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu qt qu qv bk"><a class="af nv" href="https://codelabs.developers.google.com/codelabs/mdc-101-flutter/" rel="noopener ugc nofollow" target="_blank"><strong class="mz gv">MDC 101 Flutter: Material Components Basics</strong><br/></a>Learn the basics of using Material Components by building a simple app with core components.</li><li id="35c9" class="mx my gu mz b na qw nc nd ne qx ng nh ni qy nk nl nm qz no np nq ra ns nt nu qt qu qv bk"><a class="af nv" href="https://codelabs.developers.google.com/codelabs/mdc-102-flutter/" rel="noopener ugc nofollow" target="_blank"><strong class="mz gv">MDC 102 Flutter: Material Structure and Layout</strong><br/></a>Learn how to use Material for structure and layout in Flutter, adding navigation, structure, and data.</li><li id="ec85" class="mx my gu mz b na qw nc nd ne qx ng nh ni qy nk nl nm qz no np nq ra ns nt nu qt qu qv bk"><a class="af nv" href="https://codelabs.developers.google.com/codelabs/mdc-103-flutter/" rel="noopener ugc nofollow" target="_blank"><strong class="mz gv">MDC 103 Flutter: Material Theming with Color, Shape, Elevation, and Type</strong><br/></a>Use Material Components for Flutter to differentiate your product, and express your brand through design.</li><li id="f70e" class="mx my gu mz b na qw nc nd ne qx ng nh ni qy nk nl nm qz no np nq ra ns nt nu qt qu qv bk"><a class="af nv" href="https://codelabs.developers.google.com/codelabs/mdc-104-flutter/" rel="noopener ugc nofollow" target="_blank"><strong class="mz gv">MDC 104 Flutter: Material Advanced Components</strong><br/></a>Improve your design and learn to use our advanced component backdrop menu.</li></ol><h2 id="de37" class="ox oy gu bf oz pa pb dy pc pd pe ea pf ni pg ph pi nm pj pk pl nq pm pn po pp bk">Next steps</h2><p id="d92d" class="pw-post-body-paragraph mx my gu mz b na pq nc nd ne pr ng nh ni ps nk nl nm pt no np nq pu ns nt nu gn bk">Flutter will continue to release features in partnership with Material. Learn more about the Material Components release schedule in the <a class="af nv" href="https://github.com/material-components/material-components/blob/develop/ROADMAP.md" rel="noopener ugc nofollow" target="_blank">Material Components Roadmap on GitHub</a>. We look forward to seeing what creative designs you all create using Flutter and Material Theming!</p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="rb rc ab ja"><div class="rd ab"><a class="re ay am ao" rel="noopener follow" href="/tag/material-design?source=post_page-----13ae9279ef19--------------------------------"><div class="rf fj cx rg ge rh ri bf b bg z bk rj">Material Design</div></a></div><div class="rd ab"><a class="re ay am ao" rel="noopener follow" href="/tag/flutter?source=post_page-----13ae9279ef19--------------------------------"><div class="rf fj cx rg ge rh ri bf b bg z bk rj">Flutter</div></a></div></div></div></div><div class="l"></div><footer class="rk rl rm rn ro ab q rp ik c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rq"><div class="ab q kv"><div class="rr l"><span class="l rs rt ru e d"><div class="ab q kv kw"><div class="pw-multi-vote-icon fj je kx ky kz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fflutter%2F13ae9279ef19&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&user=Michael+Thomsen&userId=a6d788faa5e5&source=---footer_actions--13ae9279ef19---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="la ao lb lc ld le am lf lg lh kz"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l li lj lk ll lm ln lo"><p class="bf b dv z du"><span class="lp">--</span></p></div></div></span><span class="l h g f rv rw"><div class="ab q kv kw"><div class="pw-multi-vote-icon fj je kx ky kz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fflutter%2F13ae9279ef19&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&user=Michael+Thomsen&userId=a6d788faa5e5&source=---footer_actions--13ae9279ef19---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="la ao lb lc ld le am lf lg lh kz"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l li lj lk ll lm ln lo"><p class="bf b dv z du"><span class="lp">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao la ls lt ab q fk lu lv" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lr"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count lq lr">1</span></p></button></div></div></div></div><div class="ab q"><div class="rx l ix"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F13ae9279ef19&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19&source=---footer_actions--13ae9279ef19---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lx" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="rx l ix"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al mf an ao ap ex mg mh lv mi"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="ry rz sa sb sc l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="sd bh r se"></div><div class="sf l"><div class="ab sg sh si iz iy"><div class="sj sk sl sm sn so sp sq sr ss ab cp"><div class="h k"><a href="https://medium.com/flutter?source=post_page---post_publication_info--13ae9279ef19--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Flutter" class="st ib ic cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*5-aoK8IBmXve5whBQM90GA.png" width="48" height="48" loading="lazy"/><div class="st l ic ib fs n fr su"></div></div></a></div><div class="j i d"><a href="https://medium.com/flutter?source=post_page---post_publication_info--13ae9279ef19--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Flutter" class="st sw sv cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*5-aoK8IBmXve5whBQM90GA.png" width="64" height="64" loading="lazy"/><div class="st l sv sw fs n fr su"></div></div></a></div><div class="j i d sx ix"><div class="ab"></div></div></div><div class="ab co sy"><div class="sz ta tb nz ny l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/flutter?source=post_page---post_publication_info--13ae9279ef19--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf td te tf tg th ti tj ni ph pi nm pk pl nq pn po bk"><span class="gn tc">Published in <!-- -->Flutter</span></h2></a><div class="rd ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/flutter/followers?source=post_page---post_publication_info--13ae9279ef19--------------------------------">57K Followers</a></span></div><div class="bf b bg z du ab jd"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/flutter/prospera-using-flutter-to-bring-ai-to-the-frontline-of-sales-71377810fd26?source=post_page---post_publication_info--13ae9279ef19--------------------------------">Last published <span>Nov 21, 2024</span></a></div></div><div class="tk l"><p class="bf b bg z bk">Flutter is Google's UI framework for crafting high-quality native interfaces on iOS, Android, web, and desktop. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at <a class="af ag ah ai aj ak al am an ao ap aq ar nv go" href="https://flutter.dev" rel="noopener ugc nofollow">https://flutter.dev</a></p></div></div></div><div class="h k"><div class="ab"></div></div></div></div><div class="ab sg sh si iz iy"><div class="sj sk sl sm sn so sp sq sr ss ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@mit.mit?source=post_page---post_author_info--13ae9279ef19--------------------------------"><div class="l fj"><img alt="Michael Thomsen" class="l fd by ic ib cx" src="https://miro.medium.com/v2/resize:fill:96:96/0*Y_CFLc1qadgr3tPK." width="48" height="48" loading="lazy"/><div class="fr by l ic ib fs n ay su"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@mit.mit?source=post_page---post_author_info--13ae9279ef19--------------------------------"><div class="l fj"><img alt="Michael Thomsen" class="l fd by sv sw cx" src="https://miro.medium.com/v2/resize:fill:128:128/0*Y_CFLc1qadgr3tPK." width="64" height="64" loading="lazy"/><div class="fr by l sv sw fs n ay su"></div></div></a></div><div class="j i d sx ix"><div class="ab"><span><button class="bf b bg z tl rf tm tn to tp tq ev ew tr ts tt fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co sy"><div class="sz ta tb nz ny l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@mit.mit?source=post_page---post_author_info--13ae9279ef19--------------------------------"><h2 class="pw-author-name bf td te tf tg th ti tj ni ph pi nm pk pl nq pn po bk"><span class="gn tc">Written by <!-- -->Michael Thomsen</span></h2></a><div class="rd ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@mit.mit/followers?source=post_page---post_author_info--13ae9279ef19--------------------------------">9.1K Followers</a></span></div><div class="bf b bg z du ab jd"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@mit.mit/following?source=post_page---post_author_info--13ae9279ef19--------------------------------">4 Following</a></div></div><div class="tk l"><p class="bf b bg z bk"><span class="gn">Product Manager working on Dart and Flutter. Helping developers is my passion!</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z tl rf tm tn to tp tq ev ew tr ts tt fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div><div class="tu tv tw tx ty l"><div class="sd bh r tu tv tz ua ub"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf td px pz pc qa qc pf qd qf qg qh qj qk ql qn qo bk">Responses (<!-- -->1<!-- -->)</h2><div class="ab uc"><div><div class="bm" aria-hidden="false"><a class="ud ue" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--13ae9279ef19--------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="uf l"><button class="bf b bg z bk rf ug uh ui lx lu tq ev ew ex uj uk ul fa um un uo up uq fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="ur us ut uu uv l bx"><div class="h k j"><div class="sd bh uw ux"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="uy ab kv ja"><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/about?autoplay=1&source=post_page-----13ae9279ef19--------------------------------"><p class="bf b dv z du">About</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----13ae9279ef19--------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="uz va l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----13ae9279ef19--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="uz l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/business?source=post_page-----13ae9279ef19--------------------------------"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20241202-170510-51d39927f0"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCachePosts","post-13ae9279ef19","user-a6d788faa5e5","collection-4da7dfd21a33"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"9c2373d0-5fd5-42f4-a497-e94cc87efbaa","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-40c7a4ea48ebf03dce06c661513684b7-c09ba23c896135e2-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Fflutter\u002Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20241202-170510-51d39927f0","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20241202-170510-51d39927f0","commit":"51d39927f0c2bd5e6674cfac7ea9a5bb687a10a8"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"flutter\"})":{"__ref":"Collection:4da7dfd21a33"},"postResult({\"id\":\"13ae9279ef19\"})":{"__ref":"Post:13ae9279ef19"}},"ImageMetadata:":{"__typename":"ImageMetadata","id":""},"Collection:4da7dfd21a33":{"__typename":"Collection","id":"4da7dfd21a33","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFE8F5FF","point":0},{"__typename":"ColorPoint","color":"#FFE3F3FF","point":0.1},{"__typename":"ColorPoint","color":"#FFDEF2FF","point":0.2},{"__typename":"ColorPoint","color":"#FFDAF0FF","point":0.3},{"__typename":"ColorPoint","color":"#FFD5EFFF","point":0.4},{"__typename":"ColorPoint","color":"#FFD0EDFF","point":0.5},{"__typename":"ColorPoint","color":"#FFCBECFF","point":0.6},{"__typename":"ColorPoint","color":"#FFC6EBFF","point":0.7},{"__typename":"ColorPoint","color":"#FFC1E9FF","point":0.8},{"__typename":"ColorPoint","color":"#FFBCE8FF","point":0.9},{"__typename":"ColorPoint","color":"#FFB6E6FF","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF498BD1","point":0},{"__typename":"ColorPoint","color":"#FF4781C0","point":0.1},{"__typename":"ColorPoint","color":"#FF4477AF","point":0.2},{"__typename":"ColorPoint","color":"#FF416D9E","point":0.3},{"__typename":"ColorPoint","color":"#FF3D638D","point":0.4},{"__typename":"ColorPoint","color":"#FF38587C","point":0.5},{"__typename":"ColorPoint","color":"#FF324D6B","point":0.6},{"__typename":"ColorPoint","color":"#FF2C415A","point":0.7},{"__typename":"ColorPoint","color":"#FF253548","point":0.8},{"__typename":"ColorPoint","color":"#FF1C2937","point":0.9},{"__typename":"ColorPoint","color":"#FF121B25","point":1}]},"tintBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FF01579B","colorPoints":[{"__typename":"ColorPoint","color":"#FF01579B","point":0},{"__typename":"ColorPoint","color":"#FF306CA9","point":0.1},{"__typename":"ColorPoint","color":"#FF4D7FB7","point":0.2},{"__typename":"ColorPoint","color":"#FF6591C4","point":0.3},{"__typename":"ColorPoint","color":"#FF7CA3D0","point":0.4},{"__typename":"ColorPoint","color":"#FF92B4DC","point":0.5},{"__typename":"ColorPoint","color":"#FFA7C4E7","point":0.6},{"__typename":"ColorPoint","color":"#FFBCD3F1","point":0.7},{"__typename":"ColorPoint","color":"#FFD0E3FC","point":0.8},{"__typename":"ColorPoint","color":"#FFE3F2FF","point":0.9},{"__typename":"ColorPoint","color":"#FFF7FFFF","point":1}]}},"domain":null,"slug":"flutter","googleAnalyticsId":null,"editors":[{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:a6d788faa5e5"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:26a19a14addb"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:dfd5de850c70"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:6b9d8506b756"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:35da22255b65"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:68e9dc5e47d5"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:2df4e577749c"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:4631513e40c0"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:ae996dbdd76e"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:aa31f520c7ec"}}],"name":"Flutter","avatar":{"__ref":"ImageMetadata:1*5-aoK8IBmXve5whBQM90GA.png"},"description":"Flutter is Google's UI framework for crafting high-quality native interfaces on iOS, Android, web, and desktop. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https:\u002F\u002Fflutter.dev","subscriberCount":57048,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:71377810fd26"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:4da7dfd21a33-viewerId:lo_1a59370d7136"},"twitterUsername":"flutterdev","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*KvnfbD1F5CzEsU9wSmRZyA.png"}},"User:a6d788faa5e5":{"__typename":"User","id":"a6d788faa5e5","name":"Michael Thomsen","username":"mit.mit","newsletterV3":{"__ref":"NewsletterV3:9e43b45c6795"},"linkedAccounts":{"__ref":"LinkedAccounts:a6d788faa5e5"},"isSuspended":false,"imageId":"0*Y_CFLc1qadgr3tPK.","mediumMemberAt":0,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":9120,"followingCount":1,"collectionFollowingCount":3},"customDomainState":null,"hasSubdomain":false,"bio":"Product Manager working on Dart and Flutter. Helping developers is my passion!","isPartnerProgramEnrolled":false,"viewerEdge":{"__ref":"UserViewerEdge:userId:a6d788faa5e5-viewerId:lo_1a59370d7136"},"viewerIsUser":false,"postSubscribeMembershipUpsellShownAt":0,"membership":null,"allowNotes":true,"twitterScreenName":""},"User:26a19a14addb":{"__typename":"User","id":"26a19a14addb"},"User:dfd5de850c70":{"__typename":"User","id":"dfd5de850c70"},"User:6b9d8506b756":{"__typename":"User","id":"6b9d8506b756"},"User:35da22255b65":{"__typename":"User","id":"35da22255b65"},"User:68e9dc5e47d5":{"__typename":"User","id":"68e9dc5e47d5"},"User:2df4e577749c":{"__typename":"User","id":"2df4e577749c"},"User:4631513e40c0":{"__typename":"User","id":"4631513e40c0"},"User:ae996dbdd76e":{"__typename":"User","id":"ae996dbdd76e"},"User:aa31f520c7ec":{"__typename":"User","id":"aa31f520c7ec"},"ImageMetadata:1*5-aoK8IBmXve5whBQM90GA.png":{"__typename":"ImageMetadata","id":"1*5-aoK8IBmXve5whBQM90GA.png"},"User:3a7a2a067927":{"__typename":"User","id":"3a7a2a067927","customDomainState":null,"hasSubdomain":false,"username":"tvolkert"},"Post:71377810fd26":{"__typename":"Post","id":"71377810fd26","firstPublishedAt":1732210323271,"creator":{"__ref":"User:3a7a2a067927"},"collection":{"__ref":"Collection:4da7dfd21a33"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Fflutter\u002Fprospera-using-flutter-to-bring-ai-to-the-frontline-of-sales-71377810fd26","sequence":null,"uniqueSlug":"prospera-using-flutter-to-bring-ai-to-the-frontline-of-sales-71377810fd26"},"LinkedAccounts:a6d788faa5e5":{"__typename":"LinkedAccounts","mastodon":null,"id":"a6d788faa5e5"},"UserViewerEdge:userId:a6d788faa5e5-viewerId:lo_1a59370d7136":{"__typename":"UserViewerEdge","id":"userId:a6d788faa5e5-viewerId:lo_1a59370d7136","isFollowing":false,"isUser":false,"isMuting":false},"NewsletterV3:9e43b45c6795":{"__typename":"NewsletterV3","id":"9e43b45c6795","type":"NEWSLETTER_TYPE_AUTHOR","slug":"a6d788faa5e5","name":"a6d788faa5e5","collection":null,"user":{"__ref":"User:a6d788faa5e5"}},"Paragraph:cc3c556cc69_0":{"__typename":"Paragraph","id":"cc3c556cc69_0","name":"ba48","type":"H3","href":null,"layout":null,"metadata":null,"text":"Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_1":{"__typename":"Paragraph","id":"cc3c556cc69_1","name":"4e2e","type":"P","href":null,"layout":null,"metadata":null,"text":"At Google I\u002FO 2018, the Material team announced a important update to Material Design, with a strong focus on enabling mobile apps to stand out from the rest by systematically applying brand-specific design. This is Material Theming. The following study shows customized Material components, combined together to create a brand-specific design for ‘Shrine’, an e-commerce app that sells clothing and home goods. Flutter is the perfect framework for realizing designs like this!","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":3,"end":18,"href":"https:\u002F\u002Fevents.google.com\u002Fio\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":38,"end":47,"href":"https:\u002F\u002Fdesign.google\u002Flibrary\u002Fmaking-more-with-material\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":216,"end":232,"href":"https:\u002F\u002Fmaterial.io\u002Fdesign\u002Fmaterial-theming\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":412,"end":419,"href":"http:\u002F\u002Fflutter.io","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_2":{"__typename":"Paragraph","id":"cc3c556cc69_2","name":"dc1e","type":"P","href":null,"layout":null,"metadata":null,"text":"“I’m incredibly excited to welcome Flutter into the official set of Material Design Components as a full fledged peer to our Android, iOS and Web offerings. Flutter’s philosophy of flexible and adaptable widgets is a great fit for Material Theming, and Flutter’s ability for real time UI iteration is a game changer in the way we polish and refine designs.”","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":357,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_3":{"__typename":"Paragraph","id":"cc3c556cc69_3","name":"5842","type":"P","href":null,"layout":null,"metadata":null,"text":"- Matías Duarte, VP, Material Design","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*cyTGpzWuHqvYFGTV7uQyXA.png":{"__typename":"ImageMetadata","id":"1*cyTGpzWuHqvYFGTV7uQyXA.png","originalHeight":1406,"originalWidth":2500,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:cc3c556cc69_4":{"__typename":"Paragraph","id":"cc3c556cc69_4","name":"2701","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*cyTGpzWuHqvYFGTV7uQyXA.png"},"text":"UI elements from the ‘Shrine brand-specific design’ using\nMaterial Theming and Material Components","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*L2vOm-w6u4c-WRU6qZ9W_A.png":{"__typename":"ImageMetadata","id":"1*L2vOm-w6u4c-WRU6qZ9W_A.png","originalHeight":775,"originalWidth":400,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:cc3c556cc69_5":{"__typename":"Paragraph","id":"cc3c556cc69_5","name":"5a3c","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*L2vOm-w6u4c-WRU6qZ9W_A.png"},"text":"A screenshot from the Shrine design implemented using Flutter & Material Components","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_6":{"__typename":"Paragraph","id":"cc3c556cc69_6","name":"5041","type":"H4","href":null,"layout":null,"metadata":null,"text":"Official Flutter support for Material Components","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_7":{"__typename":"Paragraph","id":"cc3c556cc69_7","name":"4783","type":"P","href":null,"layout":null,"metadata":null,"text":"One of Flutter’s core tenets is best-in-class support for creating expressive and flexible mobile UI. To support this goal, we are delighted to announce that Material has now adopted Flutter as a first-class platform! Flutter is included in design and engineering discussions, documentation, official support, content from Google Design, and education along with Android, iOS, and web. Material has even started a dedicated Flutter engineering team that works hand-in-hand with Flutter’s Material library engineers. This partnership will allow Flutter to stay even more current as Material Design continues to evolve and add features like Material Theming. You can find more information at material.io\u002Fdevelop\u002Fflutter.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":690,"end":717,"href":"http:\u002F\u002Fmaterial.io\u002Fdevelop\u002Fflutter","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_8":{"__typename":"Paragraph","id":"cc3c556cc69_8","name":"e597","type":"H4","href":null,"layout":null,"metadata":null,"text":"Using Material Theming and Material Components in Flutter","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_9":{"__typename":"Paragraph","id":"cc3c556cc69_9","name":"9324","type":"P","href":null,"layout":null,"metadata":null,"text":"Just in time for I\u002FO, Flutter’s Material Components library has been updated to support dozens of new features, styles, and components from the updated Material system. These are available in Flutter beta 3, and are built right into the Flutter framework with no additional libraries needed! We have also worked on adding more examples of how to use these widgets in the Flutter Gallery:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":192,"end":206,"href":"https:\u002F\u002Fmedium.com\u002Fflutter-io\u002Fflutter-beta-3-7d88125245dc","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":371,"end":386,"href":"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=io.flutter.demo.gallery","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*3U83sHXcjpSZCceOlIjyHg.png":{"__typename":"ImageMetadata","id":"1*3U83sHXcjpSZCceOlIjyHg.png","originalHeight":1965,"originalWidth":3264,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:cc3c556cc69_10":{"__typename":"Paragraph","id":"cc3c556cc69_10","name":"f4be","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*3U83sHXcjpSZCceOlIjyHg.png"},"text":"A selection of Material Components from the Flutter Gallery","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_11":{"__typename":"Paragraph","id":"cc3c556cc69_11","name":"ade9","type":"H3","href":null,"layout":null,"metadata":null,"text":"Learning more","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_12":{"__typename":"Paragraph","id":"cc3c556cc69_12","name":"c58a","type":"P","href":null,"layout":null,"metadata":null,"text":"For a quick introduction to Material Theming with Flutter, check-out our Google I\u002FO session:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:bc14b051d3dea5a62c6083e89ee4ee07":{"__typename":"MediaResource","id":"bc14b051d3dea5a62c6083e89ee4ee07","iframeSrc":"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FhA0hrpR-o8U%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DhA0hrpR-o8U&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FhA0hrpR-o8U%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube","iframeHeight":480,"iframeWidth":854,"title":"Code beautiful UI with Flutter and Material Design (Google I\u002FO '18)"},"Paragraph:cc3c556cc69_13":{"__typename":"Paragraph","id":"cc3c556cc69_13","name":"eb74","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:bc14b051d3dea5a62c6083e89ee4ee07"}},"mixtapeMetadata":null},"Paragraph:cc3c556cc69_14":{"__typename":"Paragraph","id":"cc3c556cc69_14","name":"3717","type":"P","href":null,"layout":null,"metadata":null,"text":"Lastly, we are happy to announce four new codelabs that teach core concepts required to create beautiful and flexible user interfaces with Flutter and Material Components:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_15":{"__typename":"Paragraph","id":"cc3c556cc69_15","name":"d50b","type":"OLI","href":null,"layout":null,"metadata":null,"text":"MDC 101 Flutter: Material Components Basics\nLearn the basics of using Material Components by building a simple app with core components.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":44,"href":"https:\u002F\u002Fcodelabs.developers.google.com\u002Fcodelabs\u002Fmdc-101-flutter\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":43,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_16":{"__typename":"Paragraph","id":"cc3c556cc69_16","name":"35c9","type":"OLI","href":null,"layout":null,"metadata":null,"text":"MDC 102 Flutter: Material Structure and Layout\nLearn how to use Material for structure and layout in Flutter, adding navigation, structure, and data.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":47,"href":"https:\u002F\u002Fcodelabs.developers.google.com\u002Fcodelabs\u002Fmdc-102-flutter\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":46,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_17":{"__typename":"Paragraph","id":"cc3c556cc69_17","name":"ec85","type":"OLI","href":null,"layout":null,"metadata":null,"text":"MDC 103 Flutter: Material Theming with Color, Shape, Elevation, and Type\nUse Material Components for Flutter to differentiate your product, and express your brand through design.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":73,"href":"https:\u002F\u002Fcodelabs.developers.google.com\u002Fcodelabs\u002Fmdc-103-flutter\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":72,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_18":{"__typename":"Paragraph","id":"cc3c556cc69_18","name":"f70e","type":"OLI","href":null,"layout":null,"metadata":null,"text":"MDC 104 Flutter: Material Advanced Components\nImprove your design and learn to use our advanced component backdrop menu.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":46,"href":"https:\u002F\u002Fcodelabs.developers.google.com\u002Fcodelabs\u002Fmdc-104-flutter\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":45,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_19":{"__typename":"Paragraph","id":"cc3c556cc69_19","name":"de37","type":"H4","href":null,"layout":null,"metadata":null,"text":"Next steps","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:cc3c556cc69_20":{"__typename":"Paragraph","id":"cc3c556cc69_20","name":"d92d","type":"P","href":null,"layout":null,"metadata":null,"text":"Flutter will continue to release features in partnership with Material. Learn more about the Material Components release schedule in the Material Components Roadmap on GitHub. We look forward to seeing what creative designs you all create using Flutter and Material Theming!","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":137,"end":174,"href":"https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-components\u002Fblob\u002Fdevelop\u002FROADMAP.md","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:4da7dfd21a33-viewerId:lo_1a59370d7136":{"__typename":"CollectionViewerEdge","id":"collectionId:4da7dfd21a33-viewerId:lo_1a59370d7136","isEditor":false,"isMuting":false},"ImageMetadata:1*KvnfbD1F5CzEsU9wSmRZyA.png":{"__typename":"ImageMetadata","id":"1*KvnfbD1F5CzEsU9wSmRZyA.png","originalWidth":538,"originalHeight":141},"PostViewerEdge:postId:13ae9279ef19-viewerId:lo_1a59370d7136":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:13ae9279ef19-viewerId:lo_1a59370d7136"},"Tag:material-design":{"__typename":"Tag","id":"material-design","displayTitle":"Material Design","normalizedTagSlug":"material-design"},"Tag:flutter":{"__typename":"Tag","id":"flutter","displayTitle":"Flutter","normalizedTagSlug":"flutter"},"Post:13ae9279ef19":{"__typename":"Post","id":"13ae9279ef19","collection":{"__ref":"Collection:4da7dfd21a33"},"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"26c3","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:cc3c556cc69_0"},{"__ref":"Paragraph:cc3c556cc69_1"},{"__ref":"Paragraph:cc3c556cc69_2"},{"__ref":"Paragraph:cc3c556cc69_3"},{"__ref":"Paragraph:cc3c556cc69_4"},{"__ref":"Paragraph:cc3c556cc69_5"},{"__ref":"Paragraph:cc3c556cc69_6"},{"__ref":"Paragraph:cc3c556cc69_7"},{"__ref":"Paragraph:cc3c556cc69_8"},{"__ref":"Paragraph:cc3c556cc69_9"},{"__ref":"Paragraph:cc3c556cc69_10"},{"__ref":"Paragraph:cc3c556cc69_11"},{"__ref":"Paragraph:cc3c556cc69_12"},{"__ref":"Paragraph:cc3c556cc69_13"},{"__ref":"Paragraph:cc3c556cc69_14"},{"__ref":"Paragraph:cc3c556cc69_15"},{"__ref":"Paragraph:cc3c556cc69_16"},{"__ref":"Paragraph:cc3c556cc69_17"},{"__ref":"Paragraph:cc3c556cc69_18"},{"__ref":"Paragraph:cc3c556cc69_19"},{"__ref":"Paragraph:cc3c556cc69_20"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:a6d788faa5e5"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fmedium.com\u002Fflutter\u002Fbuilding-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19","primaryTopic":null,"topics":[],"isPublished":true,"latestPublishedVersion":"cc3c556cc69","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":1},"clapCount":1558,"allowResponses":true,"isLimitedState":false,"title":"Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material…","isSeries":false,"sequence":null,"uniqueSlug":"building-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1525979492163,"readingTime":2.489622641509434,"previewContent":{"__typename":"PreviewContent","subtitle":"At Google I\u002FO 2018, the Material team announced a important update to Material Design, with a strong focus on enabling mobile apps to stand…"},"previewImage":{"__ref":"ImageMetadata:1*cyTGpzWuHqvYFGTV7uQyXA.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1525979492163,"updatedAt":1529576788644,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:13ae9279ef19-viewerId:lo_1a59370d7136"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:material-design"},{"__ref":"Tag:flutter"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":514,"layerCake":0,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"EXPIRED"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.90218340.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.3cf6f820.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4810.6318add7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5787.e66a3a4d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7549.2176f21f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6589.7c500280.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3735.afb7e926.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.0a97706a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.cd03f950.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.bf599bc5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.902ad94b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.6565ad5f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.a0afad8a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.36c2ecf4.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8ebe6b73fcb1ce11',t:'MTczMzE3NTA0My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>