Let’s Flutter Ep 2 — Basic UI Elements

Welcome back in the second episode of our journey. It’s gonna be about user interface. Everyone is using apps, so you are probably familiar with the basic UI elements. Ability to make a good UI is much different than coding and requires artistic sense, but luckily there are some standards defined.

Previous episode

Photo by Hal Gatewood on Unsplash

We start with a simple setup, for now let’s modify previous project, remove all comments if you haven’t done it yet and modify MyHomePageState to look something like this:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(),
    );
  }
}

Now we should have a screen with only a toolbar and an empty white container below. The left part of the counter logic will be used later.

In flutter world everything you see is a widget, so let’s explain basic widgets.

First we need to know about widget called Text. This widget renders text and to create it, we need to pass string of letters as parameter. We can now replace our body part with text and play with it.

body: Text(
  "Here's my app!",
),

That string we passed to Text is obligatory and you cannot create Text widget without it. Optional parameters differ in that they have a name before themselves, like in next example.

child: Text(
  "Here's my app!",
  maxLines: 2
),

Here maxLines is not obligatory so we must put name before value.

body: Text(
  "Here's my app!",
  style: TextStyle(
    fontSize: 30,
  ),
),

Same with TextStyle, we need to specify what parameter we want to set. To see all parameters you can pass, press Ctrl + P while you are in round brackets of any widget argument.

So now that our text is bigger, let’s also change his color, but do it yourself. All colors you can find in class Colors, like Colors.blue.

If we want our Text to be clickable, you should wrap it with a RaisedButton widget. Wrapping means that you create a wrapper widget (parent) and set our widget as child.

body: RaisedButton(
  child: Text("Click me!"),
  onPressed: () {
    print('FlatButton clicked');
  },
),

onPressed function executes what is in the lambda below. Every time a button is clicked in this example, the text prints to the console.

Now we have two important widgets used for positioning of other widgets.

Center is simple widget that is positioning our widget in the center of a parent widget by wrapping it like before with RaisedButton.

Run app and check if your text is in center of the screen.

body: Center(
  child: Text(
    "Here's my app!",
    style: TextStyle(
      fontSize: 30,
      color: Colors.amber,
    ),
  ),
),

Padding works like Center. It adds more room inside that widget. EdgeInsets can be sets as all edges or only edge. If using only we can specify one or many edges we want. Try it now.

body: Padding(
  padding: const EdgeInsets.all(32.0),
  child: Text(
    "Here's my app!",
    style: TextStyle(
      fontSize: 30,
      color: Colors.amber,
    ),
  ),
),

Next widget we need to know is Column. In situation when you want to position items one below another, the Column is a right choice.

body: Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(
      "First text",
    ),
    Text(
      "Second text",
    ),
  ],
),

Instead of child widgets like Center or Padding, Column takes children. Plurals suggest that this will be a list of widgets and it’s true. In Dart language, lists elements are placed in a square brackets. In code above, parameter mainAxisSize is for choosing how much place a column will take in a vertical direction. Min means it will be as small as possible. This is important if we want to center our widget.

There is also a Row widget, which is the same as Column only for horizontal item presentations.

Now we have all we need to once again set up our counter app, but only using widgets from this article.

First we have to think how to arrange widgets. We need to put two widgets into column, counter on top, button which will increment counter below. I’m convinced you can do it by yourself.

Ok. Now that you’ve done it, you can compare your version with mine in the next article about our first app project.

Bonus homework

Add possibility to reset counter, it may be another button.

As always, if you have any trouble with keeping up, let me know by leaving a comment.

See you later in the next article!

Next article