Flutter移动应用开发 - 照相机调用和访问相簿

0. 项目简介

项目想法脱胎于2023年服务外包大赛A18题 随手买（详情）

整个APP思路如下：

这篇博客主要服务于图片识别中心，在点击按钮后访问相簿或者照相机。

1. 效果展示

2. 部分代码

思路就是利用image_picker中的几个函数操作。

依赖如下

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_screenutil: ^3.1.0
  image_picker: 0.8.6
  m_loading: ^0.0.1

相关文件如下

passager.dart

passager.dart

import 'dart:async';
import 'package:final_work/pic_loading.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter/cupertino.dart';
import 'package:image_picker/image_picker.dart';


class passenger extends StatefulWidget {
  const passenger({Key? key}) : super(key: key);

  @override
  State<passenger> createState() => _passengerState();
}

class _passengerState extends State<passenger> {

  @override
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }


  var _imgPath;

  /*拍照*/
  _takePhoto() async {
    final ImagePicker _picker = ImagePicker();
    var image = await _picker.pickImage(source: ImageSource.camera);
    // var image = await ImagePicker.pickImage(source: ImageSource.camera);
    setState(() {
      _imgPath = image;
    });
    if(_imgPath != null)
      Navigator.of(context).push(
        MaterialPageRoute<void>(
          builder: (BuildContext context) {
            return pic_loading(imgPath: _imgPath);
          },
        ),
      );
  }

  /*相册*/
  _openGallery() async {
    final ImagePicker _picker = ImagePicker();
    var image = await _picker.pickImage(source: ImageSource.gallery);
    // var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _imgPath = image;
    });
    
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, allowFontScaling: false);





    void _showActionSheet(BuildContext context) {
      showCupertinoModalPopup<void>(
        context: context,
        builder: (BuildContext context) => CupertinoActionSheet(
          title: const Text('请选择'),
          // message: const Text('Message'),
          actions: <CupertinoActionSheetAction>[
            CupertinoActionSheetAction(
              isDefaultAction: true,
              onPressed: _takePhoto,
              child: const Text('打开相机'),
            ),
            CupertinoActionSheetAction(
              onPressed: _openGallery,
              child: const Text('打开本地相簿'),
            ),
            CupertinoActionSheetAction(
              isDestructiveAction: true,
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('取消'),
            ),
          ],
        ),
      );
    }

    void showCupertinoAlertDialog() {
      showDialog(
          context: context,
          builder: (BuildContext context) {
            return CupertinoAlertDialog(
              title: Text("“Clark NB”想访问您的相机"),
              content: Column(
                children: <Widget>[
                  SizedBox(
                    height: 10,
                  ),
                  Align(
                    child: Text("使用相机获取照片用于识别商品"),
                    alignment: Alignment(0, 0),
                  ),
                ],
              ),
              actions: <Widget>[
                CupertinoDialogAction(
                  child: Text("不允许"),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                CupertinoDialogAction(
                  child: Text("好"),
                  onPressed: () {
                    Navigator.pop(context);
                    _showActionSheet(context);
                  },
                ),
              ],
            );
          });
    }


    // 点击出现相机
    Widget buildPhoto = Center(
      child: SizedBox(
        width: double.maxFinite,
        child: IconButton(
          padding: EdgeInsets.zero,
          onPressed: showCupertinoAlertDialog,
          tooltip: 'Pick Image',
          icon: Icon(
            Icons.add_a_photo,
            size: 200,
          ),
        ),
      ),
    );




    return Scaffold(
      body: Column(
        children: <Widget>[
          SizedBox(height: ScreenUtil().setHeight(240),),
          buildPhoto,
          SizedBox(height: ScreenUtil().setHeight(70),),
          Spacer(),
        ],
      ),
    );
  }
}