Overview to implement a How to make the To-do list in the flutter.
In this blog, we are going to learn about How to make the To-do list in the flutter. We will cover the implementation of the to-do in this blog. So let’s get started.
So, Firstly, all steps to implement the list
For that first, we have to prepare a main. dart file located in the lib directory
And finally, you have to use all the widgets for making the to-do list.
Read more about the Flutter app development company.
Let’s understand this with an example.
1.) At the very first, main. dart file we have our main function.
We use the name of the Stateless widgets are the widgets that don’t change i.e. they are immutable. Its appearance and properties remain unchanged throughout the lifetime of the widget.
Now, To create a Stateless widget, we have to override the build() method as implemented in the code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import 'package:flutter/material.dart'; void main() => runApp(new TodoDemoListApp()); // Every component in Flutter is a widget, even the whole app itself class TodoDemoListApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( debugShowCheckedModeBanner: false, title: 'To-do List Demo', home: new TodoList() ); } } |
2.) Here we include to implement the stateful widget.
we need to implement a stateful widget. For a to-do list application, the list will be constantly modified.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import 'package:flutter/material.dart'; void main() => runApp(new TodoDemoListApp()); // Every component in Flutter is a widget, even the whole app itself class TodoDemoListApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( debugShowCheckedModeBanner: false, title: 'To-do List Demo', home: new TodoList() ); } } class TodoList extends StatefulWidget { @override createState() => new TodoDemoListState(); } |
3.) Now do add the TodoDemoListState class definition.
For this, inside this class, create “todoItemsArrayList” in which we add the task if the user actually entered something. Putting the code “setState” which tells the app that our state has changed and it will automatically re-render the list.
Next, We add the “deleteToDoListItem” in which we remove the content which is already completed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
class TodoDemoListState extends State<TodoList> { List<String> todoItemsArrayList = []; void TodoItemListAdd(String task) { // Only add the task if the user actually entered something if(task.length > 0) { // Putting our code inside "setState" tells the app that our state has changed, and // it will automatically re-render the list setState(() => todoItemsArrayList.add(task)); } } void deleteTodoListItem(int index) { setState(() => todoItemsArrayList.removeAt(index)); } void onTapDeleteTodoItem(int index) { showDialog( context: context, builder: (BuildContext context) { return new AlertDialog( title: new Text('List item "${todoItemsArrayList[index]}" is completed?'), actions: <Widget>[ new FlatButton( child: new Text('CANCEL'), // The alert is actually part of the navigation stack, so to close it, we // need to pop it. onPressed: () => Navigator.of(context).pop() ), new FlatButton( child: new Text('COMPLETED'), onPressed: () { deleteTodoListItem(index); Navigator.of(context).pop(); } ) ] ); } ); } // Build the whole list of todo items Widget AppBarBuildTodoList() { return new ListView.builder( itemBuilder: (context, index) { if(index < todoItemsArrayList.length) { return buildSingleTodoItem(todoItemsArrayList[index], index); } }, ); } // Build a single todo item Widget buildSingleTodoItem(String todoText, int index) { return new ListTile( title: new Text(todoText), onTap: () => onTapDeleteTodoItem(index) ); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Todo List') ), body: AppBarBuildTodoList(), floatingActionButton: new FloatingActionButton( onPressed: newAddTodoScreen, tooltip: 'Do Add task', child: new Icon(Icons.add) ), ); } void newAddTodoScreen() { // Push this page onto the stack Navigator.of(context).push( // MaterialPageRoute will automatically animate the screen entry, as well as adding // a back button to close it new MaterialPageRoute( builder: (context) { return new Scaffold( appBar: new AppBar( title: new Text('Add a new task') ), body: new TextField( autofocus: true, onSubmitted: (val) { TodoItemListAdd(val); Navigator.pop(context); // Close the add todo screen }, decoration: new InputDecoration( hintText: 'Enter list to do...', contentPadding: const EdgeInsets.all(16.0) ), ) ); } ) ); } } |
We can now run the app in which the to-do list implemented.
Finally, we have implemented the code part of the To-Do list.
You can also check these links.
Another mentioned URL.
