Flutter Сохранить и загрузить изображение - Выбор изображения / Обрезка изображения - PullRequest
Новая
       25

Flutter Сохранить и загрузить изображение - Выбор изображения / Обрезка изображения

0 голосов
/ 18 июня 2020

Пытаюсь сделать экран аватарки на флаттере. Я использовал эти 2 плагина (обрезка изображения и средство выбора изображений) для выбора и редактирования изображения. 

class ProfilePage extends StatefulWidget {
  @override
  __ProfilePageState createState() => __ProfilePageState();
}

class __ProfilePageState extends State<ProfilePage> {
  File _pickedImage;
  String _imagepath;

  @override
  void initState() {
    super.initState();
    LoadImage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
//      appBar: AppBar(
//        title: Text('Profile'),
//      ),
      body: ListView(
        children: <Widget>[
          Center(
            child: CircleAvatar(
              radius: 80,
              child: _imagepath == null ? Text('Profile image') : null,
              backgroundImage:
                  _imagepath != null ? FileImage(File(_imagepath)) : null,
            ),
          ),
          SizedBox(height: 10),
          RaisedButton(
            child: Text('Select image'),
            onPressed: () {
              _showPickOptionDialog(context);
            },
          )
        ],
      ),
    );
  }

  _loadPicker(ImageSource source) async {
    File picked = await ImagePicker.pickImage(source: source);

    if (picked != null) {
      _cropImage(picked);
      SaveImage(picked.path);
    }
    LoadImage();
    Navigator.pop(context);
  }

  _cropImage(File picked) async {
    File cropped = await ImageCropper.cropImage(
      androidUiSettings: AndroidUiSettings(
        toolbarTitle: "Modifica immagine",
        statusBarColor: Colors.green,
        toolbarColor: Colors.green,
        toolbarWidgetColor: Colors.white,
      ),
      sourcePath: picked.path,
//      aspectRatioPresets: [
//        CropAspectRatioPreset.original,
//        CropAspectRatioPreset.ratio16x9,
//        CropAspectRatioPreset.ratio4x3,
//      ],
      maxWidth: 800,
    );
    if (cropped != null) {
      setState(() {
        _pickedImage = cropped;
      });
    }
  }

  void _showPickOptionDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (context) => AlertDialog(
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                      title: Text('select image from gallery'),
                      onTap: () {
                        _loadPicker(ImageSource.gallery);
                      }),
                  ListTile(
                    title: Text('Scatta una foto'),
                    onTap: () {
                      _loadPicker(ImageSource.camera);
                    },
                  ),
                ],
              ),
            ));
  }

  void SaveImage(path) async {
    SharedPreferences saveimage = await SharedPreferences.getInstance();
    saveimage.setString("imagepath", path);
  }

  void LoadImage() async {
    SharedPreferences saveimage = await SharedPreferences.getInstance();
    setState(() {
      _imagepath = saveimage.getString("imagepath");
    });
  }
}

Код работает, но сохраняет только выбранное изображение, а не обрезанное.

Я пробовал много раз, но не вижу ошибки, извините за это ..

не могли бы вы мне помочь?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 июня 2020

Нашел решение, отредактировав эту часть: 

 if (cropped != null) {
  _pickedImage = cropped;
  SaveImage(_pickedImage.path);
  LoadImage();
  setState(() {});
}

}

0 голосов
/ 19 июня 2020

при использовании Future вы должны вернуть значение и использовать это значение с .then () попробуйте это: 

class ProfilePage extends StatefulWidget {
  @override
  __ProfilePageState createState() => __ProfilePageState();
}

class __ProfilePageState extends State<ProfilePage> {
  File _pickedImage;
  String _imagepath;

  @override
  void initState() {
    super.initState();
    LoadImage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
//      appBar: AppBar(
//        title: Text('Profile'),
//      ),
      body: ListView(
        children: <Widget>[
          Center(
            child: CircleAvatar(
              radius: 80,
              child: _imagepath == null ? Text('Profile image') : null,
              backgroundImage:
                  _imagepath != null ? FileImage(File(_imagepath)) : null,
            ),
          ),
          SizedBox(height: 10),
          RaisedButton(
            child: Text('Select image'),
            onPressed: () {
              _showPickOptionDialog(context);
            },
          )
        ],
      ),
    );
  }

  _loadPicker(ImageSource source) async {
    File picked = await ImagePicker.pickImage(source: source);

    if (picked != null) {
      _cropImage(picked).then(File cropped){
         SaveImage(cropped.path);
      }

    }
    LoadImage();
    Navigator.pop(context);
  }

  Future<File> _cropImage(File picked) async {
    File cropped = await ImageCropper.cropImage(
      androidUiSettings: AndroidUiSettings(
        toolbarTitle: "Modifica immagine",
        statusBarColor: Colors.green,
        toolbarColor: Colors.green,
        toolbarWidgetColor: Colors.white,
      ),
      sourcePath: picked.path,
//      aspectRatioPresets: [
//        CropAspectRatioPreset.original,
//        CropAspectRatioPreset.ratio16x9,
//        CropAspectRatioPreset.ratio4x3,
//      ],
      maxWidth: 800,
    );
    if (cropped != null) {
      setState(() {
        _pickedImage = cropped;
      });
    }
   return cropped;
  }

  void _showPickOptionDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (context) => AlertDialog(
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                      title: Text('select image from gallery'),
                      onTap: () {
                        _loadPicker(ImageSource.gallery);
                      }),
                  ListTile(
                    title: Text('Scatta una foto'),
                    onTap: () {
                      _loadPicker(ImageSource.camera);
                    },
                  ),
                ],
              ),
            ));
  }

  void SaveImage(path) async {
    SharedPreferences saveimage = await SharedPreferences.getInstance();
    saveimage.setString("imagepath", path);
  }

  void LoadImage() async {
    SharedPreferences saveimage = await SharedPreferences.getInstance();
    setState(() {
      _imagepath = saveimage.getString("imagepath");
    });
  }
}
...