flutter image_picker

點擊選中圖片,底部彈窗讓用戶選擇使用相冊仍是相機,用戶選中選項後,跳轉到對應的相冊或者相機功能,結果將圖片顯示出來app

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

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

相關代碼ide

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(
                  width: 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(
                  width: 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,
      width: MediaQuery.of(context).size.width,
      child: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 16, color: Colors.black),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}
相關文章
相關標籤/搜索