TODO App Using Flutter

Introduction

In this documentation, I will cover how you can create a TODO App using Flutter even if you are a beginner or an expert in programming.

Create a TODO Flutter project and Run It

Step 1

Open Android Studio and click on the Create New Flutter Project option.

Step 2

Select Flutter Application and click on Next.

Step 3

Enter the name of the Project. Click on the Browse option.

Step 4

Navigate to Installed Flutter Path and click OK and click Next.

Step 5

Click Finish.

Step 6

Go to lib→main.dart File.

Step 7

Remove the existing code and paste the following code in main.dart File.

import 'package:flutter/material.dart';
import 'package:flutter_todoapp_getx/screens/notes_list.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
void main() async {
await GetStorage.init();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: NoteList(),
);
}
}

Explanation

Since we are going to use the navigation system of GETX and other alerts and snackbar that’s why we have converted MaterialApp to GetMaterialApp and we have provided our home screen as NoteList().

Step 8

Create a new Dart file in lib folder and name it as model.dart and paste the following code in model.dart File.

class Note {
String title;
Note({
this.title
});
factory Note.fromJson(Map < String, dynamic > json) => Note(
title: json['title']);
Map < String, dynamic > toJson() => {
'title': title
};
}

Explanation:

The model.dart file creates the models of our TODO application. We will be only storing title as Note. So, we have created a class Note and provided a String title as parameter.

Step 9

Create a New Folder in lib Folder and name it as screens.

Step 10

Create a New Dart File in lib→screens Folder and name it as notes_list.dart and Paste the following code in notes_list.dart File.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_todoapp_getx/screens/my_note.dart';
import 'controller.dart';
class NoteList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final NoteController nc = Get.put(NoteController());
Widget getNoteList() {
return Obx(
() => nc.notes.length == 0 ? Center(child: Image.asset('assets/lists.jpeg'), ) :
ListView.builder(
itemCount: nc.notes.length,
itemBuilder: (context, index) =>
Card(
child: ListTile(
title: Text(nc.notes[index].title,
style: TextStyle(
fontWeight: FontWeight.w500)),
leading: Text(
(index + 1).toString() + ".",
style: TextStyle(fontSize: 15),
),
trailing: Wrap(children: < Widget > [
IconButton(
icon: Icon(Icons.create),
onPressed: () =>
Get.to(MyNote(index: index))),
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
Get.defaultDialog(
title: 'Delete Note',
middleText: nc.notes[index].title,
onCancel: () => Get.back(),
confirmTextColor: Colors.white,
onConfirm: () {
nc.notes.removeAt(index);
Get.back();
});
})
])),
)
),
);
}
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
centerTitle: true,
title: Text('Todo App'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
Get.to(MyNote());
},
),
body: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: getNoteList()),
)));
}
}

Explanation

We will use our controller at first. Thereafter we are returning AppBar with the FloatingActionButton along with the body. We have added the functionality in our FloatingActionButton which eventually navigate to our my_note.dart class.

Step 11

Create a New Dart File in lib→screens Folder and name it as my_note.dart and Paste the following code in my_note.dart File.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../model.dart';
import 'controller.dart';
class MyNote extends StatelessWidget {
int index;
MyNote({
this.index
});
@override
Widget build(BuildContext context) {
final NoteController nc = Get.find();
String text = "";
text = index == null ? " " : nc.notes[index].title;
TextEditingController textEditingController = new TextEditingController(text: text);
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: index == null ? Text('Create a New Note ') : Text('Update note'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Container(
height: 500,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: < Widget > [
Expanded(
child: TextField(
controller: textEditingController,
autofocus: true,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
hintText: 'Create a new note!!',
labelText: ' My Note',
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black87),
borderRadius: BorderRadius.circular(10)),
),
style: TextStyle(fontSize: 20),
keyboardType: TextInputType.text,
maxLines: 5,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: < Widget > [
RaisedButton(
onPressed: () {
Get.back();
},
child: Text('Cancel'),
color: Colors.red,
),
RaisedButton(
onPressed: () {
if (index == null) {
nc.notes.add(Note(title: textEditingController.text));
} else {
var updatenote = nc.notes[index];
updatenote.title = textEditingController.text;
nc.notes[index] = updatenote;
}
Get.back();
},
child: index == null ? Text('Add') : Text('Update'),
color: Colors.green, )
])
],
),
),
)));
}
}

Explanation

We have created a variable ‘index’ which helps in updating our Note List. We have also created a TextField for the creation of Note and TextFieldController for updating the text in Note. Now here my_note class returns the AppBar along with the index logic if it is null then the text on the AppBar will create a new Note else will update the Note.

Step 12

Create a New Dart File in lib→screens Folder and name it as controller.dart and paste the following code in controller.dart file.

import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import '../model.dart';
class NoteController extends GetxController {
var notes = List < Note > ().obs;
void add(Note n) {
notes.add(n);
}
@override
void onInit() {
List storedNotes = GetStorage().read < List > ('notes');
if (!storedNotes.isNull) {
notes = storedNotes.map((e) => Note.fromJson(e)).toList().obs;
}
ever(notes, (_) {
GetStorage().write('notes', notes.toList());
});
super.onInit();
}
}

Explanation

We have created a NoteController class that extends GetXController. Here we have created a variable note which will be storing list of Note data type and we have that observable. By making it observable our controller will be continuously be listening to the changes in Note. Also, we have created a method add that takes Note as parameter which will eventually add Note to our list.

Step 13

Create a New Folder in your project and name it as assets and add the following image as ‘lists.jpg’.

Step 14

Add the following dependencies in your pubspec.yaml File.

Explanation

We have to import the above two packages get: and get_storage: and also, we are going to use some of the images, that’s why we have also imported assets folder under assets dependency.

Step 15

Use the emulator command to start the emulator, as an alternative to running your project or starting it through the AVD Manager.

Step 16

To create a new AVD:

Open the AVD Manager by clicking Tools → AVD Manager.
Click Create Virtual Device, at the bottom of the AVD Manager dialog.
The Select Hardware page appears.
Select a hardware profile, and then click Next.
Select the system image for a particular API level, and then click Next.
Change AVD properties as needed, and then click Finish.

Click Show Advanced Settings to show more settings, such as the skin.

The new AVD appears in the Your Virtual Devices page or the Select Deployment Target dialog.

References

https://developer.android.com/studio/run/managing-avds#createavd

Step 17

Run the app on your device. Click Run.

Step 18

All Set to go and you can view the output.

Conclusion

In this article, we discussed about how to create a TODO application using Flutter.