강의 내용 정리 - [Flutter로 SNS 앱 만들기]

24년 5월을 기준으로 작성되었습니다.

 

 

1. [섹션 2. 회원 가입 화면] 가입완료 메시지 표시... 강의 수정 사항

9분 즈음에 디바이스 자체의 뒤로가기 버튼을 막기 위해 WillPopScope를 사용했다. 

하지만 WillPopScope는 Deprecated 됐으므로, PopScope를 대신 사용한다.

https://stackoverflow.com/questions/77529904/willpopscope-is-deprecated-in-flutter

WillPopScope is deprecated in Flutter

 

[기존 코드]

WillPopScope(
  onWillPop: () async => false,
)

 

[24년 9월 기준 수정 코드]

/// NEW CODE
PopScope(
  canPop: false,
  onPopInvokedWithResult : (_, __) => false,
)

 

---

2. Provider에서 context.read() VS context.watch()

context.read()와 context.watch()는 상태 관리 라이브러리인 Provider에서 사용되는 메서드이다.

 

1. context.read()

   - context.read()는 주어진 Provider에서 데이터를 읽어오는 메서드이다.
   - 데이터를 읽어올 때, 해당 Provider의 상태 변화를 구독(감지)하지 않는다.
   - 주로 Provider의 값을 일회성으로 읽어올 때 사용된다.
   - EX) 초기화 작업이나 일회성 계산에 사용할 수 있다.

 

2. context.watch()

   - context.watch()는 주어진 Provider의 상태 변화를 구독하고, 해당 데이터를 읽어오는 메서드이다.
   - Provider의 상태가 변경될 때마다, 구독한 위젯이 Rebuild된다.
   - 주로 UI에 Provider의 데이터를 표시하거나, 데이터 변경에 따라 UI를 업데이트할 때 사용된다.
   - Provider의 상태 변화를 실시간으로 모니터링하고 반영한다.

예를 들어, Counter 앱에서 context.read()를 사용하여 초기 값을 읽어올 수 있고,

context.watch()를 사용하여 카운터 값의 변화를 UI에 반영할 수 있다.

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = context.watch<CounterProvider>(); // 상태 변화 구독

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Text(
          '${counter.value}', // Provider 값 표시
          style: TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterProvider>().increment(), // 일회성 읽기
        child: Icon(Icons.add),
      ),
    );
  }
}

---

3. Navigator로 스크린(페이지)을 이동할 때의 주의할 점

Navigator.push() 나 Navigator.pushAndRemoveUntil() 같이 페이지를 이동할 때 사용하는

PageRoute는, 주로 MaterialPageRoute를 사용해서 화면을 이동하고 있다.

 

그러나, MaterialPageRoute는 도착한 곳의 위젯의 build() 메서드에서 Scaffold가 선언되어 있어야 한다!

 

---

4. IconKitchen

안드로이드, iOS, 웹 (기타 macOS 등등) 에 맞는 아이콘을 규칙에 맞게 생성할 수 있도록 도와준다.

 

https://icon.kitchen

 

 

---

5. [플러터] 앱의 패키지 이름, 프로젝트 이름 변경하는 법

✅ change_app_package_name 패키지

 

https://dev-nam.tistory.com/46

[flutter] 앱의 패키지 이름을 변경하는 방법

 

패키지 설치

$ flutter pub add change_app_package_name

 

설치가 끝났다면 다음 명령어에 [com.new.package.name] 부분에 원하는 패키지 이름을 넣어서, 실행

$ flutter pub run change_app_package_name:main {여기에 수정할 패키지 이름}

 

---

✅ 프로젝트 이름 변경

https://blueming-dev.tistory.com/39

flutter app 이름 변경하기

 

---