to do using flutter

Ambrunimurali
2 min readAug 20, 2021

In this documentation, I will cover how you can create a TODO App using Flutter

Step 1

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

Step 2

Select Flutter Application and click on Next.

Go to lib→main.dart File.

MAIN.DART

  1. import ‘package:flutter/material.dart’;
  2. import ‘package:flutter_todoapp_getx/screens/notes_list.dart’;
  3. import ‘package:get/get.dart’;
  4. import ‘package:get_storage/get_storage.dart’;
  5. void main() async {
  6. await GetStorage.init();
  7. runApp(MyApp());
  8. }
  9. class MyApp extends StatelessWidget {
  10. @override
  11. Widget build(BuildContext context) {
  12. return GetMaterialApp(
  13. title: ‘Flutter Demo’,
  14. theme: ThemeData(
  15. primarySwatch: Colors.red,
  16. visualDensity: VisualDensity.adaptivePlatformDensity,
  17. ),
  18. home: NoteList(),
  19. );
  20. }
  21. }

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().

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

  1. class Note {
  2. String title;
  3. Note({
  4. this.title
  5. });
  6. factory Note.fromJson(Map < String, dynamic > json) => Note(
  7. title: json[‘title’]);
  8. Map < String, dynamic > toJson() => {
  9. ‘title’: title
  10. };
  11. }

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.

  1. import ‘package:flutter/material.dart’;
  2. import ‘package:get/get.dart’;
  3. import ‘package:flutter_todoapp_getx/screens/my_note.dart’;
  4. import ‘controller.dart’;
  5. class NoteList extends StatelessWidget {
  6. @override
  7. Widget build(BuildContext context) {
  8. final NoteController nc = Get.put(NoteController());
  9. Widget getNoteList() {
  10. return Obx(
  11. () => nc.notes.length == 0 ? Center(child: Image.asset(‘assets/lists.jpeg’), ) :
  12. ListView.builder(
  13. itemCount: nc.notes.length,
  14. itemBuilder: (context, index) =>
  15. Card(
  16. child: ListTile(
  17. title: Text(nc.notes[index].title,
  18. style: TextStyle(
  19. fontWeight: FontWeight.w500)),
  20. leading: Text(
  21. (index + 1).toString() + “.”,
  22. style: TextStyle(fontSize: 15),
  23. ),
  24. trailing: Wrap(children: < Widget > [
  25. IconButton(
  26. icon: Icon(Icons.create),
  27. onPressed: () =>
  28. Get.to(MyNote(index: index))),
  29. IconButton(
  30. icon: Icon(Icons.delete),
  31. onPressed: () {
  32. Get.defaultDialog(
  33. title: ‘Delete Note’,
  34. middleText: nc.notes[index].title,
  35. onCancel: () => Get.back(),
  36. confirmTextColor: Colors.white,
  37. onConfirm: () {
  38. nc.notes.removeAt(index);
  39. Get.back();
  40. });
  41. })
  42. ])),
  43. )
  44. ),
  45. );
  46. }
  47. return SafeArea(
  48. child: Scaffold(
  49. backgroundColor: Colors.white,
  50. appBar: AppBar(
  51. centerTitle: true,
  52. title: Text(‘Todo App’),
  53. ),
  54. floatingActionButton: FloatingActionButton(
  55. child: Icon(Icons.add),
  56. onPressed: () {
  57. Get.to(MyNote());
  58. },
  59. ),
  60. body: Container(
  61. child: Padding(
  62. padding: EdgeInsets.all(5),
  63. child: getNoteList()),
  64. )));
  65. }
  66. }

REFERENCE:https://www.c-sharpcorner.com/article/an-introduction-to-programming-through-cpp/

--

--