[#. flutter] Flutter로 Todo 앱 만들기 model 생성, provider 패키지 설치하기 2

 

 

 

 

 

 

 

developer0809.tistory.com/124

[#. flutter] Flutter로 Todo 앱 만들기, 설치 및 시작하기 1

 

이어서 진행하겠다

나는 프로젝트명을 flutter_todo로 생성했고

아래 코드에서 flutter_todo가 들어가는 곳에 본인이 생성한 프로젝트명을 입력해야 한다는 것을 주의하자 

 

 

 

 

 

 

 

 

 

 

① 프로젝트명/lib/main.dart

 

import 'package:flutter/material.dart';

void main() {
  runApp(TodoListApp());
}

class TodoListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo list',
      home: Scaffold(
        appBar: AppBar(title: Text("Todo list"),),
      ),
    );
  }
}

 

 

 

 

main.dart 파일을 저렇게 수정하면 앱 화면 상단 타이틀이 바뀌는 것을 확인할 수 있다

 

 

 

 

 

② 프로젝트명/lib/state/todo_model.dart 생성

 

import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:flutter_todo/model/todo.dart';

class TodoModel extends ChangeNotifier {
  final List<Todo> _todos = [
    Todo(id: 1, title: "First Todo", description: "My first todo"),
    Todo(id: 2, title: "Second todo", description: "My second todo")
  ];

  UnmodifiableListView<Todo> get todos => UnmodifiableListView(_todos);

  void add(Todo todo) {
    _todos.add(todo);
    notifyListeners();
  }
  
  void toggleDone(int id) {
    var index = _todos.indexWhere((element) => element.id == id);
    _todos[index].isDone = !_todos[index].isDone;
    notifyListeners();
  }
  void remove(int id) {
    _todos.removeWhere((element) => element.id == id);
    notifyListeners();
  }
}

 

 

 

 

 

③ 프로젝트명/lib/model/todo.dart 생성

 

모델을 생성해 보자

lib 하위에 model 폴더를 생성하고 todo.dart 파일을 생성한다

 

class Todo {
  int id;
  String title;
  String description;
  bool isDone;

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

 

 

 

 

 

④ provider 패키지 설치 

 

데이터 공유나 로직의 분리를 좀 더 간단히 할 수 있는 패키지

클래스가 하나의 역할만 하도록 클래스를 나눠야 하는데 이를 위해 사용하고,

하나의 데이터를 여러 페이지에서 공유하고 싶을 때 사용한다

 

프로젝트명/pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  provider: 4.3.1	// 추가

 

 

프로젝트 폴더 위치 터미널에서 명령어 실행해서 패키지를 설치해 준다

 

flutter pub get

 

 

 

 

 

⑤ 프로젝트명/lib/main.dart 수정

 

import 'package:provider/provider.dart';	// 추가
import 'package:flutter_todo/state/todo_model.dart';	// 추가

void main() {	// 수정	
  runApp(
    ChangeNotifierProvider(
      create: (context) => TodoModel(),
      child: TodoListApp(),
    ),
  );
}

class TodoList extends StatelessWidget {	// 추가
  @override
  Widget build(BuildContext context) {
    return Consumer<TodoModel>(
        builder: (context, todoList, child) => ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: todoList.todos.length,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 50,
                child: Center(child: Text(todoList.todos[index].title)),
              );
            }));
  }
}

class TodoListApp extends StatelessWidget {	// 수정
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo list',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Todo list"),
        ),
        body: TodoList(),
      ),
    );
  }
}

 

 

flutter run

 

 

 

 

 

 

 

이렇게 뜨면 잘 따라한 게 맞다

 

 

 

 

 

 

이 글을 참고했다

medium.com/swlh/building-a-todolist-in-flutter-ed3f1d927658

Building a TodoList in Flutter