Forem: Guilherme Cabral

Building a cross-platform todo mobile app using Flutter: Pt. 2

Guilherme Cabral — Tue, 30 Oct 2018 15:16:29 +0000

Photo by Randall Ruiz on Unsplash

In the first part of this series (which you should totally take a look at), we set up our workspace to build apps with Flutter. In this part, we will take a more in-depth tour on how we can build stuff with it, and even create ourselves a pretty basic to-do app.

As you may remember, we were looking at the entry-point of every Dart application, the main.dart file. This file builds a simple counter app with a button that increments a variable, which then gets printed on the screen. That’s pretty useless, isn’t it? Let’s build something better. Let’s build a to-do app.

Before starting, I think we should delete the code from the example app I mentioned above and start from scratch. To do that, make your main.dart file look like this one:

There are some things you should focus on:

void main() => runApp(new MyApp()); is the entry-point of the application
the MyApp class, that holds the root of the widget tree
MaterialApp() is a widget provided by the library imported in the first line of the file. It builds a Material Design app.
the HomePage class, a widget that has a State instance of the class _HomePageState, which will return more than a Container() soon enough.

There are lots of details about this, and we’ll cover them as we go.

To-do lists have to-do items, right? So we need to describe Items using a simple class. To do so, we’ll make a folder called models and inside we’ll create a file called item.dart that looks like this:

Now that we have the model, let’s work on presenting our tasks by using some widgets! By importing Flutter’s Material library, we have access to a bunch of different pre-designed widgets to build our interface.

We need some to-do items to display. First we need to import the Item model we created earlier:

import 'package:todo/models/item.dart';

And then we place our tasks inside our _HomePageState class, like this:

class _HomePageState extends State<HomePage> {

  List<Item> items = [
    Item('Take a shower'),
    Item('Go shopping'),
    Item('Feed the cat'),
  ];

  ...

Now that we have items to show, let’s grow our widget tree to display them by changing our build method to this:

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('Awesome Todo'),
    ),
    body: new Container(
      child: new ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(
              '${items[index].title}',
            ),
            trailing: new IconButton(
              icon: new Icon(Icons.delete),
              onPressed: null,
            ),
          );
        },
      ),
    ),
  );
}

If you’re using Visual Studio Code or IntelliJ IDEA, and have already installed the respective Flutter plugin, you can start the app from the editor by pressing F5 on VS Code or clicking the green play button on IntelliJ IDEA (you also have hot-reload-on-save awesomeness). Run the app, and your device or simulator should look like the image below.

Ew, who can’t remember to take a shower?

Let’s go over the widgets we used. The Scaffold is the basic structure for our app. It holds, among other things, the AppBar which we see on the top, and a Container as our body. It could also hold a drawer menu or other things. The Container on the body is the parent of a ListView.builder(). We could have just used ListView(children: items) and everything would be fine. I chose to go with ListView.builder() because this way it automagically renders its children (ListTile in this case) as they are scrolled through, similar to an infinite scroll.

We’ll need to add to-do items to our awesome list. Let’s start by adding a FloatingActionButton to our app! We’ll add it to our Scaffold, and this should be the result:

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('Awesome Todo'),
    ),
    body: new Container(
      child: new ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(
              '${items[index].title}',
            ),
            trailing: new IconButton(
              icon: new Icon(Icons.delete),
              onPressed: null,
            ),
          );
        },
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: null,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ),
  );
}

Look at it, so pretty.

And now we have a great Floating Action Button on our app!

It is pretty, but dumb: right now, the button does nothing. Neither do the trash cans on the items. Let’s create the methods that will handle those interactions and update our FloatingActionButton and ListTile widgets.

_onAddItemPressed() {

}

_onDeleteItem(item) {

}

floatingActionButton: new FloatingActionButton(
  onPressed: () {
    _onAddItemPressed();
  },
  tooltip: 'Increment',
  child: new Icon(Icons.add),
),

...

trailing: new IconButton(
  icon: new Icon(Icons.delete),
  onPressed: () {
    _onDeleteItem(index);
  },
),

To delete the Item from the list, we’ll just have to add this to the method we created above:

_onDeleteItem(item) {
  items.removeAt(item);
  setState(() {});
}

To add new items, I wanted to make things prettier and a little more fun. We’ll have a drawer coming from the bottom of the screen. That drawer will have a TextField that the user can fill and submit a task to the list. To do this, we are going to use a BottomSheet, more specifially, the Persistant kind. PersistantBottomSheets are context-aware, which means that opening them counts as navigating to another route of our app and that can be closed by pressing back in the app or in the device¹ (if running on an Android phone). To do so, we’ll need to set a key on our Scaffold widget. First, we’ll create it:

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

Set it on our Scaffold widget:

@override
Widget build(BuildContext context) {
  return new Scaffold(
    key: _scaffoldKey,
    ...

and now we can use it to open the PersistantBottomSheet

_onAddItemPressed() {
  _scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) {
    return new Container(
      decoration:
          new BoxDecoration(color: Colors.blueGrey),
      child: new Padding(
        padding: const EdgeInsets.fromLTRB(32.0, 50.0, 32.0, 32.0),
      ),
    );
  });
}

This will show a sliding drawer coming from the bottom, with a Container, that has styles from a BoxDecoration widget, and has a Padding widget as a child (remember when I said that everything is a widget?).

If you go to your device and hit the Floating Button, you’ll see it rise to a small grey box to the left. That’s our Padding widget, being empty. Nothing to worry about, as we’re going to insert our TextField there. To achieve this, we’ll need a TextEditingController to handle our TextField and we’ll set it right after our _scaffoldKey :

final TextEditingController _textEditingController =
new TextEditingController();

and give our Padding widget a child.

child: new Padding(
  padding: const EdgeInsets.fromLTRB(32.0, 50.0, 32.0, 32.0),
  child: new TextField(
    controller: _textEditingController,
    decoration: InputDecoration(
      hintText: 'Please enter a task',
    ),
    onSubmitted: _onSubmit,
  ),
),

Right now it won’t build because we are using the _onSubmit function on the TextField and we haven’t created it yet. It’s pretty similar to our _onDeleteItem function:

_onSubmit(String s) {
  if (s.isNotEmpty) {
    items.add(Item(s));
    _textEditingController.clear();
    setState(() {});
  }
}

Try it, you should now be able to add new tasks and delete old ones.

Note to self: make more and better GIFs next time.

And that’s it! With 100 lines of code we built a cross platform to-do app. You can check the whole code here.

The next step is making the data persistent by storing the items in the device’s storage. Stay tuned for the third part of this series!

¹ You can also close the PersistantModalSheet by dragging it down.

I love building products and I found my place to do so at Runtime Revolution. If you are interested in who we are and what we do, make sure to reach out!

Building a cross-platform todo mobile app using Flutter

Guilherme Cabral — Tue, 30 Oct 2018 14:59:07 +0000

Photo by Andrea Reiman on Unsplash

I’ve been playing with this tool for some time, but not enough to have a thorough understanding of it. So, as I’m writing this post, I’ll actually be learning along with it. This post is about a framework that can be used to build mobile apps for iOS and Android using a single codebase. “Is it React Native?” — you ask. No, it is not.

Flutter

verb.
(of a bird or other winged creature) fly unsteadily or hover by flapping the wings quickly and lightly.

Flutter is a tool made by Google to build Android and iOS apps sharing the same codebase. It is a brand new tool (at the time of writing, it was in Release Preview 2), built to compete with React-Native, Xamarin and other tools.

Is it better than any of those competitors? I actually don’t know. My experience with those tools is close to non-existent. But, as a huge fan of hipster-driven development methodologies, I had to try this.

I came across Flutter for the first time by accident: I was scrolling through my YouTube feed and, as a subscriber to the Google Developers’ YouTube channel, there was this 1 minute video suggestion that I clicked by accident. The video was about a specific feature of Flutter I can’t recall. What I do remember is that I was instantly amazed by how simple it was to build Material Design apps for Android. Only later did I found out it was actually doable for iOS as well, in a video¹ of a keynote on DartConf. And so I became a pain-in-the-ass-evangelist for Flutter.

Flutter and applications built with Flutter are written in Dart, a programming language made by Google too. They say Dart will look familiar if you are used to JavaScript. I don’t really agree with that, but what do I know?

Well, enough chit-chat. Cue the drum roll and let’s start.

First we need to install Flutter on our machine. That’s easy:

Download the Flutter SDK and extract it to a folder of your choice.

Next we’ll need to make the flutter binary accessible. We should add its parent folder to our $PATH variable but, if you’re lazy like me, you can add a symbolic link (symlink)² to your /usr/local/bin folder by running:

$ ln -s /path/to/extracted/folder/bin/flutter /usr/local/bin/flutter

And that’s it! You have just created a symlink to the Flutter binary in your /usr/local/bin folder. Placing a binary in that folder will make it available everywhere by calling just its name.

Now, if you run flutter doctor on a terminal, Flutter will check if you have the required dependencies for it to work. It will tell you to install Android Studio and XCode, and other stuff. You should follow the platform guide to install everything. It will also look for IntelliJ IDEA/Android Studio or Visual Studio Code and, if you use any of them, it will recommend installing plugins for them (take a look at the guide to configure your preferred editor).

We are now ready to try Flutter! In a terminal, run:

$ flutter create todo
$ cd todo

Now, open a Simulator or connect a device and run flutter doctor to check if it’s detected and ready to use. If so, run

$ flutter run

and voilà, there you have a Flutter app running. By default, the flutter create command generates a boilerplate app with a floating button that increments a value show in the center of the screen.

Flutter boilerplate counter app running on iPhone XS Simulator.

Now would be a good time to take a look at our application code. Dart works with an entry-point, i.e., everything starts on the main() function present in this lib/main.dart file. Open and check it out. It should look something like this:

The code is filled with comments and they explain well what everything is and what it does. I do feel there’s one comment missing from the top of the file:

In Flutter, everything is a widget.

There are two types of Widgets: Stateful and Stateless. The first type are widgets that hold state, and the other kind don’t (duh) and both can have one or more widgets as children — a Flutter app is structured as a widget tree.

In the second part of this blogpost series, we’ll build a to-do app using both Stateful and Stateless widgets³. I hope you’ll stick around.

¹ This video may be outdated and some of the code it shows may not work as expected.
² Adding directories to your $PATH is more useful when you want to have access to a bunch of binaries that are in the same directory.
³ There are popular state-management libraries for Flutter like Redux, but they are an overkill solution for a simple project like a to-do app. We’ll take a look at them another time.

I love building products and I found my place to do so at Runtime Revolution. If you are interested in who we are and what we do, make sure to reach out!