在 Flutter App 中使用相機和圖庫/照片選取圖像[Flutter專題30]#yyds幹貨盤點#

這裡是堅果前端小課堂，歡迎關注公衆号“堅果前端”，領取flutter電子書以及源碼

圖像選取器是我們經常需要的使用者配置檔案和其他内容的常見元件。我們将使用image_picker​​插件​​。

步驟 1 — 将依賴項添加到*pubspec.yaml*檔案。

environment:

  sdk: ">=2.7.0 <3.0.0"



dependencies:

  flutter:

    sdk: flutter

  image_picker: ^0.8.4      

步驟 2 - 配置本機平台

接下來，我們需要配置本機設定。對于Android平台，不需要任何東西。對于 iOS，打開在 ios/Runner 檔案夾下找到的 Info.plist 檔案，然後添加以下鍵。

NSPhotoLibraryUsageDescription

Allow access to photo library



NSCameraUsageDescription

Allow access to camera to capture photos



NSMicrophoneUsageDescription

Allow access to microphone      

步驟 3 — 圖像選取器功能

在我們螢幕的 StatefulWidget 的 State 類中，聲明一個 File 變量來儲存使用者選取的圖像。

File _image;      

現在編寫兩個函數，分别通過相機和照片庫選擇圖像。可選參數 imageQuality 接受 0 到 100 之間的任何值，你可以根據應用所需的大小和品質進行調整。擷取圖像檔案後，我們将其儲存到_image變量中并調用setState（），以便它可以顯示在螢幕中。

_imgFromCamera() async {

  File image = await ImagePicker.pickImage(

    source: ImageSource.camera, imageQuality: 50

  );



  setState(() {

    _image = image;

  });

}



_imgFromGallery() async {

  File image = await  ImagePicker.pickImage(

      source: ImageSource.gallery, imageQuality: 50

  );



  setState(() {

    _image = image;

  });

}      

步驟4 - 建立用于選擇相機/圖庫的選項選擇器

void _showPicker(context) {

  showModalBottomSheet(

      context: context,

      builder: (BuildContext bc) {

        return SafeArea(

          child: Container(

            child: new Wrap(

              children: [

                new ListTile(

                    leading: new Icon(Icons.photo_library),

                    title: new Text('Photo Library'),

                    onTap: () {

                      _imgFromGallery();

                      Navigator.of(context).pop();

                    }),

                new ListTile(

                  leading: new Icon(Icons.photo_camera),

                  title: new Text('Camera'),

                  onTap: () {

                    _imgFromCamera();

                    Navigator.of(context).pop();

                  },

                ),

              ],

            ),

          ),

        );

      }

    );

}      

步驟 5 - 在螢幕上建立和配置圖像視圖

@override

Widget build(BuildContext context) {

  return Scaffold(

    appBar: AppBar(),

    body: Column(

      children: [

        SizedBox(

          height: 32,

        ),

        Center(

          child: GestureDetector(

            onTap: () {

              _showPicker(context);

            },

            child: CircleAvatar(

              radius: 55,

              backgroundColor: Color(0xffFDCF09),

              child: _image != null

                  ? ClipRRect(

                      borderRadius: BorderRadius.circular(50),

                      child: Image.file(

                        _image,

                        width: 100,

                        height: 100,

                        fit: BoxFit.fitHeight,

                      ),

                    )

                  : Container(

                      decoration: BoxDecoration(

                          color: Colors.grey[200],

                          borderRadius: BorderRadius.circular(50)),

                      width: 100,

                      height: 100,

                      child: Icon(

                        Icons.camera_alt,

                        color: Colors.grey[800],

                      ),

                    ),

            ),

          ),

        )

      ],

    ),

  );

}