Sending photo to GridView from preview page - flutter

Question

When the user agrees to the photo, I want to send the photo back to the homepage where they can access the photo later on.
Currently, I am just opening the camera again on the PhotoPreview page when the user clicks the second button (OutlineButton). Instead, I want this photo to be sent to the homepage.
Here is the relevant portion of the PhotoPreview page
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () => Navigator.pop(
context), // Go back to the camera to take the picture again
child: Icon(Icons.camera_alt),
),
appBar: AppBar(title: Text('Photo Preview')),
body: Column(children: [
Expanded(child: Image.file(File(widget.imagePath))),
const SizedBox(height: 16.0),
OutlineButton(
onPressed: () {
_openGallery();
Navigator.pop(context);
},
child: Text('Okay'),
borderSide: BorderSide(color: Color(0xff33333D)),
),
]),
);
}
}
The Gridview on my home page, which renders the photo in the format I want, is as such
: GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 25,
mainAxisSpacing: 25,
childAspectRatio: (80 / 150),
padding: const EdgeInsets.all(2.0),
children:
List.generate(widget.imageArray.length, (index) {
return Container(
decoration: new BoxDecoration(
color: const Color(0xff000000),
borderRadius: BorderRadius.circular(10),
image: new DecorationImage(
image: FileImage(widget.imageArray[index]),
fit: BoxFit.fill,
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.4),
BlendMode.dstATop),
How can I connect the two, for when the user clicks the OutlineButton that it sends the photo on the preview page to the home screen in the format above?
Edit per answer: Here is full Homepage
import 'dart:io';
import 'package:flutter/material.dart';
class Homepage_1 extends StatefulWidget {
final List<File> imageArray;
Homepage_1({Key key, this.imageArray}) : super(key: key);
#override
_Homepage_1State createState() => _Homepage_1State();
}
class _Homepage_1State extends State<Homepage_1> {
var image;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Padding(
padding:
const EdgeInsets.only(top: 100, left: 40, right: 0, bottom: 0),
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(
'App Name',
style: TextStyle(
fontSize: 60,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Container(
margin:
EdgeInsets.only(top: 0, left: 0, right: 50, bottom: 0),
child: widget.imageArray.isEmpty
? Column(children: [
Text(
'Yikes! You have no photos',
style: TextStyle(
fontSize: 19,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Text(
'Click the circular button below'
style: TextStyle(
fontSize: 15,
fontFamily: 'Avenir',
fontWeight: FontWeight.w500,
),
),
])
: GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 25,
mainAxisSpacing: 25,
childAspectRatio: (80 / 150),
padding: const EdgeInsets.all(2.0),
children:
List.generate(widget.imageArray.length, (index) {
return Container(
decoration: new BoxDecoration(
color: const Color(0xff000000),
borderRadius: BorderRadius.circular(10),
image: new DecorationImage(
image: FileImage(widget.imageArray[index]),
fit: BoxFit.fill,
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.4),
BlendMode.dstATop),
),
),
);
})))
]),
)
]));
}
}
& here is full Photo preview screen:
import 'package:flutter/material.dart';
import 'dart:io';
class PhotoPreviewScreen extends StatefulWidget {
Function setData;
final String imagePath;
PhotoPreviewScreen({Key key, this.setData, this.imagePath}) : super(key: key);
_PhotoPreviewScreenState createState() => _PhotoPreviewScreenState();
}
class _PhotoPreviewScreenState extends State<PhotoPreviewScreen> {
var image;
Future _openGallery() async {
if (widget.setData != null) {
widget.setData(File(image.path));
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () => Navigator.pop(
context), // Go back to the camera to take the picture again
child: Icon(Icons.camera_alt),
),
appBar: AppBar(title: Text('Photo Preview')),
body: Column(children: [
Expanded(child: Image.file(File(widget.imagePath))),
const SizedBox(height: 16.0),
OutlineButton(
onPressed: () async {
await _openGallery();
Navigator.of(context).pop(widget.imagePath);
},
child: Text('Okay'),
borderSide: BorderSide(color: Color(0xff33333D)),
),
]),
);
}
}

Answer 1

You can pass arguments to pop method and received that as a return value of push .
I wrote a minimal sample for you. Hopefully you get the idea, but if you have any questions, please don't hesitate to ask!
class PhotoPreviewPage extends StatefulWidget {
const PhotoPreviewPage({Key? key, #required this.imagePath})
: super(key: key);
#override
_PhotoPreviewPageState createState() => _PhotoPreviewPageState();
final String imagePath;
}
class _PhotoPreviewPageState extends State<PhotoPreviewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: OutlineButton(
onPressed: () {
Navigator.of(context).pop(widget.imagePath);
},
child: const Text('OK'),
),
),
);
}
}
/// This is a overly simplified version of the CameraPage
/// Basically, you take a photo and pass that to cameraPreview page
class CameraPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FlatButton(
onPressed: () async {
final imagePath = await _takeAPhoto();
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (context) => PhotoPreviewPage(imagePath: imagePath),
),
);
},
child: Text('take a photo'),
),
),
);
}
Future<String> _takeAPhoto() {
// some logic to take a photo and return imagePath
return imagePath;
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
final List<File> imageArray = [];
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
crossAxisCount: 2,
children: List.generate(
widget.imageArray.length,
(index) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(widget.imageArray[index]),
fit: BoxFit.fill,
),
),
),
),
),
bottomNavigationBar: Row(
children: [
IconButton(
onPressed: () async {
final filePath = await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PhotoPreviewPage(),
),
);
if (filePath != null) {
setState(() {
widget.imageArray.add(File(filePath));
});
}
},
icon: Icon(Icons.camera),
),
],
),
);
}
}
But depending on the exact page structure of your app, you might need to look into state management solutions like Bloc or Riverpod.