Getting started with Flutter Part 2

Flutter is a new platform for developing Android and iOS apps from a single codebase, written in Dart. In my last post we saw how to install Android Studio and the Flutter plugin on Android Studio. In this post, we would go further and get to see and implement some modules I think are vital to any app development.

Things we would talking about :

1. Widgets
2. Reactive states (Stateless and Stateful widgets)
3. Network activity
4. JSON parsing

Widgets

Widgets are the foundation of flutter apps. A widget is a description of part of the user interface. Nearly everything on flutter is a widget written in Dart. A Flutter UI is made entirely of widgets.

There are no separate files for layout, customization or text alignment. All the codes for your widget is defined in one flutter widget. When a widget state changes due to user input or animation, the widget rebuilds itself based on the new state.

Flutter comes with many pre-made and customization widgets. The built in widgets includes material components which makes it straight forward to add themes, use colors, layout the app and add user interaction. Lets see an example:

Google Shrine App

From the image above:

1. All of the text are made using a text widget.
2. We have also image widgets
3. We have Icon widgets for then icon buttons
4. Button widget for the raised button
5. Columns and ListViews are used for organization and layout.

Literally everything in flutter is a widget; Themes, Animations, Layout Builders, GestureDetectors etc. There are both stateless and stateful widgets.

We instantiate a widget by passing in parameters. Lets take a look at the container widgets, one of the most versatile widgets. You can use it to subdivide your app into sections, create various shapes, decorate existing widgets and more.

Code snippet

To get to know Flutter is to get to know widgets.

Reactive states

When talking about states, we are meaning that the user interface may change when an event is triggered. For example refreshing data at the click of a button, toggling a checkbox. A widget can either be Stateful or Stateless.

A StatelessWidget is a very simple widget that displays some other Widget but doesn’t have any mutable state, therefore it needs to be recreated with different parameters in order to display different data. An example of a StatelessWidget could be a row in a to-do list: this Widget would get the to-do text as a constructor parameter and then display it. Changing the to-do text requires you to create another StatelessWidget.

A StatefulWidget is useful when building a UI based on some mutable state, in this case the Widget gets recreated every time the state is mutated, therefore reflecting its new state.

Network activity

Most apps available today on either the Google Play Store or App Store requires data pulled from a Server or getting data from a Server. To perform a network activity in Flutter, we would be using a package called http. This would required us to add the package as a dependency to our project.

To install the http package, we need to add it to the dependencies section of our pubspec.yaml. We can find the latest version of the http package on the pub website.

Code snippet

Next, we would have to import the package at the top of our class by adding:

import 'package:http/http.dart' as http;

And to use:

http.get(url);
http.post(url, headers, body, encoding)

as simple as that.

JSON parsing

JSON parsing is the heart of majorly all network request. JSON is medium of data exchange between the client and the server and vice versa. A JSON not properly parsed it just a looming destruction. In Flutter, we have an inbuilt package called dart:convert that converts response body from a network request to a JSON and then we can convert the JSON into an Object.

So first we import the package:

import 'dart:convert';

then we use the package to convert the network response to a JSON by calling json.decode(body). Let’s see a code snippet for that:

final response = http.get(url);
final responseJson = json.decode(response.body);

So we can read responseJson by calling responseJson[key] . Let’s see an example:

Let’s say we get this JSON data from a server:

{
   "name" : "Osagie Omon",
   "age" : "Not available",
   "phone" :  [
        "081216600**",
        "090902180**"
   ]
}

So to parse:

final response = http.get(url);
final responseJson = json.decode(response.body);
var name = responseJson['name'];
var age = responseJson['age'];
final phoneArray = responseJson['phone']
// read the first number
print(phoneArray[0]);

And we have a parsed JSON.

I wrote an app that covered all we learnt in this post, the project can be found here.

Thanks for reading and hope you still enjoying Flutter as much as I am. Feel free to leave a comment below if you have any issues, suggestions, If you spot a bug, etc.

If you enjoyed this story, please click the 👏 button and share to help others find it.

This article was done by Osagie Omon (Mobile Developer, UI & UX enthusiast) and amadosi odaibo (FullStack Engineer).