Spreading Happiness With Dart 2.3

dart-image

Dartlang is an amazing language which is always developing to suit the developer needs. Dart 2.3 focuses on UI-as-code and gives us some cool features to make our UI code clean and intuitive.

First lets go through a sample Flutter code.

1
2
3
4
5
6
7
8
9

Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
            Text("My Name is Shabab"),
            Text("I usually write code in Java"),
            Text("But now I write code in Dart(on the side)")   
        ]
    );
}

Now, requirements come that if the UI state comes in as _knowsJava then add a job status as employed. Lets see how we would do that.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Widget build(BuildContext context) {
    var textChildren = <Widget>[Text("My Name is Shabab")];

    if (_knowsJava) {
        textChildren.add(Text("I am employed!"));
    }

    textChildren.addAll(<Widget>[
        Text("I usually write code in Java"),
        Text("But now I write code in Dart(on the side)") 
    ]);


    return Column(
        children: textChildren
    );
}

See this code? Its a pretty simple UI code but still I had to go through some serious mental overhead to understand what the UI is supposed to be like. I basically had to do the job of the compiler to understand what’s going on. Lets now see how we can change this with Dart 2.3

1
2
3
4
5
6
7
8
9
10
11

Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
            Text("My Name is Shabab"),
            if (_knowsJava)
                Text("I am employed!"),
            Text("I usually write code in Java"),
            Text("But now I write code in Dart(on the side)")   
        ]
    );
}

That’s it! No need to go through the lines of code, adding widgets conditionally to an array and then passing it as children.

But wait a minute? Do you hear the rumbling of new requirements?! There’s a new requirement where I need to list out things I love doing in leisure time. So how would we do that before.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Widget build(BuildContext context) {
    var textChildren = <Widget>[Text("My Name is Shabab")];

    if (_knowsJava) {
        textChildren.add(Text("I am employed!"));
    }

    textChildren.addAll(<Widget>[
        Text("I usually write code in Java"),
        Text("But now I write code in Dart(on the side)") 
    ]);

    textChildren.add(Text("Here's a list of things I like:"));
    textChildren.addAll(_listOfThingsILike);

    return Column(
        children: textChildren
    );
}

So, if there’s a requirement where I need to add a list then I would need to do programatic approach to show in the UI. With Dart 2.3 we don’t have to anymore with the spread operator.

1
2
3
4
5
6
7
8
9
10
11
12
13

Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
            Text("My Name is Shabab"),
            if (_knowsJava)
                Text("I am employed!"),
            Text("I usually write code in Java"),
            Text("But now I write code in Dart(on the side)"),
            Text("Here's a list of things I like:"),
            ..._listOfThingsILike
        ]
    );
}

This works like the spread operator in JavaScript. Actually, since Dart 2.3 allows conditionals inside the UI code so one would wonder whether they allow the same with loops too. Actually it does! Here’s an where we add padding around the text in a for loop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
            Text("My Name is Shabab"),
            if (_knowsJava)
                Text("I am employed!"),
            Text("I usually write code in Java"),
            Text("But now I write code in Dart(on the side)"),
            Text("Here's a list of things I like:"),
            for (var likedThing in _listOfThingsILike)
                Padding(
                    padding: EdgeInsets.all(8.0),
                    child: likedThing
                ),
        ]
    );
}

We can do something better and use maps in the UI code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
            Text("My Name is Shabab"),
            if (_knowsJava)
                Text("I am employed!"),
            Text("I usually write code in Java"),
            Text("But now I write code in Dart(on the side)"),
            Text("Here's a list of things I like:"),
            ..._listOfThingsILike.map((likedThing) =>
                Padding(
                    padding: EdgeInsets.all(8.0),
                    child: likedThing
                )
            ),
        ]
    );
}

These are just some of the improvements in the language that were added in Dart 2.3. There are other awesome features that you can check out here