On the face of it Flutter can appear incredibly simple based on most basic tutorials on the web. But going from a simple example to creating something that's actually useful is a steep learning curve. This is because a number of core concepts need to be understood to comprehend what's going on in a real world example. Trying to absorb them all in one go is too much for most people.

In this series I'll try to convey these concepts in concise examples that are small enough to absorb. Then it should just be a case of combining them in order to develop Flutter code that actually does something useful.

Step 1 - Widgets

There are countless guides around on Widgets, so I'll not delve too deeply here, and it's probably the easiest concept to pick up when learning to write Flutter apps.

Flutter apps consist of a tree of Widgets. Text, Images, Rows etc are all Widgets (i.e. they're descendents of the Widget class). This concept is nicely conveyed by the code indentation. Widgets have a child Widget, or many Widget children.

Take a look at this example and try and understand what UI will be shown before you scroll down and see the screenshot (btw, this is the full code for the app, not a snippet):

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Example"),
            ),
            body: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Some Text"),
                  ),
                  RaisedButton(
                    child: Text("A Button"),
                    onPressed: () => print("Pressed"),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

Most of this example is self-explanatory, except maybe for:

• MaterialApp.home & Scaffold.body, these can be thought of just like Widget.child.
• mainAxisSize: MainAxisSize.min, this just means the Column uses the size of its children to determine its size - think wrap_content on Android).
• Padding is done using a Widget named Padding. It wraps the Widget it is applying padding to.

There are numerous Widgets provided by the framework and, at present, you don't need to concern yourself with knowing any more than what's shown above. The important thing to grasp is the tree.

One concern that may arise when looking at the code is the heavy use of indentation. Trying to keep track of parentheses, commas, and semi-colons looks daunting. But this is mostly a non-issue, as the IDE (Android Studio in this case) does 90% of it for you via alt+enter:

After running this example and tweaking it to add more Widgets, or apply different styling, your next question might be: yes, but that's a static UI, how do I make a UI that changes? We'll cover that next in Part Two, using Builders.