Flutter Firebase : Basic Task Manager

Flutter is the new cool kid around the block with fancy tools attracting all mobile application developers. The ability to develop native apps for both android and iOS from a single code base is fascinating and broadens the horizon for someone in the industry.

I dug around a bit and compiled a simple task manager application with implementation of all the basic functionalities and some complex yet interesting ones, for people looking for an exciting little project after basic applications. This post assumes you have some basic knowledge about flutter and dart. So let’s get into it…

Topics covered —

1. List View
2. Text Input widget
3. App bar search widget
4. Transition between activities
5. HTTP requests
6. Firebase database connectivity
7. Other widgets ( Switch, DateTime picker, Floating Action Button ( FAB ), Alert dialog )

Project Structure

• Tasks are objects with title, description, date of completion and completion status
• First activity shows list of tasks with search filter in app bar and FAB to add new tasks
• On clicking tasks the second activity with detailed description appears. We can make changes here
• On clicking FAB, we get redirected to an activity to add new task to our firebase database

List View

• It is a stateful widget since it changes its content ( state )
• View shows “Fetching your tasks…” while data is being fetched from firebase database
• Empty list return “No tasks to show”
• onClick item is implemented using GestureDetector and transitions to new activity with detailed description of the task

Text Input Widget

• We need a TextField widget to take input
• To get text from _Title we add the controller _filter to it
• _filter listens to the changes where we can then use the input text inside it

AppBar Search Widget

• The parent of search widget needs to be stateful since it changes state on button search icon click
• Upon clicking the search icon, the search text field opens up
• The input is then passed to TaskList to render tasks with query as substring in their title

Transition between activities

• Navigator class is a widget that manages a set of child widgets with a stack discipline
• In Flutter activities are called routes and they’re managed by the navigator widget
• Here we send task object as parameter to new route and expect it to return a boolean value once its popped off the stack

HTTP requests

• Firstly add http as dependency in your pubspec.yaml file

• Make a get request with http module

Firebase database connectivity

• Make a new firebase project
• We will make http requests to firebase database
• We are not concerned with database security here so let the database allow read and write requests by changing rules like in the image

• Add some data to your firebase database as in the image
• You can try making some get requests after this and print the incoming data from your database

Now you can use your database url ( https://xxxxxx.firebaseio.com/ ) in the http request code above to fetch data from the server

Other Widgets

• Floating Action Button

• Switch

• Date Time picker

These are all gists to the complete source code available on Github. Please show your appreciation by applauding this post. Let me know what else you would like to learn in comments and I would try to publish a post on it soon. Keep geeking it out 🤓

devaar100/FlutterTaskManager