Code explanation for Todo app.

1. Importing Required Packages

import 'package:flutter/material.dart';

 This imports the Flutter library, which includes all the tools needed to create a user interface (UI) like
buttons, text fields, and layouts.

2. Starting the App

void main() {
runApp(const TodoApp());
}

 main() is the entry point of the app. It’s the first function that runs when the app starts.
 runApp() launches the app and takes a widget as an argument (here, TodoApp).
 const TodoApp() means TodoApp is a widget that does not change.

3. Creating the Main App Structure

class TodoApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'To-Do List',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const TodoListScreen(),
);
}
}

1. Class Declaration:
o TodoApp is a stateless widget, meaning it doesn’t change once created.
2. build() Method:
o Describes how the UI looks.
3. What it does:
o MaterialApp: A wrapper for the whole app.
 debugShowCheckedModeBanner: false: Removes the "debug" banner on the top right.
 title: Sets the app's name.
 theme: Defines the app's colors and styles (e.g., blue as the primary color).
 home: Sets the first screen of the app, which is TodoListScreen.

4. Creating the Main To-Do Screen

@override
_TodoListScreenState createState() => _TodoListScreenState();
}

1. Stateful Widget:
o TodoListScreen is a stateful widget, meaning its content can change dynamically (e.g., when
tasks are added or removed).
2. createState():
o Connects the widget to its state logic, which is managed in _TodoListScreenState.

5. Managing the To-Do List State

class _TodoListScreenState extends State<TodoListScreen> {

1. _tasks:
o A list to store tasks. Initially, it’s empty ([]).
2. _taskController:
o A controller to manage the text input (what the user types in the input box).

6. Adding a Task

void _addTask() {
if (_taskController.text.isNotEmpty) {
setState(() {
_tasks.add(_taskController.text);
_taskController.clear();
});
}
}

1. _addTask():
o Adds a task to the _tasks list.
o if (_taskController.text.isNotEmpty): Only adds if the input box is not empty.
o setState(): Updates the screen to reflect changes (adds the task).
o _taskController.clear(): Clears the input box after adding a task.

7. Deleting a Task

void _deleteTask(int index) {

8. Building the To-Do Screen Layout

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('To-Do List'),
centerTitle: true,
),
body: Column(
children: [

1. Scaffold:
o The main structure of the app screen.
o appBar: Adds a top bar with a title.
2. body:
o Contains all the main content of the app, arranged in a column (stacked vertically).

9. Input Box and Add Button

Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _taskController,
decoration: const InputDecoration(
labelText: 'Enter a task',
border: OutlineInputBorder(),
),
),
),
const SizedBox(width: 10),
ElevatedButton(
onPressed: _addTask,
child: const Text('Add'),
),
],
),
),

1. Padding:
o Adds space around the input box and button.
2. Row:
o Arranges the input box and button side by side.
3. TextField:
o The box where users type their tasks.
o controller: _taskController: Reads what the user types.
 4. ElevatedButton:
o A button labeled "Add".
o onPressed: _addTask: Calls the _addTask() function when clicked.

10. Displaying the Task List

Expanded(
child: _tasks.isEmpty
? const Center(
child: Text(
'No tasks yet. Add some!',
style: TextStyle(fontSize: 18),
),
)
: ListView.builder(
itemCount: _tasks.length,
itemBuilder: (context, index) {
return Card(
margin: const EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
child: ListTile(
title: Text(_tasks[index]),
trailing: IconButton(
icon: const Icon(Icons.delete, color: Colors.red),
onPressed: () => _deleteTask(index),
),
),
);
},
),
),

1. Expanded:
o Makes the list take up all the remaining screen space.
2. If List is Empty:
o Shows the message: "No tasks yet. Add some!".
3. If List has Tasks:
o ListView.builder: Dynamically creates a scrollable list.
o itemCount: _tasks.length: Determines how many tasks to display.
o itemBuilder: Defines how each task looks.
 Card: Adds a nice visual frame around each task.
 ListTile: Displays the task text with a delete button.