zoukankan      html  css  js  c++  java
  • flutter 相册和摄像头(软硬交互调自身系统)image_picker

    首先必须注意一点:在升级flutter1.9+之后,flutter默认的iOS项目为swift,Android的默认项目为kotlin,而且通过IDEA创建的flutter项目,即使勾选了语言为oc,但是创建后的项目仍然是swift,颇为头疼.这里我们讲解的是基于iOS的OC和Android的JAVA来做的,毕竟我还是水手还没上岸成为干货(功力不足)。总之先跑通,再深究。

    image_picker使用方法

    首先添加依赖

    在pubspec.yaml加入image_picker的依赖,版本号在github上找最新的即可。

    如下:最新的是可以在这里找到:https://pub.dev/flutter/packages?q=image_picker,输入:image_picker即可搜索到最新版本,这里用老版本(稳)

     依赖添加完成点击右上角的 Packages get 出现finished及可。

    使用
    依赖添加完成之后我们就可以正常使用了

    是不是超级简单,我们权限申请都不需要管。

    下面是完整代码:

    import 'package:flutter/material.dart';
    import 'package:image_picker/image_picker.dart'; //在pubspec.yaml加入image_picker的依赖,image_picker: ^0.5.0+3
    
    void main() {
      runApp( MaterialApp(
        title: 'Flutter gesture',
    //    home: TutorialHome(),
        home: AuthenticationId(),
      ));
    }
    
    
    class AuthenticationId extends StatefulWidget {
      @override
      _AuthenticationIdState createState() => _AuthenticationIdState();
    }
    class _AuthenticationIdState extends State<AuthenticationId>{
      var imgPath;
      /*拍照*/
      takePhoto() async {
        var image = await ImagePicker.pickImage(source: ImageSource.camera);
    
        setState(() {
          imgPath = image;
        });
      }
      /*相册*/
      openGallery() async {
        var image = await ImagePicker.pickImage(source: ImageSource.gallery);
        setState(() {
          imgPath = image;
        });
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("认证"),
              elevation: 0.0,
            ),
            body: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child: imgPath == null ? Text('请选择拍照'):Image.file(imgPath),
                  ),
                  RaisedButton(
                    onPressed: takePhoto,
                    child: Text("拍照"),
                  ),
                  RaisedButton(
                    onPressed: openGallery,
                    child: Text("选择照片"),
                  ),
                ],
              ),
            ));
      }
    }

    注意事项
    当图片过长超过显示宽高度的话,可能会报 The overflowing RenderFlex has an orientation of Axis.vertical. 这个错,且底部会有黄色的警告。
    具体报错信息大概如下:

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    I/flutter (10595): The following message was thrown during layout:
    I/flutter (10595): A RenderFlex overflowed by 177 pixels on the bottom.
    I/flutter (10595):
    I/flutter (10595): The overflowing RenderFlex has an orientation of Axis.vertical.
    I/flutter (10595): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
    I/flutter (10595): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    I/flutter (10595): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
    I/flutter (10595): RenderFlex to fit within the available space instead of being sized to their natural size.
    I/flutter (10595): This is considered an error condition because it indicates that there is content that cannot be
    I/flutter (10595): seen. If the content is legitimately bigger than the available space, consider clipping it with a
    I/flutter (10595): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
    I/flutter (10595): like a ListView.

    这里我们直接使用 SingleChildScrollView(单个子控件的滚动布局控件) 即可。

    原文不足的地方我这里(上面)已经补全了。
    原文出处:https://blog.csdn.net/yuzhiqiang_1993/article/details/88345232()

  • 相关阅读:
    CSS压缩工具(自动合并重复的定义)
    windows创建服务
    ashx是什么文件,如何创建(转载)
    在mojoportal中建立自定义模块
    Mojoportal2339之汇总页面
    在vs2008中设置jquery智能提示 (转载)
    关于mojoportal在局域网或单机使用时注意事项
    html编辑器kindeditor我的使用方法 (转载)
    visual studio 2008 没有设计视图的解决方法(转载)
    模块开发捷径配置参数
  • 原文地址:https://www.cnblogs.com/gaozhang12345/p/12059625.html
Copyright © 2011-2022 走看看