Provider 시작하기

Provider 란?

---

react에 redux, vue에 vuex가 있다면, flutter에는 Provider가 있습니다!
전역 상태관리 라이브러리 입니다.

사용법

먼저 다음과 같은 구조로 앱을 만들었습니다.

1. model 만들기

전역으로 사용할 model을 만들어 줍시다!

class Dog {
  final String name;
  final String breed;
  int age;
  Dog({
    required this.name,
    required this.breed,
    this.age = 1,
  });

  void grow() {
    age++;
    print('age: $age');
  }
}

2. Provider로 감싸주기

최상위 widget을 Provider로 감싸줍시다. 그러면 하위 widget에서 모두 접근 가능합니다.

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

  @override
  Widget build(BuildContext context) {
    return Provider<Dog>( // Dog을 주고 Provider로 감싸주면 됩니다!
      create: (context) => Dog(
        name: 'Sun',
        breed: 'Bulldog',
        age: 3,
      ),
      child: MaterialApp(
        title: 'Provider 02',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

3. 하위 widget에서 접근하기

Provider.of를 사용해서 Provider의 값에 접근할 수 있습니다.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider 02'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '- name: ${Provider.of<Dog>(context).name}', // 값을 전달하지 않았지만, 접근 가능한 모습
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(height: 10.0),
            BreedAndAge(),
          ],
        ),
      ),
    );
  }
}

깃허브 : https://github.com/lightlitebug/provider_overview_02