“`html

How to Build a Simple To-Do App Using Flutter

How to Build a Simple To-Do App Using Flutter

Are you looking to dive into the world of mobile app development but don’t know where to start? Perhaps you’ve heard about Flutter, Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. If so, you’re in the right place! This comprehensive guide will walk you through the process of how to build to-do app from scratch using Flutter. No prior experience is necessary, although a basic understanding of programming concepts will be helpful. By the end of this tutorial, you’ll have a fully functional to-do app that you can proudly showcase, and a solid foundation for further Flutter development.

Why Flutter for Building Mobile Apps?

Flutter offers numerous advantages for mobile app development, making it a popular choice among developers:

Cross-Platform Development: Write code once and deploy it on both iOS and Android platforms.
Hot Reload: See changes instantly without restarting the app, accelerating the development process.
Rich Set of Widgets: Flutter provides a vast collection of pre-designed widgets for creating stunning UIs.
Native Performance: Flutter apps are compiled to native ARM code, ensuring excellent performance.
Growing Community: A large and active community provides ample support and resources.

Prerequisites

Before we begin, make sure you have the following installed:

Flutter SDK: Download and install the Flutter SDK from the official Flutter website. Flutter Installation Guide
Android Studio or VS Code: Choose your preferred IDE for Flutter development. Android Studio is a comprehensive IDE, while VS Code is a lightweight and popular option.
Flutter and Dart Plugins: Install the Flutter and Dart plugins for your chosen IDE.
Emulator or Physical Device: You’ll need an Android emulator, iOS simulator, or a physical device to run your app.

Setting Up Your Flutter Project

Let’s start by creating a new Flutter project:

Open your terminal or command prompt.
Navigate to the directory where you want to create your project.
Run the following command:

flutter create todo_app

This command will create a new Flutter project named todo_app. Once the project is created, navigate into the project directory:

cd todo_app

Understanding the Project Structure

The Flutter project structure might seem intimidating at first, but it’s quite organized. The most important directories and files are:

lib/main.dart: This is the entry point of your Flutter application.
pubspec.yaml: This file contains metadata about your project, including dependencies and assets.
android/: Contains the Android-specific code.
ios/: Contains the iOS-specific code.

We’ll primarily be working with the lib/main.dart file in this tutorial.

Building the UI: Basic Structure

Open the lib/main.dart file in your IDE. Replace the existing code with the following:


 import 'package:flutter/material.dart';

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

 class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

 class TodoListScreen extends StatefulWidget {
  const TodoListScreen({Key? key}) : super(key: key);

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

 class _TodoListScreenState extends State<TodoListScreen> {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
  title: const Text('To-Do List'),
  ),
  body: const Center(
  child: Text('Your To-Do List will appear here!'),
  ),
  floatingActionButton: FloatingActionButton(
  onPressed: () {
  // TODO: Add a new to-do item
  },
  child: const Icon(Icons.add),
  ),
  );
  }
 }

Let’s break down this code:

We import the material.dart package, which provides the necessary widgets for building a Material Design UI.
The main() function is the entry point of our application. It calls runApp() to start the Flutter app.
MyApp is a stateless widget that defines the root of our application. It sets the title and theme of the app.
TodoListScreen is a stateful widget that represents the main screen of our to-do app. It contains the to-do list and a button to add new items.
We use a Scaffold widget to provide a basic layout structure with an AppBar, body, and FloatingActionButton.

Implementing the To-Do List

Now, let’s implement the core functionality of our build to-do app: displaying and managing the to-do items.

Add a list to store the to-do items:


 class _TodoListScreenState extends State<TodoListScreen> {
  List<String> _todoItems = [];

  // ... rest of the code
 }

Modify the body of the Scaffold to display the list of to-do items using a ListView.builder:


 body: ListView.builder(
  itemCount: _todoItems.length,
  itemBuilder: (context, index) {
  return ListTile(
  title: Text(_todoItems[index]),
  );
  },
 ),

Now your _TodoListScreenState class should look like this:


 class _TodoListScreenState extends State<TodoListScreen> {
  List<String> _todoItems = [];

  @override
  Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
  title: const Text('To-Do List'),
  ),
  body: ListView.builder(
  itemCount: _todoItems.length,
  itemBuilder: (context, index) {
  return ListTile(
  title: Text(_todoItems[index]),
  );
  },
  ),
  floatingActionButton: FloatingActionButton(
  onPressed: () {
  // TODO: Add a new to-do item
  },
  child: const Icon(Icons.add),
  ),
  );
  }
 }

At this point, you won’t see anything in the list because it’s currently empty. We’ll add functionality to add items next.

Adding New To-Do Items

To allow users to add new to-do items, we’ll implement a dialog box with a text field. Follow these steps:

Create a function to display the dialog box:


 void _addTodoItem(String task) {
  setState(() {
  _todoItems.add(task);
  });
 }

 Future<String?> _displayDialog(BuildContext context) async {
  String? task;
  return showDialog<String>(
  context: context,
  builder: (BuildContext context) {
  return AlertDialog(
  title: const Text('Add a new to-do item'),
  content: TextField(
  autofocus: true,
  onChanged: (value) {
  task = value;
  },
  decoration: const InputDecoration(hintText: 'Enter task here'),
  ),
  actions: <Widget>[
  TextButton(
  child: const Text('Cancel'),
  onPressed: () {
  Navigator.of(context).pop();
  },
  ),
  TextButton(
  child: const Text('Add'),
  onPressed: () {
  Navigator.of(context).pop(task);
  },
  ),
  ],
  );
  },
  );
 }

Update the onPressed method of the FloatingActionButton to call the _displayDialog function and add the new item to the list:


 floatingActionButton: FloatingActionButton(
  onPressed: () async {
  final task = await _displayDialog(context);
  if (task != null && task.isNotEmpty) {
  _addTodoItem(task);
  }
  },
  child: const Icon(Icons.add),
 ),

The _displayDialog function shows an AlertDialog with a TextField. When the user enters a task and presses “Add,” the task is returned. The FloatingActionButton then adds the new task to the _todoItems list using setState to rebuild the UI.

Removing To-Do Items

Now, let’s add the ability to remove to-do items from the list. We’ll use a Dismissible widget for this:

Wrap the ListTile with a Dismissible widget:


 itemBuilder: (context, index) {
  return Dismissible(
  key: Key(_todoItems[index]),
  onDismissed: (direction) {
  setState(() {
  _todoItems.removeAt(index);
  });
  ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('${_todoItems[index]} dismissed')));
  },
  background: Container(color: Colors.red),
  child: ListTile(
  title: Text(_todoItems[index]),
  ),
  );
  },

The Dismissible widget allows the user to swipe an item to dismiss it. The onDismissed callback is called when the item is dismissed. We then remove the item from the _todoItems list and show a snackbar to confirm the deletion.

Complete Code

Here’s the complete code for the build to-do app:


 import 'package:flutter/material.dart';

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

 class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

 class TodoListScreen extends StatefulWidget {
  const TodoListScreen({Key? key}) : super(key: key);

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

 class _TodoListScreenState extends State<TodoListScreen> {
  List<String> _todoItems = [];

  void _addTodoItem(String task) {
  setState(() {
  _todoItems.add(task);
  });
  }

  Future<String?> _displayDialog(BuildContext context) async {
  String? task;
  return showDialog<String>(
  context: context,
  builder: (BuildContext context) {
  return AlertDialog(
  title: const Text('Add a new to-do item'),
  content: TextField(
  autofocus: true,
  onChanged: (value) {
  task = value;
  },
  decoration: const InputDecoration(hintText: 'Enter task here'),
  ),
  actions: <Widget>[
  TextButton(
  child: const Text('Cancel'),
  onPressed: () {
  Navigator.of(context).pop();
  },
  ),
  TextButton(
  child: const Text('Add'),
  onPressed: () {
  Navigator.of(context).pop(task);
  },
  ),
  ],
  );
  },
  );
 }

  @override
  Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
  title: const Text('To-Do List'),
  ),
  body: ListView.builder(
  itemCount: _todoItems.length,
  itemBuilder: (context, index) {
  return Dismissible(
  key: Key(_todoItems[index]),
  onDismissed: (direction) {
  setState(() {
  _todoItems.removeAt(index);
  });
  ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('${_todoItems[index]} dismissed')));
  },
  background: Container(color: Colors.red),
  child: ListTile(
  title: Text(_todoItems[index]),
  ),
  );
  },
  ),
  floatingActionButton: FloatingActionButton(
  onPressed: () async {
  final task = await _displayDialog(context);
  if (task != null && task.isNotEmpty) {
  _addTodoItem(task);
  }
  },
  child: const Icon(Icons.add),
  ),
  );
  }
 }

Running the App

Now that you’ve completed the code, you can run the app on an emulator or a physical device. To run the app, execute the following command in your terminal:

flutter run

This command will build and run the app on your connected device or emulator. You should now be able to add, view, and remove to-do items!

Further Enhancements

Congratulations on building your first Flutter to-do app! Here are some ideas for further enhancements:

Persistence: Store the to-do items using a local database like SQLite or shared preferences so they are not lost when the app is closed.
Due Dates: Add the ability to set due dates for each to-do item.
Categories: Allow users to categorize their to-do items.
UI Improvements: Enhance the UI with better styling and animations.
Testing: Write unit and integration tests to ensure the app’s reliability.

Conclusion

This tutorial provided a step-by-step guide on how to build to-do app using Flutter. You’ve learned about Flutter’s basic widgets, state management, and how to handle user input. With this knowledge, you can now start building more complex and feature-rich mobile applications. Remember to practice and explore Flutter’s extensive documentation and community resources to further expand your skills. Happy coding!

“`

Was this helpful?

0 / 0

Sorting by

How to build a simple to-do app using Flutter