zoukankan      html  css  js  c++  java
  • flutter image_picker

    点击选中图片,底部弹窗让用户选择使用相册还是相机,用户选中选项后,跳转到对应的相册或者相机功能,结果将图片显示出来

    image_picker: ^0.6.1+4
    iOS使用image_picker需要在info.plist中添加3个字符串字段

       Privacy - Photo Library Usage Description
       Privacy - Camera Usage Description
       Privacy - Microphone Usage Description
    

    相关代码

    import 'dart:io';
    
    import 'package:flutter/material.dart';
    import 'package:image_picker/image_picker.dart';
    
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      File _image;
      File _image2;
    
      Future getImage(ImageSource source, int type) async {
        var image = await ImagePicker.pickImage(source: source);
        setState(() {
          if (type == 0) {
            _image = image;
          } else {
            _image2 = image;
          }
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('aaaa'),
          ),
          body: Center(
              child: Column(
            // crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  GestureDetector(
                    child: Container(
                       100,
                      height: 100,
                      color: Colors.blue,
                      child: _image == null
                          ? Text('No image selected.')
                          : Image.file(_image,fit: BoxFit.cover,),
                    ),
                    onTap: () {
                      //点击选取图片
                      // getImage(0);
                     _showSelectionDialog(context,0);
                    },
                  ),
                  GestureDetector(
                    child: Container(
                       100,
                      height: 100,
                      color: Colors.orange,
                      child: _image2 == null
                          ? Text('No image selected.')
                          : Image.file(_image2,fit: BoxFit.cover),
                    ),
                    onTap: () {
                      _showSelectionDialog(context,1);
                      // getImage(1);
    
                    },
                  ),
                ],
              ),
            ],
          )),
        );
      }
    
        void _showSelectionDialog(BuildContext context,int type) {
        showModalBottomSheet(
          context: context,
          isScrollControlled: false,
          builder: (ctx) {
            return Container(
              color: Colors.grey,
              height: 130,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  GestureDetector(
                    child: _itemCreat(context, '相机'),
                    onTap: (){
                        print('选中相机');
                        Navigator.pop(context);
                        getImage(ImageSource.camera,type);
                    },
                  ),
                  GestureDetector(
                    child: _itemCreat(context, '相册'),
                    onTap: (){
                      print('选中相册');
                      Navigator.pop(context);
                      getImage(ImageSource.gallery,type);
                    },
                  ),
                  GestureDetector(
                    child: Padding(
                      padding: EdgeInsets.only(top: 10),
                      child: _itemCreat(context, '取消'),
                    ),
                    onTap: (){
                      Navigator.pop(context);
                    },
                  )
                ],
              ),
            );
          },
        );
      }
    
      Widget _itemCreat(BuildContext context, String title) {
        return Container(
          color: Colors.white,
          height: 40,
           MediaQuery.of(context).size.width,
          child: Center(
            child: Text(
              title,
              style: TextStyle(fontSize: 16, color: Colors.black),
              textAlign: TextAlign.center,
            ),
          ),
        );
      }
    }
    
    
  • 相关阅读:
    二维前缀和
    素数筛法
    dp-最大连续子序列的和
    dp-最长递增子序列 (LIS)
    dp-完全背包(题)
    dp-多重背包
    dp-完全背包
    DP-01背包 (题)
    DP- 01背包问题
    DP-直线分割递推
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/11573139.html
Copyright © 2011-2022 走看看