요즘 회사 업무 일이 바빠서 오랜만에 글을 적어봅니다
Flutter에서 Provider를 사용하면서 꿀팁들을 조금 정리해보았습니다.
카운터 앱 제작
dependencies:
flutter:
sdk: flutter
provider:
우선, provider 패키지를 프로젝트에 추가하기 위해 pubspec.yaml 파일에 위와 같은 코드를 추가하고 패키지를 가져옵니다.
1. Flutter pub add provider
2. yaml 파일에 provider : 추가 후 Flutter pub get
두개중 편한대로 사용하시면 됩니다.
count_provider
import 'package:flutter/material.dart';
class CountProvider with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners(); // 값 증가 후 상태 변경 알림
}
void decrement() {
_count--;
notifyListeners(); // 값 감소 후 상태 변경 알림
}
}
notifyListeners() -> 중요 !
상태가 변경된 것을 구독하고 있는 위젯들에게 알리는 역할을 합니다.
해당 메서드를 호출하지 않는다면 Provider는 상태가 변경되더라도 UI가 리로드 되지 않습니다.
호출 적용 화면
class ProviderScreen extends StatelessWidget {
const ProviderScreen({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (BuildContext context) => CountProvider(), // 정의한 Provider
lazy: true, // true의 경우 기본값-> 밑 설명 참고
child: const ScaffoldLayout(
child: ProviderLayout(),
),
);
}
}
ChangeNotifierProvider
위젯 트리에 ChangeNotifier를 제공하고, 하위 위젯들이 해당 상태를 사용할 수 있도록 해주며, 변경된 상태를 감지하고 이때 위젯을 다시 그리는 Widget입니다.
✨ ChangeNotifierProvider 매개변수
create (필수)
상태 관리 클래스의 인스턴스를 생성함과 동시에 위젯 트리에 새로운 ChangeNotifier 를 제공해 주는 함수로, 필수 매개변수 입니다. -> 정의한 Provider
lazy (선택)
해당 설정은 create의 지정된 상태 클래스를 위젯 트리가 처음 빌드 될 때 바로 생성할지 혹은 필요시에 생성할지 설정하는 매개변수입니다.
기본 설정은 true 이며 이는 실제 필요한 경우에만 생성하여 앱의 리소스를 절약할 수 있습니다.
false 설정 시 위젯 트리가 처음 빌드 될 때 상태 클래스가 생성되며, 필요에 따라 초기 상태 설정이 가능합니다.
🎄 Provider.of<>(context)?
상태가 변경될 때 위젯을 다시 그리도록 하는 Widget입니다.
Provider 패키지에서 제공되는 Provider.of 메서드를 사용하여 상태 클래스인 CountProvider를 현재 context에서 가져오는 역할을 합니다.
이를 통해 가져온 상태 클래스의 데이터나 메서드에 접근 가능하며, 위젯에서 상태 변경이나 값을 불러오는 등의 작업이 가능합니다.
- 여기까지입니다 도움이 되길 바라며 Flutter 공고가 많아지길 바라며 .. 물러가겠습니다 다들 파이팅 ~!~!
'Flutter' 카테고리의 다른 글
Flutter pub.dev - 2) flutter_rating_bar 알아보기 (0) | 2024.02.07 |
---|---|
Flutter pub.dev - 1) flutter_rating_bar 알아보기 (0) | 2024.02.07 |
Flutter 네이티브 연결 (1) | 2023.11.14 |
Flutter - 테스트 종류 (2) | 2023.11.10 |
Flutter - Test 2편 (0) | 2023.11.10 |