[Flutter/Project](Instagram Clone) Provider를 이용한 카메라 상태관리2

---

(좌)provider 적용 전, (우) provider 적용 후.

추가

---

소스코드 및 pubspec.yaml

// camera_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/models/camera_state.dart';
import 'package:flutter_project_IJ/widgets/take_photo.dart';
import 'package:provider/provider.dart';

class CameraScreen extends StatefulWidget {
  // CameraState 객체생성.
  CameraState _cameraState = CameraState();

  @override
  _CameraScreenState createState() {
    // 빠른 카메라 실행을 위해 해당 스크린 생성됨과 동시에 함수 실행.
    _cameraState.getReadyToTakePhoto();
    return _CameraScreenState();
  }
}

class _CameraScreenState extends State<CameraScreen> {
  // 페이지 기본값
  int _currentIndex = 1;
  String _title = 'Photo';

  // initialPage: 1 -> index 1 에 해당하는 페이지를 기본으로함.
  PageController _pageController = PageController(initialPage: 1);

  @override
  void dispose() {
    _pageController.dispose();
    // 카메라 상태 초기화
    widget._cameraState.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        // 생성과 호출을 동시에해도 되지만,
        // ChangeNotifierProvider(create: (context) => CameraState()),
        // createState()에서 함수를 먼저 호출하기위해 .value() 사용.
        ChangeNotifierProvider<CameraState>.value(value: widget._cameraState),
        // provider 여러개를 호출 할 수 있지만, 데이터 타입이 모두 달라야한다.<CameraState>
      ],
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: PageView(
          controller: _pageController,
          children: [
            Container(color: Colors.red),
            TakePhoto(),
            Container(color: Colors.greenAccent),
          ],
          onPageChanged: (index) {
            // 페이지 변경에 따른 설정
            setState(() {
              _currentIndex = index;

              switch (index) {
                case 0:
                  _title = 'Gallery';
                  break;
                case 1:
                  _title = 'Photo';
                  break;
                case 2:
                  _title = 'Video';
                  break;
              }
            });
          },
        ),
        bottomNavigationBar: BottomNavigationBar(
          iconSize: 0,
          selectedItemColor: Colors.black,
          unselectedItemColor: Colors.black54,
          selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.radio_button_checked), label: 'GALLERY'),
            BottomNavigationBarItem(
                icon: Icon(Icons.radio_button_checked), label: 'PHOTO'),
            BottomNavigationBarItem(
                icon: Icon(Icons.radio_button_checked), label: 'VIDEO'),
          ],
          currentIndex: _currentIndex,
          onTap: _onItemTabbed,
        ),
      ),
    );
  }

  void _onItemTabbed(index) {
    setState(() {
      _currentIndex = index;
      _pageController.animateToPage(
        _currentIndex,
        duration: Duration(milliseconds: 200),
        curve: Curves.fastOutSlowIn,
      );
    });
  }
}