Flutter-将图像从一页推到另一页

Question

我对flutter还很陌生，不知道如何解决以下问题。

---

------我想做什么----

我必须筛选以下

屏幕1:有一个按钮将打开图库以选择图像，选择后的图像将发送到下一个屏幕。

屏幕2: 一个简单的屏幕，使用此颤振软件包来裁剪图像。在图像被裁剪后，我想把它送回第一个屏幕(放在按钮的位置(，然后在第一个屏幕上访问它。

---

------我做了什么----

我创建了第一个和第二个屏幕，还制作了打开图库并将照片发送到第二个页面的按钮。当我试图将裁剪后的图像发送回屏幕1时，问题就出现了，这根本不起作用。

屏幕1:

class RegisterPage extends StatefulWidget {
@override
_RegisterPageState createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
@override
Widget build(BuildContext context) {
return Center(
child: ProfilePicButton(),
);
}
}

屏幕2:

class SimpleCropRoute extends StatefulWidget {
final File imagePath;
const SimpleCropRoute({Key key, this.imagePath}) : super(key: key);
@override
_SimpleCropRouteState createState() => _SimpleCropRouteState();
}
class _SimpleCropRouteState extends State<SimpleCropRoute> {
final cropKey = GlobalKey<ImgCropState>();
Future<Null> showImage(BuildContext context, File file) async {
FileImage(file)
.resolve(new ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo info, bool _) {
print('-------------------------------------------$info');
}));
return showDialog<Null>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(
'Current screenshot：',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w300,
color: Theme.of(context).primaryColor,
letterSpacing: 1.1),
),
content: Image.file(file));
});
}
@override
Widget build(BuildContext context) {
final Map args = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text(
'Zoom and Crop',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
leading: new IconButton(
icon:
new Icon(Icons.navigate_before, color: Colors.black, size: 40),
onPressed: () => Navigator.of(context).pop(),
),
),
body: Center(
child: ImgCrop(
key: cropKey,
// chipRadius: 100,
// chipShape: 'rect',
maximumScale: 3,
image: FileImage(widget.imagePath),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
final crop = cropKey.currentState;
final croppedFile =
await crop.cropCompleted(widget.imagePath, pictureQuality: 600);
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ProfilePicButton(
image: croppedFile)));
// showImage(context, croppedFile);
},
tooltip: 'Increment',
child: Text('Crop'),
));
}
}

按钮本身：

class ProfilePicButton extends StatefulWidget {
final File image;
const ProfilePicButton({Key key, this.image}) : super(key: key);
@override
_ProfilePicButtonState createState() => _ProfilePicButtonState();
}
class _ProfilePicButtonState extends State<ProfilePicButton> {
File _image;
final picker = ImagePicker();
final cropKey = GlobalKey<ImgCropState>();
void getImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SimpleCropRoute(
imagePath: _image)));
}
});
}
void _showActionSheet() {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return SafeArea(
child: ListTile(
leading: new Icon(Icons.photo_library),
title: new Text("Galery"),
onTap: () async {
getImage();
},
),
);
});
}
@override
Widget build(BuildContext context) {
return FlatButton(
onPressed: _showActionSheet,
child: Center(
// child: _image == null ? Text('No image selected.') : Image.file(_image),
child: _image == null ? Text('No image selected.') : Image.file(_image),
),
);
}
}

---

有人能帮我了解如何将图像发送回第一个屏幕吗？

Answer 1

我在您的代码中观察到的一件事是，您正在运行pop和push。这意味着永远无法达到Push。现在，您的代码正在加载上一个屏幕。

因此，删除这个导航器.pop(上下文(；从浮动操作按钮按下事件。

如果你想获得更新的内容，可以使用Navigator.push加载带有新值的页面。这就像向前移动而不是向后移动。