[Flutter , Dart 언어] 코딩하다 생각 안날 때 잠깐씩 보는 Cheat Sheet -Provider 기본적인 사용법

상태 관리를 위한 Provider에 대한 자세한 설명보다는 이미 알고 있는데 잠깐씩 사용법이 생각 안날때 보는 치트시트입니다. 

 

만든 예제는 BottomNavigationBar를 이용하여 화면을 바꾸는 예제입니다. 

프로바이더를 사용하실려고 하는데 어떻게 시작하지 기억 안나실때 보시면 됩니다.

---

최종 결과물

 

 

---

만드는 순서

1. 프로바이더 설치

2. ChangeNotifier 상속 받는 클래스 생성

   - 변화를 감지를 위해 notifyListeners(); 사용 해야 됨

3. 기본 UI 생성

4. Provider 사용할 상위 위젯에 MultiProvider로 감싼다

- MultiProvider(

    providers: [
      ChangeNotifierProvider<btmNavProvider>(create: (context) => btmNavProvider()),
      ],

    child: HomePage()),

 

5. 사용단계 저는 간단한 Provider.of(context)의 사용법만 작성하였습니다. 

 

---

코드 작성

1. ChangeNotifier 상속 받는 클래스 생성

   - 변화를 감지를 위해 notifyListeners(); 사용 해야 됨

 

train_provider.dart

import 'package:flutter/foundation.dart';

class btmNavProvider extends ChangeNotifier {
  int _selectedIndex = 0;

  int get selectedIndex => _selectedIndex;

  void changeIndex(int index) {
    _selectedIndex = index;
    notifyListeners();
  }
}

 

2. Provider 사용할 상위 위젯에 MultiProvider로 감싼다

- MultiProvider(

    providers: [
      ChangeNotifierProvider<btmNavProvider>(create: (context) => btmNavProvider()),
      ],

    child: HomePage()),

import 'package:flutter/material.dart';
import 'package:provider_train/home_page.dart';
import 'package:provider/provider.dart';
import 'package:provider_train/train_provider.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Train',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiProvider(providers: [
        ChangeNotifierProvider<btmNavProvider>(create: (context) => btmNavProvider()),
      ], child: HomePage()),
    );
  }
}

 

3. Provider 사용을 위한 부분

Provider 사용에 핵심 부분

final btmNav = Provider.of<btmNavProvider>(context,listen: true);

currentIndex: btmNav.selectedIndex,
onTap: btmNav.changeIndex,

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_train/train_provider.dart';

class HomePage extends StatelessWidget {
  HomePage({
    Key? key,
  }) : super(key: key);

  List<BottomNavigationBarItem> btmNavItems = [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "home"),
    BottomNavigationBarItem(icon: Icon(Icons.movie_creation), label: "movie"),
  ];

  @override
  Widget build(BuildContext context) {
    final btmNav = Provider.of<btmNavProvider>(context,listen: true);
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: btmNavItems,
        currentIndex: btmNav.selectedIndex,
        onTap: btmNav.changeIndex,
      ),
    );
  }
}