21、Flutter - 混合開發（二）Flutter使用第三方插件訪問相冊

Flutter - 混合開發（二）Flutter使用第三方插件訪問相冊

 

詳細代碼參見Demo

Demo地址 -> wechat_demo

 

前面文章 9、Flutter - 項目實戰 - 仿微信（三）我的頁面 中最後提到頭像從相冊或拍照來實現變更的功能沒有做，今天就來把項目實戰中的 wechat_demo 中的調用相冊變更頭像實現一下

 

使用一個Flutter第三方插件

image_picker

注意：

當重新導入與原生相關的第三方插件時（例如訪問相冊、地圖定位），需要重新啓動工程。這時候會打印pod install。也就是走了一下iOS   pod導入第三方。cocoapod 在啓動工程的時候纔會

 

import 'package:image_picker/image_picker.dart';

不在展示全部代碼，可自行去GitHub下載源碼或者去  9、Flutter - 項目實戰 - 仿微信（三）我的頁面   文章查看。

class _MinePageState extends State<MinePage> {
  File _avataFile;
  double _left_distance = 50;

  Widget headerWidget() {
    return Container(
      color: Colors.white,
      height: 205,
      child: Container(
//        color: Colors.yellow,
        margin: EdgeInsets.only(top: 100, bottom: 20),
        padding: EdgeInsets.all(10),
        child: Container(
          margin: EdgeInsets.only(left: 10),
//          padding: EdgeInsets.all(5),
//          color: Colors.red,
          child: Row(
            children: <Widget>[
              GestureDetector(
                onTap: _pickImage,
                child: Container(
                  width: 50,
                  height: 50,
                  //圖片通過裝飾器去設置圓角是不起作用的，應該設置在裝飾器內的背景圖
//                child: Image(image:AssetImage('images/Hank.png')),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius:
                        BorderRadius.circular(10.0), //設置圓角，image沒有這個屬性
                    //fit 填充
                    image: DecorationImage(
                        image: _avataFile == null
                            ? AssetImage('images/新的朋友.png')
                            : FileImage(_avataFile),
                        fit: BoxFit.cover),
                  ),
                ), //頭像
              ),
              Container(...),
              )
            ],
          ),
        ),
      ),
    );
  } //頭部抽出來寫個方法

  @override
  Widget build(BuildContext context) {...}

//  async 異步 配合 await 等待，讓該方法內部就成了同步
//  getImage 是異步，不想寫過多的.then等，所以等待轉成同步
  void _pickImage() async {
//    ImagePicker.pickImage(source: null) //過期了

//  ImageSource.gallery 使用相冊
    PickedFile file = await ImagePicker().getImage(source: ImageSource.gallery);
    setState(() {
      _avataFile = File(file.path);
    });
  }
}

定義一個Flie 用來接收選中的圖片

File _avataFile;

image 顯示的時候，根據File 文件是都爲空判斷進行顯示

image: DecorationImage(
    image: _avataFile == null
    ? AssetImage('images/新的朋友.png')
    : FileImage(_avataFile),

 點擊頭像的方法裏面進行調用Image_Picker 的方法

 

方法過期

ImagePicker.pickImage(source: null)

源碼：

@Deprecated('Use imagePicker.getImage() method instead.')
static Future<File> pickImage(
    {@required ImageSource source,
    double maxWidth,
    double maxHeight,

通過源碼可知標記方法過期的方式，在以後自己開發的時候就可以用

@Deprecated('Use imagePicker.getImage() method instead.')

用相機還是相冊

ImagePicker().getImage(source: ImageSource.gallery);

源碼

enum ImageSource {
  /// Opens up the device camera, letting the user to take a new picture.
  camera, //相機

  /// Opens the user's photo gallery.
  gallery, //相冊
}

getImage 返回的是一個Future（ 異步）

Future<PickedFile> getImage({
  @required ImageSource source,

由於返回的是異步的，我們需要再異步回調完成之後，去刷新UI

那麼  async 異步 配合 await 等待，讓該方法內部就成了同步
getImage 是異步，不想寫過多的.then等，所以用等待轉成同步

//  async 異步 配合 await 等待，讓該方法內部就成了同步
//  getImage 是異步，不想寫過多的.then等，所以等待轉成同步
  void _pickImage() async {
//    ImagePicker.pickImage(source: null) //過期了

//  ImageSource.gallery 使用相冊
    PickedFile file = await ImagePicker().getImage(source: ImageSource.gallery);
    setState(() {
      _avataFile = File(file.path);
    });
  }
}

這樣就完了嗎？NO，運行完一點擊馬上崩潰，同時沒有錯誤反饋，沒有打印報錯信息。這是爲什麼呢？因爲我們訪問相冊要授權，去xcode裏面進行授權。

授權，根據自己需要。目前項目中只用了相冊，只添加相冊權限即可。我這裏添加了相冊和相機的權限，計劃以後使用相機，所以先加上

然後再次運行就行

效果圖：

 

比調用iOS原生的來回發送消息簡單多了

地圖定位 location 等等更多第三方插件可以自行去 pub.dev 中查找