Flutter ToDo: Создаём приложение с нуля (Урок 8)

Создание нового проекта

Создайте новый проект в Android Studio:

1. Нажмите Create New Flutter Project.
2. Выберите Flutter application.
3. Укажите SDK (SDK уже должен быть выбран).
4. Нажмите Next.
5. Назовите проект (например, flutter_todo). Можно изменить организацию и имя пакета (например, com.example.flutter_todo). Дополнительные настройки не требуются.
6. Нажмите Finish.

Анализ файла main.dart

После создания проекта откроется основной файл (main.dart). Он содержит знакомые концепции: создание класса состояния, метод build, создание объектов. Новинка – передача данных непосредственно в класс.

Передача данных в класс осуществляется следующим образом: обращаемся к главной странице, указываем класс-обработчик и передаем значение, например, название проекта (title).

В классе получаем этот параметр и передаем его в родительский класс с помощью super:

// ...
class MyApp extends StatelessWidget {
  final String title;

  const MyApp({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title, // Передаем значение title в MaterialApp
      // ...
    );
  }
}

В классе состояния к этому полю можно обратиться через widget.title:

// ...
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // Выводим значение title
      ),
      // ...
    );
  }
}

Структура проекта и класс Home

Для удобства создайте новую папку pages в папке lib. В этой папке создайте файл home.dart с классом Home:

import 'package:flutter/material.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

Не забудьте импортировать material.dart и корректно указать путь к файлу при импорте. Например:

import 'package:flutter_todo/pages/home.dart'; // Замените flutter_todo на имя вашего проекта

Дизайн приложения

Удалите лишний код из main.dart и добавьте следующее:

runApp(MaterialApp(
  home: Home(),
  theme: ThemeData(
    primaryColor: Colors.deepOrange,
    accentColor: Colors.deepOrange,
  ),
));

В классе Home реализуйте следующий дизайн:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Список дел'),
      centerTitle: true,
      backgroundColor: Colors.grey[900],
    ),
    body: ListView.builder( // Используем ListView.builder для динамического списка
      itemCount: todoList.length,
      itemBuilder: (context, index) {
        return Dismissible( // Добавляем возможность удаления свайпом
          key: Key(todoList[index]),
          onDismissed: (direction) {
            setState(() {
              todoList.removeAt(index);
            });
          },
          child: Card(
            child: ListTile(
              title: Text(todoList[index]),
              trailing: IconButton( // Добавляем иконку корзины
                icon: Icon(Icons.delete, color: Colors.deepOrange),
                onPressed: () {
                  setState(() {
                    todoList.removeAt(index);
                  });
                },
              ),
            ),
          ),
        );
      },
    ),
    floatingActionButton: FloatingActionButton( // Добавляем плавающую кнопку
      onPressed: () => showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: const Text('Добавить элемент'),
          content: TextField(
            onChanged: (value) {
              userTodo = value;
            },
          ),
          actions: [
            TextButton(
              child: const Text('Добавить'),
              onPressed: () {
                setState(() {
                  todoList.add(userTodo);
                  userTodo = '';
                });
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      ),
      child: const Icon(Icons.add),
      backgroundColor: Colors.greenAccent,
    ),
  );
}

Добавление и удаление элементов

В методе initState добавьте начальные элементы в список todoList:

List<String> todoList = [];
String userTodo = ''; // Добавьте переменную для хранения вводимого текста

@override
void initState() {
  super.initState();
  todoList.addAll(['Buy milk', 'Wash dishes', 'Купить картошку']);
}

Теперь приложение позволяет добавлять и удалять элементы списка свайпом или кнопкой удаления.

Созданное приложение «Список дел» демонстрирует основные принципы работы с Flutter и Dart, включая работу с состоянием, создание динамических списков и использование различных виджетов.