Android Studio开发Flutter应用程序,使用Pick image插件1

说在前面:参考视频的例子创建于2021年5月4日,本人的代码创建于2021年7月15日,随着Pick image的更新,代码使用同样会更新,如读者阅读时间与上述时间差距过久,请参考官方示例:https://pub.dev/packages/image_picker/example

本文目的:官方示例的代码,既含有image picker,又含有video player,太复杂了,我不懂.

Android Studio开发Flutter应用程序,使用Pick image插件2blog链接:

https://blog.csdn.net/yingkongshi07/article/details/118790688

而且本人在写代码的时候,网上能找到的image picker的例子都是旧版的,官方代码更新后不能使用旧的方法,所以参考搬运了youtube上的视频,dart文件完整代码如下:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';


///这是一个拍照app的实例
class PhotoApp extends StatefulWidget {
  @override
  _PhotoAppState createState() => _PhotoAppState();
}

class _PhotoAppState extends State<PhotoApp> {
  File? _image;

  //用于从camera获取照片的方法
  _imageFromCamera() async{
    //图片质量设置很重要,否则会导致图片size过大,导致请求超时
    PickedFile? image =
    await ImagePicker().getImage(source: ImageSource.camera,
    imageQuality: 50);
    if(image != null){
      setState(() {
        _image = File(image.path);
      });
    }
  }

  //用于从相册中取得图片的方法
  _imageFromGallery() async{
    PickedFile? image =
    await ImagePicker().getImage(source: ImageSource.gallery,
        imageQuality: 50);
    if(image !=null){
      setState(() {
        _image = File(image.path);
      });
    }
  }
  //用于让用户选择拍照,还是看相册的图片
  void _showPicker(var content){
    //showModalBottomSheet 是Flutter中全局封装的一个快捷打开底部弹框的方法，
    //通过 builder 构建弹框中的内容
    showModalBottomSheet(context: context,
        builder: (BuildContext bc){
          return SafeArea(
              child: Wrap(
                children: [
                  //相册
                  ListTile(
                    leading: Icon(Icons.photo_album),
                    title: Text("相册"),
                    onTap: (){
                      _imageFromGallery();
                      Navigator.of(context).pop();
                    },
                  ),
                  //相机
                  ListTile(
                    leading: Icon(Icons.camera_alt),
                    title: Text("相机"),
                    onTap: (){
                      _imageFromCamera();
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ));
        });
  }
  

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.yellow
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Photo App展示"),
          leading: GestureDetector(
            onTap: (){
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back),
          ),
        ),

        //在body中展示相机,相册的代码
        body:Column(
          children: [
            //将内容(黑色的Container)居中
            Center(
                child: GestureDetector(
                  onTap: (){
                    _showPicker(context);
                  },
                  child: Container(
                    color: Colors.black,
                    width: 200,
                    height: 50,
                    child: Text("选择图片",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize:30
                      ),
                      //白色的字体居中
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
            ),
            Container(
              width: 300,
              height: 300,
              color: Colors.green,
              child: _image != null ? Image.file(_image!,
                fit: BoxFit.fill,):Icon(Icons.camera_alt_outlined),
            ),
          ],
        ),

      ),
    );
  }
}

效果图:

1.界面

2.点击"选择图片"按钮后

3.选择"相册"后

 4.选择相机后,由于是emulator,所以不能使用相机.

会继续找相关代码学习,如有收获,会继续更细相机使用的代码.

YouTube原链接:https://www.youtube.com/watch?v=ia8D5dym2Lo

b站视频搬运链接:

Flutter中使用Pick image,2021年5月4日例子(Android Studio)