코딩셰프 flutter 순한맛 시즌1 정리

왜 flutter를 공부해야하는가?

fuchsia

마이크로 커널

필요한 부분만 커널에 넣고, 나머지는 모듈화

https://fuchsia.dev/

android

단일형 커널

모든 기능을 커널에 모아둠

리눅스

커널이란

하드웨어와 소프트웨어를 연결시켜주는 역할

구글이 왜 fuchsia를 만들까?

1. 지르콘은 임베디드 응용프로그램에서 일반적으로 사용되는 소형 시스템으로 설계된 Little Kernel의 파생물
2. 지르콘은 현대적 전화기와 고속의 프로세서를 갖춘 개인용 컴퓨터를 타겟으로 하고 있다.
3. 음성명령에 중점을 두고 개발됨
4. 안드로이드의 파편화
5. 오라클과의 특허 싸움

Flutter

flutter는 프레임워크이다. 프로그래밍 언어가 아니다

flutter의 사용자 인터페이스와 애플리케이션을 만들기 위해 사용

Dart 언어 사용

크로스 플랫폼

인터페이스나 사용자 경험을 하나로 통일

---

flutter 설치하기

1. flutter SDK 설치
2. 환경변수 설정

SDK란?

1. Software Development Kit
2. 소스코드의 모음과 유틸리티
3. 구글이 제공

https://flutter.dev/

C://Program Files/ 에 절대 설치하면 안된다.

packages 폴더에 구글이 제공하는 코드들이 모여있다.

bin → binary의 줄임말 → 배포된 프로그램 내의 실행 파일

bat → 여러 명령어를 한 번에 실행하기 위해서 사용하는 언어

---

Flutter doctor 및 프로젝트 생성

Flutter doctor

flutter 확인

cmd 혹은 터미널에서 flutter doctor 입력

프로젝트

알파벳 소문자만 가능

package name

일종의 폴더

코드도 폴더로 분류

패키지 이름의 고유성을 보장하기 위해서 인터넷 도메인을 사용

---

위젯

사전적 의미

1. 독립적으로 실행되는 작은 프로그램
2. 주로 바탕화면 등에서 날씨나 뉴스, 생활정보 등을 보여줌
3. 그래픽이나 데이터 요소를 처리하는 함수를 가지고 있음

Flutter 상에서 의미

1. UI를 만들고 구성하는 모든 기본 단위 요소
2. 눈에 보이지 않는 요소까지
3. 모든 것이 위젯

위젯의 타입

1. Stateless Widget
   1. 이전 상호작용의 어떠한 값도 저장하지 않음
   2. 정적인 위젯
2. Stateful Widget
   1. Value 값을 지속적으로 추적 보존
   2. 변화가 있는 위젯
3. Inherited Widget

Stateless Widgets

1. 스크린상에 존재만 할 뿐 아무것도 하지 않음
2. 어떠한 실시간 데이터도 저장하지 않음
3. 어떤 변화(모양, 상태)를 유발시키는 value값을 가지지 않음

Stateful Widgets

1. 사용자의 interaction에 따라서 모양이 바뀜
2. 데이터를 받게 되었을 때 모양이 바뀜

Flutter Widget tree

1. Widget들은 tree 구조로 정리될 수 있음
2. 한 Widget 내에 얼마든지 다른 widget 들이 포함될 수 있음
3. Widget은 부모 위젯과 자식 위젯으로 구성
4. Parent widget을 widget container라고 부르기도 함

MyApp → 커스텀 위젯

MaterialApp → 모든 위젯을 감싸는 위젯, flutter sdk에서 제공하는 모든 위젯을 사용할 수 있다.

눈에 보이지 않는 padding, center도 모두 위젯이다.

앱 전체도 하나의 위젯

---

프로젝트 폴더와 기본 코드 이해

pubspec.yaml

프로젝트의 metadata를 정의하고 관리하는 곳

프로젝트 버전, 환경, dart 버전, dependecies 등

android, ios 폴더

각 플랫폼에 맞게 앱을 배포하기 위한 정보들을 가지고 있다

test

개발하기 원하는 각종 dart 관련 코드를 테스트할 수 있다

lib

가장 중요한 폴더

개발의 99%는 여기서

코드

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

⇒

fat arrow

다른 함수를 실행한다는 뜻

runApp()

flutter에서 최상위에 있는 함수

argument로 반드시 위젯이 있어야 한다.

MyApp()

커스텀 위젯

최상위 위젯이기 때문에 정적이다 → stateless widget

모든 커스텀 위젯은 또 다른 위젯을 return 하는 build 함수를 가지고 있다

flutter 위젯을 사용하기 위해 MaterialApp 위젯 사용

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'dsadsa',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyHomePage(),
    );
  }
}

Swatch → 음영

title → 앱을 총칭하는 이름

home: → 앱이 정상적으로 실행되면 가장 먼저 화면에 보여주는 경로

위젯을 만들 때 항상 stateful인지 stateless인지 고민해봐야 한다.

하나라도 변하는게 있다면 stateful 위젯으로 만들어야 한다.

Scaffold

의미 : 무언가를 혼자 해낼 수 있도록 발판을 만들어주다.

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First app'),
      ),
      body: Column(
        children: [
          Text('hello'),
          Text('hello'),
          Text('hello'),
        ],
      ),
    );
  }
}

위젯 정리

elevation : 높이, 그림자로 뜨는 효과

Padding()

Center()

SizedBox()

Row()

Column()

Text()

Divider()

CircleAvatar()

FloatingActionButton()

Container

자식이 없다면, container는 가능한 한 최대한의 공간을 차지하려고 한다.

SafeArea

화면에 보이게끔

Column

세로 축으로 가능한 한 크게 공간을 차지한다.

가로는 children이 가로 만큼

mainAsixsize 크기

verticalDirection

ainSxisAlignment.strretch → 쭉 늘리기 → 자식 width, height 중 하나 지워야 한다.

TextButton

ElevatedButton

OutlinedButton

TextButton.icon

ButtonBar

이미지 넣기

1. assets 폴더 만들기
2. 이미지 파일 넣기
3. pubspec.yaml 파일 들어가기
4. assets: 주석 풀기
5. 수정

DEBUG 없애기 → materialapp에서 debugShowCheckedodeBanner

---

클래스와 위젯

프로그래밍 상에서의 클래스란?

객체가 가져야 하는 속성과 기능을 정의한 내용을 담고 있는 설계도 역할

프로그래밍 상에서의 객체란?

클래스가 정의된 후 메모리상에 할당되었을 때 이를 객체라고 함

프로그래밍 상에서의 인스턴스란?

클래스를 기반으로 생성 됨

클래스의 속성과 기능을 똑같이 가지고 있고 프로그래밍 상에서 사용되는 대상

dart는 타입 추론이 가능하다

named argument

필요한 argument만 입력 받음

중괄호로 묶으면 된다

argument가 모두 optional로 변한다

int addNumber({int a, int b})

---

앱바

leading

아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때

actions

복수의 아이콘 버튼 등을 오른쪽에 배치할 때

---

Drawer

Scaffold의 option parameter이다.

UserAccountsDrawerHeader()

@required가 붙은 파라미터는 넣어야 하는 파라미터이다.

ListView

스크롤 바가 있다.

ListTile

한 줄 한 줄을 ListTile이라고 한다.

trailing 질질 끌려다니는 → 오른쪽에 아이콘

---

BuildContext

widget tree에서 현재 widget의 위치를 알 수 있는 정보

모든 위젯은 build라는 함수를 가지고 있다.

이 build를 통해서 계층 구조를 만든다.

이 BuildContext는 stateless 위젯이나 state 빌드 메서드에 이해서 리턴된 위젯이 부모가 된다.

---

Snack Bar

Scaffold.of(context)

현재 주어진 context에서 위로 올라가면서 가장 가까운 Scaffold를 찾아서 반환하라

Scaffold.of(context).showSnackBarr(SnackBar(content: Text('ㅇㄴㅁㅁㄴㅇ')));

코드 정리 단축키

File → Preferences → Keyboard Shortcuts → format document

Builder()

새로운 context를 만들어줌

Enum

TextAlign.center → Enum 값

Toast Message

pubspec.yaml → dependecies → fluttertoast 추가

Fluttertoast.showToast(msg : ‘Flutter’)

---

Navigator

route

스마트폰에 보이는 하나의 페이지

navigator

스택으로 route를 관리

push → 데이터 추가

pop → 데이터 삭제

Navigator.push(context, MaterialPageRoute(
	builder : (context) {
		return SecondPage();
	}
))

_ (언어스코어)

사용하지 않는 값, 필요없는 매개변수

scaffold를 사용해서 appbar를 생성하면 자동으로 뒤로가기 버튼을 생성해준다.

멀티 페이지 route

routes, initialRoute 꼭 필요하다.

routes

이동할 Route의 이름을 생성

initialRoute

home과 똑같음. home과 동시에 선언되면 안된다.

flutter에서는 index.html과 같이 첫 화면을 ‘/’로 정해둠

‘/a’

‘/b’

pushNamed를 사용한다.

---

String interpolation

interpolation : 보간법

print("$a 님 반갑습니다")

---

Collection

데이터들을 모아서 가지고 있는 자료구조

flutter에서는 array를 List라고 한다

fixed-length list

List number = new List(7);

growable list

List number = new List();

Generic

Collection이 가지고 있는 데이터들의 데이터 타입을 지정

안전성을 위해

List<int> number = new List();

class Slot<T> {
	insert(T shape){
	}
}

---

ScaffoldMessenger

Snack bar가 위젯트리 최상단에 있는 ScaffoldMessener에서 관리된다.

route가 변해도 SnackBar가 유지된다.

SccaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('dsadsa')))

SnackBarAction(
	label: 'undo',
	onPressed: () {

	}	
)