Building A To do list Application in Flutter With Google firebase

What is Flutter?

Flutter is a free and open-source mobile UI framework created and manage by Google and which was released on May 2017. Tt allows a individual to create a native mobile application with only one codebase. This means that you can use one programming language to create two different apps for different operating system (for iOS and Android).

Flutter consists of two important parts:

• An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
• A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs

A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

In this App we are using Scaffold constructor , this provides a material design visual layout structure. This class provides many different widgets or different API’s which can cover the whole screen area. Below given are the different properties of Scaffold.

api.flutter.dev/flutter/material/Scaffold-class.html click to know more about Scaffold and it’s functionality.

In the above pic I am allowing my app to manage it’s state between To DO list and Completed List it basically handles the bottom navigation channel

After that we are creating Action Floating Button. We can change it’s look and and feel apart from that we also added OnPress handler. Now next we want is a diagloue box when floating action button is pressed. So we create a another dart file for that.

Dialog box

Inside this we need a form like structure which will accept the Title and descrption of the To Do list so here again create a need Dart file.

To Do Form widget Page

Here we are adding OnPress button save functionality .

FIREBASE SETUP:

Go to console

Select Add Project. Give a project Name and press continue

Go to Cloud Firebase and create your database

Inside project Console

Now, Select test mode

Select the Location for your Database and name your collection in which the data will be store. After that go to project Settings scroll dow select android

Next step is to register your app.

Add your package file name and Download the config file.

Red arrow in the above image shows the name of the package.

Add this file in the following directory.

Now add the SDK file in build gradle. Copy the dependencies

Install firebase intergration.

Now press Next and Continue

Now check firebase console and you are good to go

OUTPUT:

Data being stored in Firestore

For editing a task

For deleting a Task

You can find the Project code here:

GitHub - sachinjoshi72/To-do-list-Fultter-Application-in-Dart

You can connect me on:

Sachin Joshi - Summer Internship - LinuxWorld Informatics Pvt Ltd | LinkedIn

— — — — — — — — — -Thankyou for reading, Do share — — — — — — — — —