Updated 28 April 2023
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.
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() ); } } |
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(); } |
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) ), ) ); } ) ); } } |
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.