我正在创建一个使用 slider 的图像编辑器应用程序,类似于 Instagram,我正在使用库 image/image.dart。 问题是,一旦您移动 slider ,它就会更新图像,但就在此时,如果您再次移动它,它就不会更新。
我已经按预期设置了所有内容,setState() 功能如 flutter 所要求的那样,但我不知道为什么它不会再次更新。
import 'dart:io';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as br;
import 'package:path_provider/path_provider.dart';
import 'package:image_picker/image_picker.dart';
class ImageManager extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ImageManagerState();
}
}
class _ImageManagerState extends State<ImageManager> {
File imageFile;
br.Image image;
Image _imageWidget;
Future<String> get _localPath async {
final directory = await getApplicationDocumentsDirectory();
return directory.path;
}
// get tmp file
Future<File> get _localFile async {
final path = await _localPath;
return File('$path/tmp.jpg');
}
// pick image on button click
Future<void> _pickImage(ImageSource source) async{
File selectedFile = await ImagePicker.pickImage(source: source);
br.Image selectedImage;
if (selectedFile != null){
selectedImage = br.decodeImage(selectedFile.readAsBytesSync());
br.grayscale(selectedImage);
selectedFile.writeAsBytesSync(br.encodeJpg(selectedImage));
}
setState((){
image = selectedImage;
imageFile = selectedFile;
_imageWidget = Image.file(imageFile);
});
}
// MAIN PROBLEM, UPDATING THE CONTRAST WILL ONLY DO IT ONCE
Future<void> updateContrast(value) async{
File contrastFile = imageFile;
br.Image contrast = br.decodeImage(contrastFile.readAsBytesSync());
contrast = br.adjustColor(contrast, contrast: value);
contrastFile.writeAsBytesSync(br.encodeJpg(contrast));
// Save the thumbnail as a jpg.
File path = await _localFile;
path.writeAsBytesSync(br.encodeJpg(contrast));
setState(() {
image = contrast;
imageFile = contrastFile;
if(path != null){
_imageWidget = Image.file(path);
print(value);
}
});
}
//
Widget _buildImage(BuildContext context){
return Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
child: _imageWidget,
),
Column(
children: [
Container(
padding: const EdgeInsets.only(left: 8, right: 8),
child: Column(
children: <Widget>[
// contrast
Text("Contraste"),
Padding(
padding: const EdgeInsets.only(bottom: 4.0, top: 0.0),
child: Container(
child: Slider(
min: 0.0,
max: 1.0,
divisions: 100,
value: _contrast,
activeColor: Colors.blue[500],
inactiveColor: Colors.blue[50],
label: "${(_contrast *100).round()}",
onChanged: (value) async{
changeContrast(value);
},
onChangeEnd: (value) async{
updateContrast(value);
},
),
),
),
],
),
),
],
),
]
);
}
我希望每次更改 slider 时图像都会更新。
最佳答案
imageCache.clear()
将完成这项工作。
我也无法重新加载图像以在屏幕上本地保存。从调试中,我观察到旧图像实际上已被删除,新图像被复制到那里,但屏幕上没有任何变化。以下是您需要的代码。
因此,在 Scaffold
的主体中,我制作了一个 FutureBuilder
调用另一个函数 reload()
,然后加载文件并返回图像。
FutureBuilder(
future: reload(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if(snapshot.connectionState == ConnectionState.done){
return snapshot.data;
}
else{
return CircularProgressIndicator();
}
},
),
这是 reload()
函数:
reload() async {
String path = "path of your image";
File profileImage = File("$path/name.jpg");
if(profileImage.existsSync() == false){
return Text("File Not Found");
}
else{
imageCache.clear();
return Image.file(profileImage);
}
}
我查看了 Flutter 的 github,jamesncl has already suggested this .
关于Flutter Image Widget 不会在更改状态时更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58794144/