DEV Community: Rasmus Thorsen

Building a Pokedex with Flutter

Rasmus Thorsen — Fri, 21 Feb 2020 08:07:41 +0000

This is the second part of the Flutter series, that will get you started with Flutter. In the first part we learned what Dart is, and we sat up a simple ‘Hello world’-app. In this second part we will dig a little deeper into Flutter and build our very own Pokedex app.

If you are participating in IT Minds’ Tech Talent Night about Flutter you can use this article for reference.

We will be building the following app:

The Setup

This article is solely based on getting to know the different Flutter widgets, therefore we will not setup HTTP calls and fetching data. Instead, we will be building upon this repository, where fetching data is already implemented. If you want an article based on data fetching, calling APIs and handling advanced state in Flutter, let me know by leaving a comment in the discussion section below.

Start by cloning the repository, this can be done by running the following command:
Git clone https://github.com/rsr-itminds/flutter-workshop.git

If you are feeling confident, I strongly encourage you to go ahead and solve the assignments yourself, and then use this article if you get stuck. The assignments and a slideshow can be found in the /docs folder. There are also two branches besides the master branch. One containing the finished app, and another containing a solution to the extra assignments.

Now run flutter run from within the repository folder or press F5 if you are using Visual Studio Code to launch the app. Pressing F5 will launch the app in debug mode. The app should look like this:

Building the Pokedex

In this section we will start building the pokedex itself. We will simply be solving the assignments found in the /docs folder one-by-one.

After cloning the repository, open the lib/main.dart file. Here you will find the runApp()-function, the Material- and Scaffold-widgets, that you learned about in part one. This is the base of our app. Besides those familiar concepts there is also a buildPokemonScreen()-function and a fetchPokemonsFromApi()-function.

fetchPokemonsFromApi() simply fetches the data from the API, and returns a list containing our Pokemons. The Pokemon model itself can be found in the lib/models folder. The buildPokemonScreen() calls the fetchPokemonsFromApi() and displays a HomeScreen-widget, which accepts the list of pokemons.

Using a GridView

The list of Pokemons overflows the bottom of the screen, hence the black and yellow stripes, and you are not able to scroll through all the Pokemons. This happens in the HomeScreen-widget, which can be found in the screens folder. Right now, the HomeScreen-widget looks like this:

class HomeScreen extends StatelessWidget {
  final List<Pokemon> pokemons;

  HomeScreen({this.pokemons});

  @override
  Widget build(BuildContext context) {
    // Map the list of Pokémons to a list of Text widgets
    List<Widget> list = pokemons.map((p) => Text(p.name)).toList();

    // Show the Text widgets in a Column widget
    // Todo: return a GridView instead
    return Column(children: list);
  }
}

The widget accepts a list of Pokemons and displays them using a Column. We want the Pokemons to be layed out in a Grid. For that purpose, Flutter has a widget called GridView, which can be used like this:

return GridView.count(crossAxisCount: 2, children: list);

So instead of returning a Column, we are now returning a GridView, which has two items in the cross axis.

The black and yellow stripes disappeared, and we are now able to scroll through all our Pokemons.

Your first widget

To improve the quality of the app, we want to show more than just the name of the Pokemon. For this purpose, we are going to make our own widget. In the lib folder, make a new folder called widgets, and in there create a new file called pokemonGridItem.dart. In this new file create a new class that is extending StatelessWidget, and which accepts a Pokemon as a constructor argument. Furthermore we want to display the name of the Pokemon in the build()-function:

class PokemonGridItem extends StatelessWidget {
  final Pokemon pokemon;

  PokemonGridItem({this.pokemon});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(pokemon.name),
    );
  }
}

Now we want to use our newly created widget in the HomeScreen-widget. In the build()-function of the HomeScreen-widget, replace the Text-widget with our PokemonGridItem and pass in the pokemon as an argument.

@override
  Widget build(BuildContext context) {
    // Map the list of Pokémons to a list of Text widgets
    List<Widget> list = pokemons.map((p) => PokemonGridItem(pokemon: p)).toList();

    // Show the Text widgets in a Column widget
    return GridView.count(crossAxisCount: 2, children: list);
  }

This should not result in any visual changes, just a better foundation to build upon.

Showing images

Let's improve the visuals of the app by changing the colors. To change the color of the appbar, navigate to main.dart and find the AppBar-widget. I like the following color and centered title, but feel free to style it as you like. To change the background color of the app, the Scaffold-widget has a backgroundColor-property, we can change.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pokédex',
      home: Scaffold(
        backgroundColor: Colors.blueGrey[700],
        appBar: AppBar(
          title: Text("Pokédex"),
          backgroundColor: Colors.blueGrey[500],
          centerTitle: true,
        ),
        body: buildPokemonScreen(),
      ),
    );
  }

So far so good. Now let's style each grid item. You can style it however you want. The styling happens in the pokemonGridItem.dart file. As you can see in the following code snippet, I use a Column to lay out the image, name and number in a vertical order, and then style each of the three individually. For the image I use the Image.network-widget, which fetches an image from the web. I added a circle behind the image to make the image stand out a little more.

class PokemonGridItem extends StatelessWidget {
  final Pokemon pokemon;

  PokemonGridItem({this.pokemon});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            color: Colors.blueGrey[500],
            shape: BoxShape.circle
          ),
          child: Image.network(pokemon.image),
        ),
        Text(pokemon.name, style: TextStyle(fontSize: 16, color: Colors.white)),
        Text(pokemon.number, style: TextStyle(color: Colors.grey)),
      ],
    );
  }
}

Then you should end up with something like this:

Showing details

The app is really starting to take shape now. Let’s add some navigation to a detailed view of each Pokemon. Create a file in the screens folder called details.screen.dart. Create a new class called DetailsScreen, which takes a Pokemon as a constructor argument and inherits from StatelessWidget. Since this is a new screen, it should return a Scaffold:

class DetailsScreen extends StatelessWidget {
  final Pokemon pokemon;

  DetailsScreen({this.pokemon});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[700],
      appBar: AppBar(
        centerTitle: true,
        title: Text(pokemon.name),
        backgroundColor: Colors.blueGrey[500],
      ),
      body: Container()
    );
  }
}

Next, we want to be able to navigate to the DetailsScreen. To achieve this open the PokemonGridItem file, and wrap everything in a GestureDetector-widget. This widget allows us to listen for taps, and when the user taps a PokemonGridItem, we can navigate to the details screen.

Navigation in Flutter is based on a simple stack on which you can push and pop widgets. Thus, to navigate to another screen we simply push our DetailsScreen to the Navigation stack using the Navigator.push()-function. The widget we are pushing is wrapped inside a MaterialPageRoute:

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailsScreen(
              pokemon: pokemon,
            ),
          ),
        );
      },
      child: Column(
        // unchanged
      ),
    );
  }
}

Now that we can navigate to the DetailsScreen, we can style the screen however we like. I will just style it as follows, but feel free to experiment a little here. You could create some kind of badge-widget to display the height and weight.

class DetailsScreen extends StatelessWidget {
  final Pokemon pokemon;
  final TextStyle style = TextStyle(color: Colors.white, fontSize: 16);

  DetailsScreen({this.pokemon});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[700],
      appBar: AppBar(
        centerTitle: true,
        title: Text(pokemon.name),
        backgroundColor: Colors.blueGrey[500],
      ),
      body: Container(
        width: double.infinity,
        padding: EdgeInsets.only(top: 20),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Image.network(pokemon.image),
              Text("Name: " + pokemon.name, style: style,),
              Text("Height: " + pokemon.height, style: style,),
              Text("Weight: " + pokemon.weight, style: style,)
            ],
          ),
      ),
    );
  }
}

Which gives the following result:

Animations

A neat thing to do is add some simple animations, when we navigate. We are going to use the Hero-widget for this purpose. Inside the pokemonGridItem-file, find the Image.network() and wrap it inside a Hero-widget, and assign the pokemon number as a tag:

Container(
   margin: EdgeInsets.all(8.0),
   decoration: BoxDecoration(
   color: Colors.blueGrey[500], shape: BoxShape.circle),
   child: Hero(
       tag: pokemon.number,
       child: Image.network(pokemon.image),
   ),
),

Now inside the DetailsScreen do the same thing:

Hero(
   tag: pokemon.number,
   child: Image.network(pokemon.image),
),

And we achieved some basic animation, when we are navigating.

Adding some simple state

At this point you are familiar with the StatelessWidget, but as mentioned in part 1 there also exists a StatefulWidget. The StatefulWidget is useful when you need to handle mutable state inside your widget. Lets convert our PokemonGridItem to a StatefulWidget and add the possibility to mark a pokemon as favorite.

A StatefulWidget actually consists of two classes: the StatefulWidget itself and a State-class. The StatefulWidget-class is still immutable and contains whatever configuration you want to pass in. The State-object on the other hand can contain variables that change. The exact differences are a little out of the scope of this article. If you are interested you can read more here. The following code snippet shows how a basic StatefulWidget looks. The build()-function is in the State-class, but we are using the SomeWidget-class to insert the widget into the tree.

class SomeWidget extends StatefulWidget {
  @override
  _SomeWidgetState createState() => _SomeWidgetState();
}

class _SomeWidgetState extends State<SomeWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(

    );
  }
}

After that brief introduction to StatefulWidget let’s convert the PokemonGridItem into a StatefulWidget. This is easily done in Visual Studio Code by left clicking on the class name and selecting refactor. Afterwards you can choose “Convert to StatefulWidget”.

Having done this should result in having a PokemonGridItem that extends a StatefulWidget and creates a State object, besides that there should be another class called _PokemonGridItemState that contains the build()-function itself. We will mainly be working in the State-class.

Let’s add a favorite variable in the state-class.

class _PokemonGridItemState extends State<PokemonGridItem> {
  bool favorite = false;

  @override
  Widget build(BuildContext context) {
    // Unchanged
  }
}

Now in the GestureDetector let’s also add a callback for a long press. In this callback we want to call setState() and flip the value of favorite. This results in a rerender with the new value of favorite.

class _PokemonGridItemState extends State<PokemonGridItem> {
  bool favorite = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        setState(() {
          favorite = !favorite;
        });
      },
      child: Column(
        // Rest is unchanged
      ),
    );
  }
}

Now inside the Column-widget, lets add an icon displaying a star, if favorite is true, else just add in an empty container.

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        setState(() {
          favorite = !favorite;
        });
      },
      child: Column(
        children: <Widget>[
          favorite ? Icon(Icons.star, color: Colors.yellow) : Container(),
          // Rest is unchanged
        ],
      ),
    );
  }

This will give us the possibility to add a star on a pokemon, if we long press that pokemon.

What is next?

That wraps up this article series. The app is almost finished, we got all the features down, but the details screen could use more styling and finishing touches. Feel free to try and style a nice looking DetailsScreen. In the repository we cloned there are a couple of branches you can study, if you get stuck or need some inspiration.

Getting started with Flutter

Rasmus Thorsen — Tue, 04 Feb 2020 11:34:59 +0000

Flutter is getting a lot of attention these days, and rightly so. It is one of the fastest growing frameworks, and it just surpassed React Native in GitHub stars - if that counts for anything. In this two-part article series, we will first introduce what Flutter is, and how to use it. Then in the second part we will apply our newfound knowledge and build a simple Pokedex app.

What is Flutter?

Flutter is Googles take on a cross-platform framework, but it is taking the ‘cross-platform’-term to the next level. Every cross-platform framework should at least be able to support both iOS and Android with one single codebase. However, Flutter offers more than that. You can export your Flutter codebase to both iOS and Android, but also web (in beta), and macOS (in alpha). The Google team is also working on Windows and Linux support - both are in technical preview as of January 2020. Thus, with Flutter you will be able to cover almost any platform with one single codebase – which is quite amazing.

Dart: The programming language

The programming language chosen by Google is Dart. This implies that everything in Flutter is built using Dart. This should not scare you though, because Dart got many similarities with other object-oriented languages, so if you know a bit of TypeScript or C# you will quickly comprehend Dart. There are a few Dart-specific features, I would like to introduce, before we develop our first app.

Firstly, Dart supports what is called named parameters, which is heavily used in Flutter. This simply means you can name each parameter in your function or constructor. This is utilized by wrapping your variable with curly braces. The curly braces also make the variable optional, but if the variable is required then it is possible to annotate it with @required – you can of course also omit the curly braces, then the function is used as expected.

// Defining a function
foo({@required String param1, String param2}) {}

// Calling the function
foo(param1: 'Hello', param2: 'World');

Dart also supports named constructors. This feature gives the possibility to have multiple constructors in a class, each constructor will construct an object in a specific way.

class Foo() {
    String _param;
    Foo(this.param);
    Foo.bar(otherParam) { 
       // Do stuff 
    }
}

There are some smaller features worth highlighting. In the code snippet for the Foo-class, the parameter named _param is prefixed with an underscore. The underscore makes that variable private. Furthermore, the parameter in the Foo-constructor is prefixed with this, which assigns it to the variable in the class. Using Flutter, you will constantly be instantiating new objects, but in Dart you can omit the new keyword:

Foo foo = Foo();

Getting Started

For installing Flutter a guide can be found on flutter.dev.
After installation you should be able to run the command flutter create myapp, that will create an app called myapp. Navigate to the lib/main.dart file and delete everything – we will build from scratch. In Flutter you start the application by calling runApp() in the main-function parsing the widget, which will be the root widget of your app.

void main() {
  runApp(MyApp());
} 

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container();
  }
}

In this little code-snippet there are already a couple of Flutter concepts at play. Everything in Flutter is a widget. This means, that every time you want to draw something on the screen, you will either inherit from StatelessWidget or StatefulWidget. In both cases you will need to overwrite the build-method, but we will get back to that method shortly.

As used in the previous code-snippet, a StatelessWidget is a widget, that does not contain any mutable state, and only depends upon the parent configuration. The StatelessWidget is mainly drawn in two situations: when the widgets are constructed and inserted in the widget tree, or when the parent changes its configuration.

So when should I inherit from StatefulWidget? If you need some internal mutable state in the widget, you will inherit from StatefulWidget, which gives you a separate State-class and a setState()-method, that will redraw the widget. An example of a StatefulWidget is a CheckBox. The internal state of the CheckBox is whether or not it is checked.

A big part of learning Flutter is to learn what built-in widgets Flutter has to offer. As I said earlier: everything in Flutter is a widget, so building an app in Flutter is mainly assembling different widgets. This happens in the build-method. The BuildContext is a little out of scope for this article, so just ignore it for now. The build-method returns the widgets that should be rendered. In this case it is just an empty Container. The Container-widget is like a HTML div element, and takes a named parameter called child, that takes a new widget, and that is how the tree is built. A lot of the built-in widgets have this named parameter child.

For instance, the following code snippet would create a container, and center the text within it.

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Hello World"),
      ),
    );
  }
}

However, the code-snippet does not work, because the root of our app should look a little different. A very typical Flutter setup is with a MaterialApp-widget, that has a Scaffold as home. The MaterialApp-widget gives the possibility to set settings for the entire app, such as language or theme colors. The Scaffold is a skeleton for the app. Scaffold makes it easy to create things such as an AppBar.

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
            child: Text("Hello World"),
          ),
        ),
      ),
    );
  }
}

If we expand a little upon it, we can see how the Scaffold can be used to create the Appbar – which of course is just a widget. The AppBar-widget has, among others, a named parameter called title, which takes another widget. It could be any widget; in this example it is a Text-widget. We are also adding some simple styling to the ‘Hello World’ text by adding a TextStyle to the style-parameter.

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("My very first Flutter App"),
        ),
        body: Container(
          child: Center(
            child: Text(
              "Hello World",
              style: TextStyle(color: Colors.red, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

That gives the following result:

The whole tree-analogy, which is used throughout this article, becomes clearer now. The widget tree in this simple app looks like the following, where MaterialApp is root.

What now?

To learn more about StatefulWidgets, Navigation, List/detail and some simple animation, check out the second part this article series, where we will expand upon our Flutter-knowledge and build a Pokedex.

If you think Flutter looks cool, I strongly recommend looking at the official Widget Catalog, that gives an overview of the most used Widgets. Besides that, there is also the Flutter Codelabs, and Flutter YouTube channel which you should check out.