Flutter Factory by DartPad

If you're new to Flutter, you may be wondering about the experience of coding up a design. Where do you start? How do you evolve the code and design to get the details right? What does it look like when you're finished?

To help, we've created Flutter Factory. These tutorials start off unfinished and progress toward a complete design, one change at a time. Use the buttons at the top of the editor to navigate through the steps, and watch how the design and code change together.

Fruit card

A ListView card that displays a piece of fruit and some information about it. These use customized Material widgets to present colorful images and text.

Bottom navigation bar

Flutter includes a number of built-in navigational widgets for getting around an app, but you can also build your own, complete with icons, colors, and animations.

Details card

A detail card that can highlight a particular fruit above the ListView.

Putting it all together

All three widgets, working as a team to produce a complete design!