Todo 어플 남의 코드 읽기 연습 1

출처 -[플러터] Todo-App 만들기 (velog.io)

[플러터] Todo-App 만들기

 

 

1. 함수 읽기 

todo어플도 상태값이 변하니까 Sateful 위젯을 사용 

todoApp stateful 상속 위젯 생성 

"+ "아이콘을 앱바에 생성 -> 클릭 하면 다이얼로그 showDialog(); -> return값 AlertDialog 2칸의 텍스트필드 -> (hint)1. 글 제목, 2. 글 내용  입력 

 

저장하기 

Todo class 생성 

위와 같이 클래스를 만들어 주자 final을 통해 title, description 을 선언하고, Todo클래스의 생성자를 생선한다. 

Todo 클래스를 만드는 이유는 TextField에서 입력받은 값들을 저장하기 위해 만든 것

 

 

 

 

2. 디자인 읽기 

 

전체적인 리스트 뷰 

Inkwell 클릭이벤트 만들어주기 

 

 

 

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const todoApp(),
    );
  }
}

class Todo {
  final String title;
  final String description;

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

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

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

class _todoApp extends State<todoApp> {
  String title = "";
  String description = "";

  List<Todo> todos = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Image.asset("assets/avartar.jpeg", fit: BoxFit.fill),
        title: Text("todo - list"),
        actions: [
          IconButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (_) {
                    return AlertDialog(
                      title: const Text('나의 할일'),
                      actions: [
                        TextField(
                          onChanged: (value) {
                            setState(() {
                              title = value;
                            });
                          },
                          decoration: InputDecoration(hintText: "글 제목"),
                        ),
                        TextField(
                          onChanged: (value) {
                            setState(() {
                              description = value;
                            });
                          },
                          decoration: InputDecoration(hintText: "글 내용"),
                        ),
                        Center(
                            child: ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                  setState(() {
                                    todos.add(Todo(
                                        title: title,
                                        description: description));
                                  });
                                },
                                child: Text(" 추가 하기")))
                      ],
                    );
                  },
                );
              },
              icon: Icon(Icons.add))
        ],
      ),
      body: ListView.builder(
        itemBuilder: (_, index) {
          return InkWell(
            child: ListTile(
              title: Text(todos[index].title),
              subtitle: Text(todos[index].description),
            ),
          );
        },
        itemCount: todos.length,
      ),
    );
  }
}