~242. Using the Device Camera For Taking Pictures

1. 카메라 기능을 활성화 시켜보자.

 

다트 패키지아래 이미지 피커를 다운받자.

https://pub.dev/packages/image_picker

image_picker | Flutter Package

 

위 설명을 보면 ios 같은 경우 사전 세팅해야되는 부분들이 있다. ios 앱을 출시할거라면 반드시 세팅.

android는 따로 설정 없음. (글작성 기준, 나중에 최신 버전으로 다시 봐야함)

 

- add_place.dart

import 'package:favorite_places/widgets/image_input.dart';

import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:favorite_places/providers/user_places.dart';

class AddPlaceScreen extends ConsumerStatefulWidget {

  const AddPlaceScreen({super.key});

  @override

  ConsumerState<AddPlaceScreen> createState() {

    return _AddPlaceScreenState();

  }

}

class _AddPlaceScreenState extends ConsumerState<AddPlaceScreen> {

  final _titleController = TextEditingController();

  void _savePlace() {

    final enteredTitle = _titleController.text;

    if (enteredTitle.isEmpty) {

      return;

    }

    ref.read(userPlacesProvider.notifier).addPlace(enteredTitle);

    Navigator.of(context).pop();

  }

  @override

  void dispose() {

    _titleController.dispose();

    super.dispose();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Add new Place'),

      ),

      body: SingleChildScrollView(

        padding: const EdgeInsets.all(12),

        child: Column(

          children: [

            TextField(

              decoration: const InputDecoration(labelText: 'Title'),

              controller: _titleController,

              style: TextStyle(

                color: Theme.of(context).colorScheme.onBackground,

              ),

            ),

            const SizedBox(height: 10),

            const ImageInput(),

            const SizedBox(height: 16),

            ElevatedButton.icon(

              onPressed: _savePlace,

              icon: const Icon(Icons.add),

              label: const Text('Add Place'),

            ),

          ],

        ),

      ),

    );

  }

}

 

1) add_place화면에 ImageInput 위젯을 만들었다.

 

- ImageInput

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

class ImageInput extends StatefulWidget {

  const ImageInput({super.key});

  @override

  State<ImageInput> createState() {

    return _ImageInputState();

  }

}

class _ImageInputState extends State<ImageInput> {

  File? _selectedImage;

  void _takePicture() async {

    final imagePicker = ImagePicker();

    final pickedImage =

        await imagePicker.pickImage(source: ImageSource.camera, maxWidth: 600);

    if (pickedImage == null) {

      return;

    }

    setState(() {

      _selectedImage = File(pickedImage.path);

    });

  }

  @override

  Widget build(BuildContext context) {

    Widget content = TextButton.icon(

      icon: const Icon(Icons.camera),

      label: const Text('Take Picture'),

      onPressed: _takePicture,

    );

    if (_selectedImage != null) {

      content = GestureDetector(

        onTap: _takePicture,

        child: Image.file(

          _selectedImage!,

          fit: BoxFit.cover,

          width: double.infinity,

          height: double.infinity,

        ),

      );

    }

    return Container(

      decoration: BoxDecoration(

        border: Border.all(

          width: 1,

          color: Theme.of(context).colorScheme.primary.withOpacity(0.2),

        ),

      ),

      height: 250,

      width: double.infinity,

      alignment: Alignment.center,

      child: content,

    );

  }

}

 

1) ImagePicker를 사용해서 모바일 카메라에 접근 후 촬영 및 저장

2) File 타입은 별도 dart에서 가지고 와야한다.

3) 사진을 찍기전에는 이미지 아이콘과 이미지, 사진을 찍으면 해당 사진 이미지가 해당 content값으로 대체

 

 

 

- 결과 화면

 

사진 찍기 전

 

사진 찍은 후