상세 컨텐츠

본문 제목

[Flutter] 개념정리, 기초***

notes

by 서울의볼 2024. 4. 28. 02:33

본문

- Android Material & iOS Cupertino 위젯이 양대산맥임.

위젯 개념도

home: Scaffold(
appBar: AppBar(),

최초의 세팅에서 home은 첫번째 위젯에서 어떤걸 보여줄 것인가~를 뜻함.

Scaffold를 쓰면 원하는 곳에 쉽게 배치할 수 있는 가설물을 설치하는 것과 같음.

 

- 위젯은 대문자로 시작함!

- VSCode에선 opt esc 누르면 옵션들이 뜸.

- final은 값을 재할당 할 수 없음.

- 중괄호 {}로 감싸진 매개변수를 이름지정 매개변수 (named parameter)라 부름:

void main() {
  say(from: "나다");
  say();
}

void say({String? from}) {
  print("$from: 개댁기야");
}

- 자바스크립트와 같이 중괄호 안쪽 코드가 한줄이면 화살표 함수 ㅆㄱㄴ

- void는 아무것도 반환하지 않는다는 의미임.

- Dart에서 시작할 때 호출하기로 약속된 함수는 main임. 이름 변경 X

- 속성 property는 클래스 내 변수를 일컫. 메소드는 클래스 내 함수. 클래스명과 동일한 함수를 생성자(constructor)라 부름. 생성자 함수에 입력 값을 전달 받아 속성에 넣어줄 수도 있음.

- 비유: 클래스(빵틀) -> 생성자 호출(빵 만듦) -> 인스턴스(빵) // 클래스의 형태를 따른 데이터 객체를 인스턴스라 부름.

 

- stateless함수를 상속 받으면 필수적으로 빌드 함수를 만들어야 하는데, 이건 위젯을 반환하는 함수임. override는 stateless widget이 가지고 있는 빌드 함수를 override밑에 정의한 함수로 덮어씌우겠다는 의미임.

- stateful widget은 기본적으로 두 개의 클래스로 구성됨. 생성자는 첫번째 함수에 들어가고, 빌드함수는 두번째 함수에 들어감. override는 두 클래스를 연결해주는 친구라 이해하면 됨.

- 빌드함수는 항상 MaterialApp으로 반환거래.

- setState누르면 화면 갱신시켜줌 (두번째 빌드함수를 다시 실행하는 것)

- Navigator.pop(context)에서 context는 빌드함수에서 컨텍스트를 전달받는데, 현재 실행되고 있는 위젯의 위치 및 정보를 담고있는 매개변수임. 그래서 그걸 팝!시키라는 의미임.

- Navigator.pushReplacement() 하면 페이지 이동 후 전 페이지로 돌아가는 버튼 없음. 보통 온보딩 페이지 이후 홈페이지 이동시 쓰임.

- url로 이미지 가져왔을 땐 Image.network, 에셋파일에서 정적이미지 가져올 땐 Image.asset

- ListView 위젯은 동일한 레이아웃에 다른 정보를 보여줄 때 사용하면 유용함. (eg. instagram)

ListView.builder(
  itemCount: 100, // 전체 아이템 개수
  itemBuilder: (context, index) { // index는 0 부터 99까지 증가
		return Text("$index"); // 100번 실행
  }
),

이런식.

 

- 클래스의 인스턴스가 여러개일 수 있는데, this는 여러 인스턴스 중 자기 자신을 가리키는 것.

- 언더바_는 외부 파일 접근 안돼. 

- StatefulWidget의 상태클래스에서 widget.변수명으로 전달받은 변수에 접근할 수 있음.

- main.dart파일에서 MaterialApp이 갖고 있는 기능 중 하나가 예를 들어 textTheme을 바꾼다 하면 전역적으로 적용시켜줌.

 

***

- 이때까지 기초 강의의 모든 코드는 메모리에서 실행됐는데, 데이터를 메모리가 아닌 다른 곳에 저장해 앱을 재시작해도 이전 데이터를 유지하는 방법들 참고:

1. 기기에 파일로 저장 (shared_preferences 패키지 활용)

2. 기기 내 데이터베이스에 저장 (모든 폰엔 SQLite가 있음)

3. 서버에 저장 (내가 백엔드 플젝하며 했던 방법이 되겠다)

 

섹션4, 22강 25~~~분쯤 async await 및 late 함수 설명이 친절함 && shared preferences 패키지 활용법 알려줌.

섹션4에서 버킷리스트 앱 만들며 CRUD 다룸.

섹션4, 24~25강 Provider 패키지 사용하여 상태관리.

 

- ListTile 위젯은 박스 안 여러 영역에 다른 위젯을 손쉽게 배치할 수 있게 해줌.

- 중복되는 코드는 (예를 들어 삭제 창 따위) 적절히 extract할 것.

 

- Provider package를 통해 서비스를 위젯트리 꼭대기에 배치하고, 어디서든 쉽게 접근할 수 있도록 해줄 수 있음. 

대략적 개념도:

- 정리하자면, ChangeNotifier 클래스를 상속받아 notifyListeners();를 통해 데이터를 사용하는 화면을 갱신함 (setState가 불필요해지는 듯?).

- Provider 패키지를 최상단 위젯 서비스에 등록하고, 해당 클래스에 접근하는 방법으론, Consumer<클래스>로 정보 갱신시 notifyListener 호출하면 빌더 부분이 새로고침 됨. (또 하나의 방법을 context.read임)

- Consumer로 return하면, 위젯트리 꼭대기에서 builder내 두번째 매개변수로 반환함!!!

- json에서 문자열은 무조건 큰따옴표 ""

- JSON 데이터에서 원하는 값만 뽑아오는 작업을 파싱(parsing)이라고 부름.

 

 

 

파이어베이스는 살짝 아웃데이티드 됐는지 잘 안돼서 패스.

 

 

 

 

출처: 유데미/Flutter 앱 개발 기초 (Dev Story)

관련글 더보기