[Practice] TodoList만들기

목표

TodoList를 만들어 기초적인 클래스의 구성과 데이터가 이동하는 방식을 이해한다.

---

import 'package:flutter/material.dart';

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

///5. 클래스를 만들어준다. 클래스의 생성자를 만든다는 것은 해당 내용을 받을 수 있는 그릇을 만드는 것이라고 해석하면 된다.
///즉, Textformfield에서 입력받은 글자들을 저장하기 위한 저장 그릇이다.
class Todo {
  final String title;
  final String description;

  Todo({required this.title, required this.description});
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

///1. todoApp의 상태는 변한다. 그러므로 Statefulwidget을 쓴다.
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo List',

      ///2. debugshow배너를 삭제한다.
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: const todoApp(),
    );
  }
}

///3. StatefulWidget을 상속받는 todoApp 클래스를 만든다.
class todoApp extends StatefulWidget {
  const todoApp({super.key});

  @override
  State<todoApp> createState() => _todoAppState();
}

class _todoAppState extends State<todoApp> {
  ///6. 변수를 선언한다. 변수를 선언한다는 것은 앞으로 이 내용을 사용할 것을 미리 알려주는 것이다.
  ///List 형식을 추가함으로써 어떠한 형태로 저장 될 것인지도 알려준다.
  ///빈문자열이 만들어졌다.

  String title = "";
  String description = "";

  List<Todo> todos = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("todolist"),
        actions: [
          IconButton(

              ///4. 할일을 추가할 수 있는 버튼을 만들어보자.
              onPressed: () {
                showDialog(
                    context: context,
                    barrierDismissible: true,
                    builder: (BuildContext ctx) {
                      return AlertDialog(
                        content: Text("Todo"),
                        actions: [
                          TextFormField(
                            ///7. 변화를 감지할 수 있는 onchanged를 사용한다
                            ///상태를 변화하여 UI에 표현하기 위한 것이 setState이다.
                            onChanged: (value) {
                              setState(() {
                                title = value;
                              });
                            },
                            decoration: InputDecoration(hintText: "title"),
                          ),
                          TextFormField(
                            onChanged: (value) {
                              setState(() {
                                description = value;
                              });
                            },
                            decoration: InputDecoration(hintText: "content"),
                          ),
                          Center(
                            child: ElevatedButton(
                                onPressed: () {
                                  ///9. Add버튼 입력 후 팝업창을 없애보자.
                                  Navigator.of(context).pop();

                                  ///7-1. elevatedbutton을 누를 시 todo list에 값을 추가할 수 있도록 한다.
                                  setState(() {
                                    todos.add(Todo(
                                        title: title,
                                        description: description));
                                  });
                                },
                                child: Text("Add")),
                          )
                        ],
                      );
                    });
              },
              icon: Icon(Icons.add))
        ],
      ),

      ///8. 이제 바디 부분을 만들어서 우리가 입력한 값들이 나타날 수 있도록 설정한다.
      ///Inkwell은 제스쳐 기능을 제공하지 않는 위젯을 이 위젯으로 감싸면 onTap()의 기능을 이용할 수 있다.
      body: ListView.builder(
        itemBuilder: (_, index) {
          return InkWell(
            child: ListTile(
              title: Text(todos[index].title),
              subtitle: Text(todos[index].description),
            ),
          );
        },
        itemCount: todos.length,
      ),
    );
  }
}


///참고1. https://velog.io/@hoha/플러터-Todo-App-만들기

실제 구동화면

 

다음에는 각 내용을 삭제할 수 있는 방법을 알아보자.