TodoList App 만들기

Flutter

TodoList App 만들기

2주녘 2024. 3. 21. 10:31

🚩TodoList App 만들기 목표
1. 폴더 구조 잡기
2. main 파일 만들어 보기
3. Model 클래스 생성해보기
4. View 만들어 보기
5. ViewModel 만들어 보기
6. view(todo_list_view.dart) 에 데이터 분리 하기

1. 프로젝트 구조 구성하기

2. main.dart 코드 작성하기

import 'package:flutter/material.dart';

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

class TodoApp extends StatelessWidget {
  const TodoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(title: const Text("TodoList"),),
          body: Center(
            child: Text("My Todo"),
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:my_todo_mvvm/views/todo_list_view.dart';

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

class TodoApp extends StatelessWidget {
  const TodoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(title: const Text("TodoList"),),
          body: TodoListView(),
        ),
      ),
    );
  }
}

3. Model 클래스 생성해보기

/models/todo_item.dart 파일 생성하기

// Model
class TodoItem {
  String title;
  bool isDone;

  TodoItem({required this.title, this.isDone = false});
}

4. view 만들어 보기

/views/todo_list_view.dart 파일 생성하기 (1단계)

import 'package:flutter/material.dart';


// View 클래스 

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

  @override
  State<TodoListView> createState() => _TodoListViewState();
} // end of TodoListView class


class _TodoListViewState extends State<TodoListView> {

  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'Enter todo item...',
              suffix: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                 setState(() {
                   // build() 메서드 재 호출
                   _controller.clear();
                 });

                },
              )
            ),
          ),


        ],
      ),
    );
  }
} // end of _TodoListViewState

TextEditingController는 TextField 위젯에서 사용자 입력을 관리하는데 사용되는 클래스입니다. 이를 통해 TextField에서 사용자가 입력한 값에 접근하거나, TextField의 값을 변경하거나, TextField를 초기화하는 등 다양한 작업을 수행할 수 있습니다.

입력값 접근:
- *TextEditingController*는 _controller.text 프로퍼티를 통해 현재 **TextField*에 입력된 값을 가져올 수 있습니다. 사용자가 **TextField*에 입력한 내용을 가져와서 로직에 활용하거나 다른 곳에 표시할 수 있습니다.
입력값 변경:
- *_controller.text = 'newValue'*와 같이 **TextEditingController*의 text 프로퍼티를 통해 **TextField*의 값을 프로그래밍 방식으로 변경할 수 있습니다.
입력값 초기화:
- *TextEditingController*의 clear 메서드를 사용하여 **TextField*의 내용을 쉽게 지울 수 있습니다. 이 기능은 사용자가 입력을 완료한 후 입력 필드를 초기화할 때 유용합니다.
입력 변경 감지:
- *TextEditingController*에 리스너를 추가하여 **TextField*의 값이 변경될 때마다 알림을 받을 수 있습니다. 이를 통해 입력값이 변경될 때 특정 동작을 수행하도록 설정할 수 있습니다.

화면 만들기 2단계

import 'package:flutter/material.dart';
import 'package:my_todo_mvvm/models/todo_item.dart';

// View 클래스

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

  @override
  State<TodoListView> createState() => _TodoListViewState();
} // end of TodoListView class

class _TodoListViewState extends State<TodoListView> {
  final TextEditingController _controller = TextEditingController();

  // 샘플 데이터 만들어 보기
  List<TodoItem> _todoItems = [
    TodoItem(title: '플러터 공부하기', isDone: false),
    TodoItem(title: '낮잠 자기', isDone: true),
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'Enter todo item...',
              suffix: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  setState(() {
                    // build() 메서드 재 호출
                    _controller.clear();
                  });
                },
              ),
            ),
          ),
          //
          Expanded(
            child: ListView.builder(
              itemCount: _todoItems.length,
              itemBuilder: (context, index) {
                var item = _todoItems[index];
                // 두개의 인수 값을 받아서 위젯을 리턴 시키면 된다.
                return ListTile(
                  title: Text(item.title),
                  trailing: Checkbox(
                    value: item.isDone,
                    onChanged: (value) {
                      print("value : ${value}");
                      setState(() {
                        _todoItems[index].isDone = value ?? false;
                      });
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
} // end of _TodoListViewState

ViewModel 만들기

// ViewModel
import 'package:my_todo_mvvm/models/todo_item.dart';

class TodoListViewModel {

  // 화면 사용될 데이터
  List<TodoItem> _items = []; // private

  // get 메서드 만들어 주기
  List<TodoItem> get items => _items;

  // 리스트에 TodoItem 객체를 추가하는 메서드 만들기
  void addItem(String title) {
    _items.add(TodoItem(title: title, isDone: false));
  }

  void toggleItem(TodoItem todo) {
    todo.isDone = !todo.isDone;
  }

}

todo_list_view.dart 수정

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_todo_mvvm/models/todo_item.dart';
import 'package:my_todo_mvvm/view_models/todo_list_view_model.dart';

// View 클래스

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

  @override
  State<TodoListView> createState() => _TodoListViewState();
} // end of class

class _TodoListViewState extends State<TodoListView> {

  final TextEditingController _controller = TextEditingController();
  final TodoListViewModel listViewModel = TodoListViewModel();





  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'Enter Todo Item',
              suffix: IconButton(
                icon: Icon(Icons.add),
                onPressed: (){
                  setState(() {
                    listViewModel.addItem(_controller.text);
                    _controller.clear();
                  });
                },
              )
            ),
          ),
          //
          Expanded(
            child: ListView.builder(
              itemCount: listViewModel.items.length,
              itemBuilder: (context, index){
                var item = listViewModel.items[index];
                // 두개 인수값을 받아서 위젯을 리턴
                return ListTile(
                  title: Text(item.title),
                  trailing: Checkbox(
                    value: item.isDone,
                    onChanged: (value) {
                      print('value : ${value}');
                      setState(() {
                        listViewModel.toggleItem(item);
                      });
                    },
                  ),
                );
            },),
          )

        ],
      ),
    );
  }
} // end of _TodoListViewState

저작자표시 비영리 변경금지 (새창열림)