Atomic Design with Flutter

A nice approach to manage IU designs

Rei
Published in
2 min readNov 15, 2021

--

Even if it’s a pretty popular topic in React Native but Flutter developers don’t know about that much. So that’s why I wanted to talk about it to make much more attention to it and show how to implement it in Flutter

What is Atomic Design?

Atomic design is a methodology for creating design systems.

We’re not designing pages, we’re designing systems of components. — Stephen Hay

As we know, everything is made by atoms, and atoms make molecules, molecules make organisms and organisms make a life

but in Flutter world there are no atoms, there are widgets! so it means

  • atoms = widgets
  • molecules = group of widgets
  • organisms = group of molecules
  • templates = a page with dummy data
  • page = a page with dynamic data

--

--