Nest Protect Hero in Flutter | Widget Workshop

Today we’re building a Flutter Widget that’s inspired by the Nest Protect hero pattern in the Nest app.

Nest Protect is the name of Nest’s smoke detector. If you have one, you’ll notice that at the top of the screen for your Protect in the Nest app, there is a semi-skeuomorphic representation of a physical Nest Protect. We create something very similar in this workshop with Flutter.

To keep the fun going, you can learn how to create animated glows and a dark Protect pattern in the Extended Widget Workshop:
https://school.superdeclarative.com

Steps:
0:00 - Welcome
1:44 - Paint one dot
9:51 - Paint a ring of dots
14:28 - Draw all the dots
23:04 - Make the dots prettier
26:16 - Paint the center button
31:57 - Add a logo and paint a glow

----

Follow:
https://twitter.com/suprdeclarative

Hourly Flutter Consulting:
https://consulting.superdeclarative.com

Flutter Training:
https://hotreload.io

Learn Flutter:
https://school.superdeclarative.com

Blog:
http://blog.superdeclarative.com

Website:
https://superdeclarative.com