[Flutter/Project](Instagram Clone) 카메라 갤러리 가져오기

---

home_page.dart 파일 변경점. 퍼미션 photos, storage 추가

camera_screen.dart 파일 변경점. GalleryState 추가

camera_screen.dart 파일 변경점. GalleryState 추가

---

소스코드 및 pubspec.yaml

// models/gallery_state.dart

import 'package:flutter/foundation.dart';
import 'package:local_image_provider/local_image.dart';
import 'package:local_image_provider/local_image_provider.dart';

class GalleryState extends ChangeNotifier {
  LocalImageProvider _localImageProvider;
  bool _hasPermission;
  List<LocalImage> _images;

  Future<bool> initProvider() async {
    _localImageProvider = LocalImageProvider();
    _hasPermission = await _localImageProvider.initialize();
    if (_hasPermission) {
      // 갤러리에서 30개의 이미지를 받아옴
      _images = await _localImageProvider.findLatest(30);
      notifyListeners();
      return true;
    } else {
      return false;
    }
  }

  // 다른 파일에서 접근 가능.
  List<LocalImage> get images => _images;

  LocalImageProvider get localImageProvider => _localImageProvider;
}

// widgets/my_gallery.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/models/gallery_state.dart';
import 'package:local_image_provider/device_image.dart';
import 'package:provider/provider.dart';

class MyGallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<GalleryState>(
      builder: (BuildContext context, GalleryState galleryState, Widget child) {
        return GridView.count(
          crossAxisCount: 3,
          children: getImages(galleryState),
        );
      },
    );
  }

  List<Widget> getImages(GalleryState galleryState) {
    return galleryState.images
        .map((localImage) => Image(
              image: DeviceImage(localImage),
            ))
        .toList();
  }
}

// screens/camera_screen.dart

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

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

  @override
  _CameraScreenState createState() {
    // 빠른 카메라 실행을 위해 해당 스크린 생성됨과 동시에 함수 실행.
    _cameraState.getReadyToTakePhoto();
    // 빠른 갤러리 실행을 위해 해당 스크린 생성됨과 동시에 함수 실행.
    _galleryState.initProvider();
    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>
        ChangeNotifierProvider<GalleryState>.value(value: widget._galleryState),
      ],
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: PageView(
          controller: _pageController,
          children: [
            MyGallery(),
            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,
      );
    });
  }
}