Flutter is an open-source UI toolkit from Google for crafting beautiful, natively compiled applications for desktop, web, and mobile from a single codebase. Flutter apps are built using the Dart programming language.

There are two types of widgets:

  •  StatelessWidget : A widget that does not require a mutable state.
  •  StatefulWidget: A widget that has a mutable state.
  • The Flutter tooling supports three modes when compiling your app, and a headless mode for testing.
  • You choose a compilation mode depending on where you are in the development cycle.
  • The modes are: - Debug - Profile - Release

Dart is an object-orientedgarbage-collected programming language that you use to develop Flutter apps. It was also created by Google, but is open-source, and has community inside and outside Google. Dart was chosen as the language of Flutter for the following reason:

  • Dart is AOT (Ahead Of Time) compiled to fast, predictable, native code, which allows almost all of Flutter to be written in Dart. This not only makes Flutter fast, virtually everything (including all the widgets) can be customized.
  • Dart can also be JIT (Just In Time) compiled for exceptionally fast development cycles and game-changing workflow (including Flutter’s popular sub-second stateful hot reload).
  • Dart allows Flutter to avoid the need for a separate declarative layout language like JSX or XML, or separate visual interface builders, because Dart’s declarative, programmatic layout is easy to read and visualize. And with all the layout in one language and in one place, it is easy for Flutter to provide advanced tooling that makes layout a snap.
  • State that is not ephemeral, that you want to share across many parts of your app, and that you want to keep between user sessions, is what we call application state (sometimes also called shared state).
  • Examples of application state: - User preferences - Login info - Notifications in a social networking app - The shopping cart in an e-commerce app - Read/unread state of articles in a news app
  • main () function came from Java-like languages so it's where all program started, without it, you can't write any program on Flutter even without UI.
  • runApp() function should return Widget that would be attached to the screen as a root of the Widget Tree that will be rendered.

Stateless : Widget state creates ONLY ONCE, then it can update values but not state explicitly. That's why it has only one class which extends with StatelessWidget. They can never re-run build() method again.

Stateful : Widgets can update their STATE (locally) & values multiple times upon event triggered. That's the reason, the implementation is also different. In this, we have 2 classes, one is StatefulWidget & the other is it's State implementation handler i.e. State<YourWidget>. So if I say, they can re-run build() method again & again based on events triggered.

  • StatelessWidget will never rebuild by itself (but can from external events). A StatefulWidget can.
  • StatelessWidget is static wheres a StatefulWidget is dynamic.

See the diagram below:


  • Key is an identifier for WidgetsElements and SemanticsNodes.
  • A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.
  • Keys must be unique amongst the Elements with the same parent.
  • Subclasses of Key should either subclass LocalKey or GlobalKey.
  • Keys are useful when manipulating collections of widgets of the same type.
  • If you find yourself addingremoving, or reordering a collection of widgets of the same type that hold some state, then, you should use a key.