Using Parse with Flutter to create a To-do list app

The Flutter community has grown steadily since the beta was released! The purpose of this post is to demonstrate how fast you can develop apps with Flutter. A small real-world Flutter project won’t turn you into a senior Flutter developer, but it will teach you the fundamentals of developing one.

What is Flutter?

The Google team created the Flutter mobile development framework, which is built-in Dart. It’s geared for users of mobile operating systems like Android and iOS.

“Flutter is a package that allows you to create native-looking interfaces for iOS and Android at record speed. A lot of developers and organizations utilize Flutter because it integrates seamlessly with existing code. Even though it’s still in alpha, nobody seems to care.

Parse was a well-known Facebook backend service that was shut down in 2017. If you build up your server or utilize Back4App, you may still use their SDKs and frameworks for many platforms like Android and IOS, to mention a few.

Back4App, which uses the Parse framework to offer backend services, will be used in this example. While other platforms have official SDKs, Flutter does not. Thus Back4app provides RESTful APIs for interacting with our backend.

How to Begin Using Back4App 

1. Please sign up for a Back4App account.
2. You’ll see an option to “Build a new app” once you’ve registered an account. To give your app a name, click that button (say Todo App).
3. After that, you’ll get a screen similar to the one shown in Figure 3.
4. This section, Database Browser, shows you all the classes in your database on the left. Role and User are the pre-installed classes. Set up a Todo class to hold the data for each Todo item you create.
5. The task will be stored in a column named task in the new class you just created.

Let’s get this party started by coding, shall we?

Create a new Flutter project if you haven’t already.

Make sure your primary focus is clear.

To be sure we’re on the same page:

1. Copy and paste the code below.
2. In the lib folder, create a new package called UI.
3. Make a new Dart file called the todo screen in the UI package.
4. Start Dart by pasting the starting code below into the program.

For communication with our backend, we’ll need credentials as ApplicationId and RestApiKey declared in a constant. Dart file within the lib folder.

Model 

Make a package called model in the lib folder and put it there.

Create a model class called Todo. Dart in this package for storing our “todo.” Enter the following coding into the text box.

Quicktype.io was used to produce the above model class, which takes a JSON schema and turns it into a model class in your favorite programming language.

Utilities for the Network 

Our model and UI package are now set up. To make HTTP requests in Flutter, we need to add a dependency named HTTP. Now that we have that, we can set up our network utils package. For the sake of time and brevity, I’ll assume you know how to add dependencies to your pubspec.YAML.

Create a network utils package in your lib folder now. Todo utils. Dart should be created within this folder to handle all network calls.

Complete each function before moving on to the UI. We’ll ultimately call these functions from the UI.

Including a Todo List 

Let’s keep our addTodo() list up to date for adding new items

As the same format will be used for the remainder of the functions we’ll examine, I can describe this one quickly.

• For example, the variable __baseUrl stores a global URL, whereas apiUrl is the specific URL for adding a Todo item to the app’s database.
• To add a record to the database, we use the [http](https://pub.dev/packages/http#-installing-tab-) package’s post() method, supplying specific headers that we defined in our constants. Dart and which are needed to authenticate.
• The data sent from the client to the server should be JSON encoded. Therefore we’re using the Dart: convert library’s JSON.encode() method to encode the map produced by Todo.toJson().

The documentation for each request may be found in your Back4App project console under the API Reference section.

Let’s do the same with the remaining functions, namely

• getTodoList()
• updateTodo()
• deleteTodo()

Completing the UI

As the last step, we’ll construct a user interface and invoke the functions we just wrote.

Let’s add the code to display the database’s list of all to-do items on the screen. So, head over to your to-do screen and get to work. Dart and make the following changes to the code:

Because of this, we’ve introduced a function called getTodoList() that handles the server-side fetching of todo lists and returning the parsed data to our model class Todo through JSON.

The UI is built using a FutureBuilder since the elements will be returned in the future once the request has been fulfilled. Until then, a progress bar should be displayed on the screen.

This means that the todo screen now has two more functions.

use showAddTodoDialog() and addTodo() respectively to display an AlertDialog asking for confirmation before adding a Todo item to the database.

Use the showAddTodoDialog() method in our FloatingActionButton’sonPressed() function.

Improve the functionality of the Todo list 

Users should be allowed to update Todos once they’ve been added. For this, an AlertDialog with a TextField displaying the current Todo value will be displayed once again. So, the User may make whatever changes they wish to the Todo and then touch the Update button to make the changes permanent.

Showing an AlertDialog when an existing Todo needs to be updated and changing Todo data in the database will require the creation of two new methods, showUpdateDialog(Todotodo) and updateTodo(), respectively.

Remove the ability to delete all tasks from a list.

Keep this essay brief and to the point by just calling a method to delete our Todo. To show a confirmation dialogue box, go ahead and do so.

Use the deleteTodo(String objectId) method within the remove button’s onPressed()callback to delete the task.