iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Mobile Development

Flutter Didilong系列 第 10

D-10 image_picker | Flutter筆記

  • 分享至 

  • xImage
  •  

挑張喜歡的照片

本次介紹大多數APP會使用的選取照片
ImagePicker
由於筆者是開發IOS環境
所以過程中大部分為IPhone會遇到的問題和注意事項
其他Device開發環境
建議至pub.dev閱讀套件的Readme喔

IOS注意

千萬別忘記要求讀取相簿.拍照/錄影.錄音權限
在 root根目錄/ios/Runner/Info.plist

NSPhotoLibraryUsageDescription
NSCameraUsageDescription
NSMicrophoneUsageDescription


範例 拍照/選取相簿圖片,顯示於畫面

@override
  Widget build(BuildContext context) {
    final ImagePicker _picker = ImagePicker();
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker'),
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                child: path != null
                    ? Image(
                        image: AssetImage(
                          path!,
                        ),
                        height: MediaQuery.of(context).size.height * 0.5,
                        width: MediaQuery.of(context).size.width * 0.5,
                      )
                    : const Icon(Icons.abc_outlined),
              ),
              Container(
                color: Colors.black38,
                child: TextButton(
                    onPressed: () async {
                      XFile? image =
                          await _picker.pickImage(source: ImageSource.gallery);
                      //ImageSource.gallery用於讀取相簿
                      //ImageSource.camera 即可使用相機拍照
                      setState(() {
                        if (image != null) {
                          path = image.path;
                        }
                      });
                    },
                    child: const Text("Image")),
              )
            ],
          ),
        ),
      ),
    );
  }

上一篇
D-9 Route | Flutter筆記
下一篇
D-11 Assets/Network | Flutter筆記
系列文
Flutter Didilong30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言