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.

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()
    );
  }
}

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.

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();
}

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.

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)
                    ),
                  )
              );
            }
        )
    );
  }
}

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.

For more understanding please can go through this link:

That’s all, You can enjoy your To-DoList implementation in a flutter.

Thank you very much.

flutter

Priyanka Kumari

28 Apr, 2023
Updated by - Priyanka Kumari
30 Jun, 2021
Created by - Priyanka Kumari

. . .

How to make the To-do list in the flutter.

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.

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.

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.

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.

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.

For more understanding please can go through this link:

That’s all, You can enjoy your To-DoList implementation in a flutter.

Thank you very much.

Leave a Comment Cancel Reply

Message Sent!