Flutter 仿IOS 底部彈出框選擇拍照和相冊

Flutter 仿IOS 底部彈出框選擇拍照和相冊

涉及到的庫:
image_picker:選擇圖片
flutter_luban:壓縮圖片
path_provider:獲取原生的sd路徑

  void showImgDialog(int type){
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        builder: (BuildContext context) {
          return Container(
            height: 171,
            margin: EdgeInsets.only(left: 15, right: 15), //控制底部的距離
            child: Column(
              children: <Widget>[
                Container(
                  height: 101,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: Column(
                    children: <Widget>[
                      InkWell(
                        onTap: () async {
                          Navigator.pop(context);
                          var imgPath = await _getImageFromCamera();
                          switch(type){
                            case 0:
                              notifyImg = imgPath;
                              break;
                            case 1:
                              emergencyImg = imgPath;
                              break;
                            case 2:
                              promiseImg = imgPath;
                              break;
                          }
                          setState(() {});
                        },
                        child: Container(
                          height: 50,
                          child: Center(
                            child: Text(
                              '拍照',
                              style: TextStyle(
//                                fontSize: Config.fontSize17,
                                  letterSpacing: 2.0,
                                  fontWeight: FontWeight.w200),
                            ),
                          ),
                        ),
                      ),
                      Divider(
                        height: 1,
                        color: Colors.grey,
                      ),
                      InkWell(
                        onTap: () async {
                          Navigator.pop(context);
                          var imgPath = await _getImageFromGallery();
                          switch(type){
                            case 0:
                              notifyImg = imgPath;
                              break;
                            case 1:
                              emergencyImg = imgPath;
                              break;
                            case 2:
                              promiseImg = imgPath;
                              break;
                          }
                          setState(() {});
                        },
                        child: Container(
                          height: 50,
                          child: Center(
                            child: Text(
                              '本地相冊',
                              style: TextStyle(
//                                fontSize: Config.fontSize17,
                                  letterSpacing: 2.0,
                                  fontWeight: FontWeight.w200),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                InkWell(
                  onTap: (){
                    NavigatorUtils.goBack(context);
                  },
                  child: Container(
                    margin: EdgeInsets.only(top: 10, bottom: 10,),
                    height: 50,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Center(
                      child: Text(
                        '取消',
                        style: TextStyle(
                            color: Colors.red,
//                          fontSize: Config.fontSize17,
                            fontWeight: FontWeight.w200),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        });
  }


  Future _getImageFromCamera() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 400);
    return await compassImage(image);
  }
  
  //相冊選擇
  Future<String> _getImageFromGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    return await compassImage(image);
  }

  Future<String> compassImage(File imageFile) async{
    //壓縮對象
    CompressObject compressObject = CompressObject(
      imageFile:imageFile, //image
      path: await FileUtils.getTemDirectory(), //compress to path
      quality: 85,//first compress quality, default 80
      step: 9,//compress quality step, The bigger the fast, Smaller is more accurate, default 6
      mode: CompressMode.LARGE2SMALL,//default AUTO
    );
    return await Luban.compressImage(compressObject);
  }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章