철철박사의 독학 코딩

플러터의 상태 관리 패키지인 Provider에서 제공하는 ChangeNotifierProvider와 Navgator로 화면 이동한 후에 상태 변화를 확인하기 위해 예제 코드를 만들어 보았다. 다음 이미지처럼 FirstPage에서 SecondPage로 이동하고, SecondPage에서 상태를 변화시켜도 FirstPage에 구독한 상태가 잘 변경되는 것을 확인할 수 있다. FirstPage와 SecondPage가 StatelessWidget인 것을 주목하자. ChangeNotifierProvider로 상태가 공유되기 때문에 상태 변화시 자동으로 위젯이 리빌드 되기 때문에 StatefulWidget처럼 작동하게 된다. import 'package:flutter/material.dart'; import 'pac..

플러터의 State 클래스에서 코드를 작성하다 보면 위젯에 사용할 변수들을 build 메서드 내부에 지역 변수로 선언하는 경우가 종종 있었다. 다음은 PageView에 사용할 PageController를 build 메서드 내부에 지역변수로 선언된 예제이다. class _PrayerDetailState extends State { // ... @override Widget build(BuildContext context) { final controller = PageController(initialPage: selectedPage); return PageView( controller: controller, // ... ); } } build 메서드는 위젯의 렌더링을 담당하는 메서드로 만드는 것이 좋다. b..

플러터의 상태 관리로 사용되는 Provider의 Selector 위젯에 대해서 알아보자. Selector는 Provider 패키지에서 제공하는 위젯 중 하나로, 특정 상태의 일부만 구독하여 해당 상태의 변경에 따라 위젯을 업데이트할 수 있도록 도와준다. Provider 패키니에서 제공하는 Consumer 위젯도 상태를 구독하는데, Selector와 달리 상태 전부를 구독한다는 점이 다르다. 따라서 상태를 전부 구독해야 한다면 Consuer를 사용하고, 상태의 일부만 구독한다면 Selector를 사용하자. Selector의 사용법은 다음과 같다. Selector( selector: (BuildContext context, T value) => S, builder: (BuildContext context, ..

플러터의 상태 관리로 사용되는 Provider가 제공하는 Consumer에 대해서 알아보자. Consumer는 Provider 패키지가 제공하는 위젯 중 하나이다. 특정 상태에 대한 구독을 설정하여 해당 상태의 변경 사항을 감지하고, 이에 따라 자동으로 위젯을 업데이트할 수 있게 도와준다. 따라서 Consumer는 필요한 부분만을 업데이트하고 성능을 최적화하는 데 사용한다. Consumer는 다음과 같은 형태로 사용된다. Consumer( builder: (BuildContext context, T value, Widget? child) { // T 상태가 변경될 때마다 builder가 호출된다. return YourWidget(); }, ) Consumer는 상태 T를 구독하고, 상태가 변경될 때마다 ..

현재 프로젝트에서 플러터의 상태 관리를 위해서 ChangeNotifierProvider를 사용하고 있다. ChangeNotifierProvider는 ChangeNotifier로 구현한 클래스에서 notifyListeners()가 호출되면 Provider.of로 구현 클래스를 리스닝하는 위젯을 자동으로 리빌드 해주는 기능이 있다. 하지만 프로젝트를 진행하다 보니 리빌드가 너무 많이 발생하는 문제가 발생했다. 왜 그럴까 열심히 알아본 결과, 내가 Provider.of에 대해 제대로 알고 있지 않아서였다. 다음 간단한 예제코드가 있다. 참고로 코드가 길어서 필요한 코드가 포함시켰다. SuperWidget의 하위에는 다양한 위젯이 있고, 그중에 SubWidget1도 포함되어 있다. 만일 다른 하위 위젯에서 Pr..

플러터에서 ChangeNotifierProvider를 이용해서 코드를 작성하는 중에 아래와 같은 에러가 발생했다. class SubWidget2 extends StatelessWidget { const SubWidget2({super.key}); @override Widget build(BuildContext context) { print("Sub Widget 2 build"); return ElevatedButton( onPressed: () { Provider.of(context).increment(); }, child: const Text("Sub Widget 2"), ); } } ======== Exception caught by gesture =============================..

플러터에서 showDialog()를 사용하는 코드를 작성하였다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("MyApp")), body: Center( child: ElevatedButton( onPressed: () { showDialog( context: context, builder: ..

플러터에서 백 버튼을 제어하는 방법을 알아보자. 백 버튼은 뒤로 가기 버튼, 되돌리기 등 다양한 명칭으로 사용된다. 여기서는 백 버튼이라고 하겠다. 이전 화면으로 돌아가는 방법 플러터에서 내비게이터로 화면을 이동하면 이전 화면으로 돌아가기 위해 기본적으로 2가지 방법을 제공한다. 1. 앱바의 백 버튼 2. 안드로이드 시스템의 백 버튼 보통은 백 버튼의 기능을 그대로 사용해도 문제는 없다. 하지만 데이터가 입력된 폼이 있다면 사용자에게 입력을 취소할 것인지 묻는다든지, 비밀번호를 입력해야 앱을 사용할 수 있어야 한다면 백 버튼의 기능을 제어해야 한다. 여기서는 각각의 백 버튼을 제어하는 방법을 알아보겠다. 1. 앱바의 백 버튼 제어하기 MaterialPageRoute로 이동한 화면의 앱바에는 자동으로 백 ..