[Flutter] todo-list 프로젝트 구조

유튜브 동영상을 보고 삼일정도를 이용해 간단한 투두리스트 기능을 완성했다.

해당 글은 아래 링크에 넣어두겠다. 

복기할 겸 프로젝트 구조 분석과 코드 분석을 써볼 예정이다.

 

프로젝트 구조 분석

1) 전체 프로젝트

우선 가장 위에 있는 프로젝트 구조는 다음과 같다. 

내가 만든 flutter 프로젝트와 외부 라이브러리, 그리고 스크래치와 콘솔로 구성되어 있다. 

주로 작업하게 될 영역은 flutter 프로젝트이다. 

 

2) flutter 프로젝트 

flutter 프로젝트의 구조는 위와 같다. 굉장히 많은 것들이 있는데 이 중에서 우리가 자주 쓰는 친구는 lib 라이브러리이다. 

lib라이브러리안에는 기본으로 main.dart 파일이 들어있다.

이 main.dart파일을 주로 쓰며, 애뮬레이터를 실행할 때에도 항상 이 main.dart파일을 실행한다. 

 

나머지 constants, model, screens, widgets 라이브러리에 들어있는 dart파일들은 직접 만든 파일들이며,  

이 친구들을 include 해서 main.dart파일을 완성하게 된다. 

 

assets디렉터리안에는 images디렉터리를 만들었다. 

앞으로 필요한 이미지파일들은 이곳에 모아둘 것이다. 

 

3) External Libraries 

 

4) Scratches and Consoles

---

코드 분석

1) colors.dart

색깔과 관련된 다트파일이다. ( material.dart파일을 임포트한다. )

우리가 자주 쓰는 색들을 원하는 이름(ex. toRed)로 지정해두고 필요할때 이름으로 불러서 사용할 것이다.

이때 색은 바뀌는 속성이 아니므로 const한정자를 붙여준다. 

왼쪽 코드줄에 해당 색깔이 네모 박스 안에 나오므로 확인하자. 

 

2) todo.dart

기본으로 띄울 투두리스트가 들어있는 다트파일이다.

 

우선 ToDo라는 클래스를 선언하고, 속성으로 id, todoText, isDone을 만든다. 

각 투두리스트는 고유한 id와 텍스트, 일정이 끝났는지 유무가 필요하기 때문이다.

(이때 추후에 새로운 투두리스트를 만들거나, 끝난 투두리스트를 삭제할 때에도 id를 이용한다. )

---

//클래스 선언
class ToDo{
  //클래스의 멤버변수들
  String? id;
  String? todoText;
  bool isDone;

  //생성자(constructor)
  ToDo({
    required this.id,
    required this.todoText,
    this.isDone=false,
});

  static List<ToDo> todoList(){
    return[
      ToDo(id: '01', todoText: 'Morning Exercise', isDone: true),
      ToDo(id: '02', todoText: 'Buy Groceries', isDone: true),
      ToDo(id: '03', todoText: 'Check Emails', ),
      ToDo(id: '04', todoText: 'Team Meeting', ),
      ToDo(id: '05', todoText: 'Work on mobile apps for 2 hour',),
      ToDo(id: '06', todoText: 'Dinner with Jenny', ),
    ];
  }
}

• class ToDo{ } 

클래스를 선언한다. 클래스명은 대문자로 시작한다.

클래스는 멤버 변수와 멤버 함수를 가질 수 있다.

 

• String? id; String? todoText; bool isDone;

클래스의 멤버변수들이다. 

 

• ToDo({....});

생성자이다. 

....는 생성자의 바디부분이다.

this를 붙이면 dart에게 멤버변수임을 알릴 수 있다. 

 

•  static List<Todo> todoList(){ return[ ....]; } }

생성자 ToDo로 리스트값들을 만든다.

생성자 ToDo는 바로 위에 정의한 것처럼 id랑 todoText, isDone 속성 세가지를 갖는다.

• ToDo(id: '....' , todoText: '....', isDone: .....)

투두리스트 생성자로 각 리스트값들을 만든다. 

 

3) home.dart

길어져서 따로 글을 썼다. 링크는 아래에 첨부한다.

https://cococo-coding.tistory.com/138

[flutter/투두리스트 분석] home.dart 파일 구조 및 코드 분석

 

 

4) todo_item.dart

길어져서 따로 글을 썼다. 링크는 아래에 첨부한다.

https://cococo-coding.tistory.com/137

[flutter/투두리스트 분석] todo_list.dart 프로젝트 및 코드 분석

 

5) main.dart

기본적으로 애뮬레이터를 돌릴 때 이 main.dart가 실행된다. 

위 코드를 하나씩 분석해보겠다. 

 

전체 코드

//인포트할 다트파일들
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//home.dart는 colors.dart / todo_item.dart / todo_dart를 포함
import 'package:flutter_todolist_app/screens/home.dart';

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

//StatelessWidget: 변경상태가 필요하지 않은 위젯
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  //root of application
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.transparent)
    );
    return MaterialApp(
      debugShowCheckedModeBanner: false, //오른쪽 Debug 표시 없애기
      title: 'ToDo App',
      home: Home(),
    );
  }
}

위는 전체코드이며, 이제 각 부분으로 나누어서 분석해보겠다. 

---

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_todolist_app/screens/home.dart';

material.dart와 services.dart 파일을 인포트하고, 위에서 만들었던 다트파일들을 담고있는 home.dart 파일을 최종적으로 인포트한다. 

material.dart는 material design(MaterialApp())을 사용하기 위한 플러터의기본 패키지이다.

services.dart는 flutter앱에 노출된 플랫폼 서비스라고 하는데, 확실하게는 잘 모르겠다. 

home.dart 는 todo. dart + colors.dart + todo_item.dart 를 인포트하고 있다. 

즉, 우리가 만들었던 세 개의 다트파일이 home.dart에 들어가있고 우리는 최종적으로 이 home.dart파일만을 건네받는다.) 

 

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

모든 프로그램과 같이 처음에는 main문을 실행한다.

runApp은 widget Tree의 Root를 형성하는 widget을 argument로 받는다.

그리고 해당 widget을 확장해 화면 전체를 채운다. 

여기서는 MyApp()이라는 위젯으로 화면을 채운다. 

 

 

---

//MyApp이라는 클래스가 StatelessWidget속성을 상속받는다.
//statelesswidget: 변경상태가 필요하지 않은 위젯
class MyApp extends StatelessWidget {
  //key는 위젯상태를 보존할 때 쓰인다. 
  const MyApp({super.key});
  
  //root of application
  //MyApp이 widget build를 재정의한다. (메소드 오버라이드) 
  @override
  Widget build(BuildContext context) {
    //SystemChrome클래스는 운영체제 그래픽 인터페이스의 특정측면과 애플리케이션과 상호작용하는 방식을 제어한다.
    //생성자는 SystemChrome()이다.
    
    //setSystemUIOverlayStyle는 해당클래스의 정적메소드로, 시스템오버레이에 사용할 스타일을 지정한다.
    //아래 형식으로 쓴다. 
    //void setStstemUIOverlayStyle(
    //	SystemUiOverlayStyle style
    //) 
    
    //statusBarColor: 는 상단상태 표시줄의 색상이다. 안드로이드버전 m이상에서만 지원된다. 
    //transparent는 투명색상이다. 0x00000000로 구현가능하다. 
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.transparent)
    );
    
    //debugShowCheckedModeBanner: 디버크모드에서 작은 "DEBUG"배너로 앱이 디버크 모드에 있음을 나타냄.
    //기본으로 켜져있으며, 기능을 끄려면 생성자인수를 false로 설정한다.
    
    //tile: title클래스로 운영체제에서 이 앱을 설명하는 위젯이다.
    //home: 앱의 기본경로를 설정하는 위젯이다. 
    return MaterialApp(
      debugShowCheckedModeBanner: false, //오른쪽 Debug 표시 없애기
      title: 'ToDo App',
      home: Home(),
    );
  }
}

---

출처: https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html 

StatelessWidget class - widgets library - Dart API

출처: https://fronquarry.tistory.com/20

[flutter] 플러터 위젯 Key 쓰는 이유, Key 종류

출처:  https://velog.io/@1984/Flutter-%EA%B8%B0%EB%B3%B8-%EC%98%88%EC%A0%9C-%EC%84%A4%EB%AA%85-%EB%B0%8F-%ED%95%B4%EC%84%A4

Flutter : 기본 예제 설명 및 해설