Material Theming with Flutter (Flutter Interact '19)

Discover how Google made Material Design more expressive and how teams can customize Material’s style to better reflect their product’s brand. In this session, learn how you can create your own Material Theme using Flutter.
All sessions → goo.gle/Flutte...
Get started at → flutter.dev
Subscribe! → goo.gle/Flutter
Presented by → Yasmine Evjen
To help us make future events better, please fill out this survey → goo.gle/2E5eKrP
Photo Album → goo.gle/FI19Ph...
event: Flutter Interact 2019; re_ty: Publish; product: Flutter - General; fullname: Yasmine Evjen;

[@kirill4531]

What I really want is that ALL properties in ThemeData (including it's nested Themes and a colorScheme) would have a full list of components they affect somewhere well documented.
AND the full list of all components in Flutter with their corresponding ThemeData properties which defines their color/style.
For now I have to Google on how to change color for "foo" component and go through a bunch of StackOverflow questions before I find the right one.
It's all should be in docs in one place.
For example, how do I know where to change the color of the text on the textfield contextual popup menu (the one that has CUT | COPY | PASTE)?
In the main theme in text styles?
Maybe it's affected by one of the colorScheme properties?
Or maybe it's defined in one of the ButtonTheme properties?
Or it has it's own style property in the main ThemeData?
We really need a list of all components and corresponding properties which style them.
Thank you guys for your hard work!

[@themindstorm9947]

Yes definitely. I have also been searching for these for too long, that I resorted to using my own class for a theme. I know I'm writing too much code that can definitely be shortened, but it's too much work to dig I to the source code of components to see what affects a particular property.

[@BrianBonner]

maybe if each component's documentation explained the themes used with a visual and mapping data . (perhaps in a tab as part of pub.dev) docs.

[@BrianBonner]

I had another idea. What if in addition to the docs there was a theme harness, where a Dec could drop the component in to see how it behaved with the Theme. This would be in the pub dev tab for devs to view. Or maybe if dartpad.dev supported external packages a fist harness would show how it's themed. Does dartpad.dev support third part packages?

[@KyleKusche]

I say just map it and do it better

[@RodrigoCastroDev]

I want to know if this project (Material Theme Builder) will be available on github.

[@raphaeljaggerd3585]

I Just need flutter web to be production ready

[@simprekdambok3321]

Http preferred 4

[@simprekdambok3321]

VCard y

[@raphaeljaggerd3585]

@@simprekdambok3321Because flutter is just amazing and i want to switch from vue and react to using flutter as much as i possibly can.

[@cyano3d]

a year has passed and its still buggy, but atleast desktop apps are stable and mobile keeps on getting better.

[@raphaeljaggerd3585]

@@cyano3dJust a matter of time

[@Fullstackdesign]

Will Flutter change the type scale naming from display1, display2 display3 display4 to header 1 header 2 ... header 6? Also would be nice if the Sketch Material Design theme editor plugin would export to Flutter code.

[@heshansandeepa9471]

Very nice

[@CheoWalker]

Need to update the Flutter Type Scale Generator since the later version of Flutter change the names of the attributes.

[@AbhishekKumar-gg6ox]

Flutter is love

[@mikemannox4191]

The Example Flutter app links for Rally & Shrine on material.io/resources/ are not correctly linked.
Where can we download the Flutter App that Yasmine is changing settings in?

[@davidmigloz]

I couldn't find it either, but you can use the catalog included in the gallery app
github.com/flutter/gallery

[@jwasher13]

Was the source code for Build a Material Theme for Flutter ever posted somewhere?

[@dasleo]

Love the shape customization tool, but without the ability to export to code it's pretty much useless :/

[@marylinke2963]

Aren't you the guy from the Flutter Europe Conference in Warsaw, sitting next to me in 50% of the talks?

[@dasleo]

@@marylinke2963 Sorry, I've never seen you before, you must be confusing me with someone really cool and handsome.

[@ReadTheCommentFirst]

Is this available yet? Specifically the Type Scale Generator?

[@mikewyatt2]

Looks like the Type Scale Generator is here: material.io/design/typography/the-type-system.html#type-scale

[@israelhipolito]

sublimeee :)

[@jopmiddelkamp227]

How can you access the onPrimary color from anywhere in the app?

[@waso]

Theme.of(context).colorScheme.onPrimary