(Flutter Study) Hello Flutter

컴퓨터 비전공자 Product Manager의 프로그래밍 공부

노마드 코더(Nomad Coders) 강의 필기 노트

강의 정보: Flutter 로 웹툰 앱 만들기 (https://nomadcoders.co/flutter-for-beginners)

---

앞선 Flutter에서 사용하는 언어인 DART 에대해서 수강을 완료하고, 본격적으로 Flutter에 대해서 배우는 강의이다. dart에 대한 기초 없이 바로 flutter를 시작하는 것은 강사는 추천하지 않는다. 기본적인 dart에 대한 이해가 필요하며, 앞선 강의에서 flutter를 위한 최소한의 내용을 다루어서 부담없이 강의를 수강할 수 있었다.

Dart와 Flutter가 무엇인지는 과거 포스팅한 아래 글 참고

2023.05.25 - [PM 기술스터디] - PM스터디 - Flutter(플러터)와 DART(다트)

PM스터디 - Flutter(플러터)와 DART(다트)

---

Flutter를 위한 Dart 강의 필기 노트

• 2023.06.24 - [PM 기술스터디] - (Flutter Study) Dart 언어 - Variables
• 2023.06.24 - [PM 기술스터디] - (Flutter Study) Dart 언어 - DATA TYPES
• 2023.06.28 - [PM 기술스터디] - (Flutter Study) DART 언어 - Functions
• 2023.06.29 - [PM 기술스터디] - (Flutter Study) DART 언어 - Class.1
• 2023.07.04 - [PM 기술스터디] - (Flutter Study) DART 언어 - Class.2

(Flutter Study) Dart 언어 - Variables

(Flutter Study) Dart 언어 - DATA TYPES

(Flutter Study) DART 언어 - Functions

(Flutter Study) DART 언어 - Class.1

(Flutter Study) DART 언어 - Class.2

---

Hello Flutter

Flutter study - Hello Flutter

class의 이름은 App

App은 일반 class였는데 이걸 widget으로 바꿔주기 위해 flutter의 core widget중 하나인 StatelessWidget을 상속 받았다. 아주 기초적인 widget이고 화면에 뭔가를 띄워주는 것 말고는 하는일이 없다. 

Widget이 된다는 건, 계약을 맺는 것이다. 그 계약은 바로 build 메소드(method)를 구현해야 하는 것. 이 build 메소드는 또 다른 widget을 return 해야 한다. build 메소드에는 context라는 argument를 볼 수 있는데, 이것의 타입은 BuildContext이다(이건 일단 지금은 무시).  

그리고 이 App widget이 우리 앱을 시작할 때 뜨는 첫번째 widget이기 때문에 이게 우리 앱의 root라고 할 수 있다.

root는 Material 디자인(MaterialApp)과 iOS 디자인 중 하나를 반드시 선택해야 한다. 이 케이스에서는 Material 디자인을 선택했다 (flutter는 구글에서 만들었기 때문에 구글 디자인을 선택하는게 추후 이점이 많음). 그래서 App Widget의 build 메소드가 MaterialApp Widget을 return 하고 있다.

Flutter - MaterialApp 위젯

MaterialApp 위젯에 마우스를 올려보면 매우 많은 설정(configuration)이 존재한다. 우리는 이중 home 에 관심을 가졌다(홈화면 설정을 말하는 듯). home은 property인데 위젯을 return 해야한다. 그 위젯이 사용자가 우리 앱의 home에 있을 때 보여질 것이다.

Flutter - MaterialApp Widget(위젯) 과 Widget(위젯)

• MaterialApp위젯의 home 속성
  • home 안에 Scaffold 위젯
    • Scaffold 위젯 안에 'appBar 속성' 과 'body 속성'
      • appBar 속성 안에 AppBar위젯과 title 속성, title 속성 안에 Text 위젯
      • body 속성 안에 Center위젯과 child속성, child 속성 안에 Text 위젯

Scaffold: 화면의 구성 및 구조에[ 관한 것들을 가지고 있는 위젯이다.

Flutter는 모든게 widget이다. 그리고 widget의 모든게 그저 dart의 class를 사용하고 있는 거란 것을 이해해야 한다. 모두 named parameter로 class를 만드는 법이기 때문에 낯설지 않아야 한다. (앞선 dart강의에서 배웠다. 그런데 초보자는 여전히 낯설다ㅠㅠ)

이런 나같은 초보자들을 위해서 강사(nico)가 dart class에 대해 한번 더 핵심 강의를 진행해준다. (감사합니다)

Dart Class Recap

widget을 사용할 때마다 우리는 class를 인스턴스화 하고 있다. 하지만 dart는 new를 써줄 필요 없다. (다른 언어에서는 써야하나보다. 근데 나는 모른다.ㅎ)

constructor에 대해 알아보자

1. Positional Paramenter 
2. Named Parameter

Dart - class 복습, constructor(생성자), Positional Parameter 만들기, named Parameter 만들기

player라는 class 를 만들고 player의 name을 josh라고 한다. 이렇게 하면 player의 name은 josh로 고정이 된다. 대신 player를 받을 수 있게 하기 위해서는 두번째 이미지처럼  Player의 constructor(생성자)를 만들고 this.name을 적어준다. 이것이 의미하는 것은 누군가 Player의 이름을 Player("여기")에 넣어주면 dart는 그 parameter를 가지고 Player안의 name에 넣어줄 것이다. 

세번째 이미지는 named parameter를 만든 것이다. 중괄호를 써주고, parameter를 받을 때 어떤 속성에 대한 parameter인지 표시한 뒤 parameter를 넣어주면 그 parameter를 해당 속성에 넣어줄 것이다.

• 클래스, 그리고 속성 정의
  • 속성을 채워주는 생성자 정의 (positional / named 두가지)
  • 생성자를 활용하여 parameter로 값을 입력

Flutter에서 사용하는 class

보다시피 위 Hello Flutter 를 만드는 과정에서 클래스와 constructor를 사용한다.

1. Positional Paramenter Constructor 사용 케이스: Text 클래스, Text constructor(생성자)에 우리가 쓰고싶은 텍스트를 첫번째 argument로 넘겨주기만 하면 된다. 위치가 중요하다.
2. Named Parameter 사용 케이스: appBar, title, body, child. // 보통 class의 parameter 가 많을땐 이렇게 named parameter를 사용한다.
   • Scaffold 클래스의 생성자
     • appBar라는 named parameter
     • body라는 named parameter

 

? 에 대해서

위와같이 String? name; 처럼 ? 를 추가하면으로 Player가 name을 가질수도, 가지지 않을 수도 있다고 하는 것이다. 아무 parameter 없는 Player를 만들 수 있다. dart에게 Player가 name을 가질 수도 가지지 않을 수도 있다고 말해줬기 때문이다.

위 Hello Flutter 를 만드는 과정에서 Text위젯 (Text class)을 살펴보면 (마우스를 올리면 해당 위젯의 constructor를 볼 수 있고 우리가 알아야 할 모든게 나와 있다.)

1. data는 requied이고, 이게 첫번째 parameter이다. (positional parameter.) Text class는 우리가 실제로 화면에 보여주고 싶은 텍스트를 필요로 한다. 그리고 data의 유형은 String이다. 만약 세번째 이미지처럼 아무 값도 넣어주지 않으면  '1 positional argument' 가 없다고 알려준다.
2. 나머지는 모두 ? 가 붙어있는 required가 아니다. 텍스트의 스타일을 보내서 수정할 수도 있고 안그래도 된다는 것이다.