Flutter Firebase : Basic Task Manager

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

Other Widgets

  • Floating Action Button
  • Switch
  • Date Time picker

--

--

Avid programmer chasing developments in the dynamic and invigorating world of technology 🤓

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aarnav Jindal

Aarnav Jindal

Avid programmer chasing developments in the dynamic and invigorating world of technology 🤓