[플러터] 14. RiverPod

1번

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

2번

따로 파일을 만들어서 관리

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 데이터 타입 (int면 안 만들어도 됨)

// 2. 창고
class HomeVM extends Notifier<int> {
  // 창고가 만들어 질 때 자동 초기화 메서드 (return 하는 값을 창고가 state로 관리함)
  @override
  int build() {
    return 1;
  }
}

// 3. 창고 관리자
final homeProvider = NotifierProvider<HomeVM, int>(() {
  return HomeVM();
});

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_sample/home_page.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: HomePage());
  }
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_sample/home_vm.dart';

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

  @override
  Widget build(BuildContext context) {
    print("HomePage Build");
    return Container(
      color: Colors.yellow,
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Expanded(child: HeaderPage()),
            Expanded(child: BottomPage()),
          ],
        ),
      ),
    );
  }
}

class HeaderPage extends ConsumerWidget {
  HeaderPage();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // WidgetRef : 모든 프로바이더한테 접근할 수 있는 레퍼런스 변수
    print("HeaderPage Build");

    print("창고 생성 직전");
    int model = ref.watch(homeProvider); // yield 검색 해보기
    print("창고 생성 직후");

    return Container(
      color: Colors.red,
      child: Align(
        child: Text(
          "$model",
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 100, decoration: TextDecoration.none),
        ),
      ),
    );
  }
}

class BottomPage extends ConsumerWidget {
  BottomPage();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    print("BottomPage Build");
    print("1");
    HomeVM vm = ref.read(homeProvider.notifier);
    print("2");
    return Container(
      color: Colors.blue,
      child: Align(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
          onPressed: () {
            print("버튼 클릭됨");
            vm.increase();
          },
          child: Text(
            "증가",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 100),
          ),
        ),
      ),
    );
  }
}

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 데이터 타입 (int면 안 만들어도 됨)

// 2. 창고
class HomeVM extends Notifier<int> {
  // 창고가 만들어 질 때 자동 초기화 메서드 (return 하는 값을 창고가 state로 관리함)
  @override
  int build() {
    print("창고 빌드 후 state 초기화 됨");
    return 1;
  }

  void increase() {
    state++;
    // setState 필요하지 않음
  }
}

// 3. 창고 관리자
final homeProvider = NotifierProvider<HomeVM, int>(() {
  print("창고 생성 완료");
  return HomeVM();
});

home_vm.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 데이터 타입 (int면 안 만들어도 됨)

// 2. 창고
class HomeVM extends Notifier<int> {
  // 창고가 만들어 질 때 자동 초기화 메서드 (return 하는 값을 창고가 state로 관리함)
  @override
  int build() {
    return 1;
  }
}

// 3. 창고 관리자
final homeProvider = NotifierProvider<HomeVM, int>(() {
  return HomeVM();
});

최초 build

증가 버튼 클릭 후