Update a variable after executing a future function - flutter

Question

I have a function called ff which takes 2 images, and returns an outputimage , I"d like to update the original image, when the user taps on any of the style images, and display the outputimage instead of the original one . I know I should use setstate somehow, but I'm confused on how and where
code :
Future ff(String styleImagePath, String originalImagePath) async {
ImageTransferFacade showtime = ImageTransferFacade();
var original_image = showtime.loadoriginalImage(originalImagePath);
var style_image = showtime.loadStyleImage(styleImagePath);
var output_image = showtime.transfer(await original_image, await style_image);
return output_image;
}
class second extends StatefulWidget {
const second({
Key? key,
required this.image,
}) : super(key: key);
final XFile image;
#override
State<second> createState() => _secondState();
}
class _secondState extends State<second> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Card(
child: Image.file(File(widget.image
.path))))), // this is the original image which i'd like to replace once user taps on the style image
bottomNavigationBar: BottomAppBar(
color: Colors.white,
child: CarouselSlider.builder(
itemCount: imageList.length,
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
itemBuilder: (context, index, realIdx) {
return Container(
child: Center(
child: GestureDetector(
onTap: () => ff(imageList[index], widget.image.path),
child: Image.network(imageList[index],
fit: BoxFit.cover, width: 1000)),
));
},
),
),
floatingActionButton: const FloatingActionButton(onPressed: null),
);
}
}

Answer 1

Try this:
Future ff(String styleImagePath, String originalImagePath) async {
ImageTransferFacade showtime = ImageTransferFacade();
var original_image = showtime.loadoriginalImage(originalImagePath);
var style_image = showtime.loadStyleImage(styleImagePath);
var output_image = showtime.transfer(await original_image, await style_image);
return output_image;
}
class second extends StatefulWidget {
const second({
Key? key,
required this.image,
}) : super(key: key);
final XFile image;
#override
State<second> createState() => _secondState();
}
class _secondState extends State<second> {
late XFile _image;
initState(){
_image = widget.image;
super.initState();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Card(
child: Image.file(File(image
.path))))), // this is the original image which i'd like to replace once user taps on the style image
bottomNavigationBar: BottomAppBar(
color: Colors.white,
child: CarouselSlider.builder(
itemCount: imageList.length,
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
itemBuilder: (context, index, realIdx) {
return Container(
child: Center(
child: GestureDetector(
onTap: () {
ff(imageList[index], widget.image.path).then((value){
setState((){
_image = value;
});
});
}, child: Image.network(imageList[index],
fit: BoxFit.cover, width: 1000)),
));
},
),
),
floatingActionButton: const FloatingActionButton(onPressed: null),
);
}
}