Creating a new Flutter app – Dos & Don’ts – II

This is the second and final part of this create a new flutter app series. You can read the first one here. This post will take a look at the dynamic, interactive elements within an app and how to go about creating them using Flutter. 

Navigation aka Routes

Most applications today contain a considerable number of screens to display their content in a way that maximizes engagement. For instance, an e-commerce app might have a catalogue of products. Upon clicking on one category, a new screen opens relevant to the particular category. 

Navigate to a new screen and back

In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is created using the Navigator widget. This is the official documentation for creating routes in Flutter. This allows you to navigate to a new screen and back.

Pass data to a new screen

Apart from navigating to a new screen, it is also necessary to pass data to the screen. 

For instance, information about the product that has been tapped.

Within Flutter, screens are widgets. Passing data to new screens can be done through the following steps on Flutter.

1. Define a todo class.
2. Display a list of todos.
3. Create a detailed screen that can display information about a todo.
4. Navigate and pass data to the detail screen.

You can find the official documentation for this section here.

Retrieve Data

In some cases, it is necessary to retrieve data from a new screen. For example, a screen presents two options to a user. Upon tapping on one of the options, it is essential to inform the first screen of the selection to act on this information.

This can be achieved using the Navigator.pop() method:

1. Define the home screen
2. Add a button that launches the selection screen
3. Show the selection screen with two buttons
4. When a button is tapped, close the selection screen
5. Show a snackbar on the home screen with the selection

The official Flutter documentation for data retrieval from screens can be found here. 

Until now, the above three steps demonstrate how to use Flutter for small projects. However, as the scope of the project expands, it becomes necessary to manage all the routes in a single place. This means figuring out the answers to the following: 

1. How many routes are present?

2. How to initialize each route?

3. What data is required by each route?

This has been streamlined with Flutter naming the routes. If the app you are creating requires navigating to the same screen from various parts, you could end up duplicating code. To avoid this, Flutter has come up with a solution to define a named route and use the designated way; one for navigation.

This requires using the Navigator.pushNamed() function. The following steps indicate how to use named routes:

1. Create two screens.
2. Define the routes.
3. Navigate to the second screen using Navigator.pushNamed().
4. Return to the first screen using Navigator .pop().

You can find the detailed steps to this in the official Flutter documentation.

Passing Arguments in Named Routes

The Navigator widget makes it possible to navigate to a named route from any part of an app. However, it is also required to pass arguments to a named route in certain cases. 

This can be done using the arguments parameter of the Navigator.pushNamed() method. 

Here is a basic step-wise guide on passing arguments to a named route:

1. Define the arguments you need to pass.
2. Create a widget that extracts the arguments.
3. Register the widget in the routes table.
4. Navigate to the widget.

You can find the detailed steps to this in the official Flutter documentation.

Networking

Apps today are usually connected to third-party servers and make requests to the server to fetch or post data. In Flutter, we can use HTTP as a third-party pub for the same. This is multi-platform and supports mobile, desktop, and browser. You can find detailed information about HTTP here. 

Fetching Data from the Network

Dart and Flutter have specific tools, such as the HTTP package, that make fetching data easier. This includes the following steps:

1. Add the HTTP package.
2. Make a network request using the HTTP package.
3. Convert the response into a custom Dart object.
4. Fetch and display the data with Flutter.

You can find more detailed information on the official Flutter documentation. 

Making Authenticated Requests

Fetching data from most web services requires you to provide authorization. There are several ways to do this, one of the most common ways is to use the Authorization HTTP header.

You can find more detailed information on authenticating requests on the official Flutter documentation.

Working with Web Sockets 

Apart from HTTP requests, WebSockets can be used for server requests. These allow for two-way communication with a server without polling.

The following are the steps to use Web Sockets in Flutter:

1. Connect to a WebSocket server.
2. Listen for messages from the server.
3. Send data to the server.
4. Close the WebSocket connection.

You can find more detailed information on web sockets on the official Flutter documentation.

chopper and dio are some of the most popular pubs available that are efficient and make the above process simple. 

JSON and Serialization

Manual parsing and automated serialization using code generation are the two strategies for JSON serialization on Flutter.

As runtime reflection is disabled in Flutter, libraries like GSON , Jackson, or Moshi are not possible.

This official guide from Flutter looks into ways of using JSON. It covers which JSON solution to use in different scenarios and why. This online tool is very helpful in auto-generating boilerplate for manual parsing. 

Data Persistence

Data needs to persist in local memory for easy availability when required. The shared preferences plugin is useful when a relatively small amount of data needs to be stored in a key-value pair. 

This is done in the following steps:

1. Add the dependency.
2. Save data.
3. Read data.
4. Remove data.

More information can be found on the detailed official guide to achieving the same using Flutter.

Read and write files.

It becomes necessary to read and write files to disk in certain cases. Here, data needs to persist across app launches, or data has to be downloaded from the internet and saved for later offline use.

To save files to disk, combine the path_provider plugin with the dart: io library.

This can be done using the following steps:

1. Find the correct local path.
2. Create a reference to the file location.
3. Write data to the file.
4. Read data from the file.

You can find more detailed information on reading and writing files on the official Flutter documentation.

Persist data with SQLite

If you need a large volume of data to persist and be queried on the local device, we recommend using a database over a local file or key-value store as they offer rapid inserts, updates, and queries.

Flutter apps can make use of the SQLite databases via the sqflite plugin available on pub.dev. Please go over the SQLite Tutorial to learn the basics before doing the following steps:

1. Add the dependencies.
2. Define the Dog data model.
3. Open the database.
4. Create the dogs’ table.
5. Insert a Dog into the database.
6. Retrieve the list of dogs.
7. Update a Dog in the database.
8. Delete a Dog from the database.

You can find more detailed information on data persistence with SQLite on the official Flutter documentation.

Additionally, Moor is a wrapper around SQLite. It is easy to use and has reactive data persistence. 

Dependency Management

A wonderful way to work together as a community and share knowledge is by using pubs. 

pub.dev is a great resource for starting out, and you can find handy packages here.

However, with multiple pubs, there might be issues such as conflicts in resolving the version. The official Flutter documentation for best practices to be followed while using pubs is here.

The Final Word

This brings us to the end of our first tutorial. Do give it a try, and let us know how you fared. Reach out to Josh Software to start your app journey with Flutter and take your business to greater heights.