How to get data from previous page flutter - flutter

Question

I'm trying to build a page about description of a photo with this code:
import 'package:flutter/material.dart';
import 'description_widget.dart';
class ImageDescription extends StatefulWidget {
#override
_ImageDescriptionState createState() => _ImageDescriptionState();
}
class _ImageDescriptionState extends State<ImageDescription> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.white10,
elevation: 0,
leading: Container(
padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: InkWell(
child: Hero(
tag: 'back',
child: Image.asset(
'assets/images/wp_back_button_icon.png',
height: 250,
),
),
onTap: () {
Navigator.pop(context);
},
),
),
actions: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 20, 20, 0),
child: Hero(
tag: 'logo',
child: Image.asset(
'assets/images/wp_logo.png',
height: 250,
),
),
),
],
),
body: SingleChildScrollView(
child: imageDescription(
"assets/images/gallery/Image1.jpg",
"Tittle 1",
"Description 1.",
"Image1"),
),
);
}
}
Using this Widget that i've created:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
Widget imageDescription(String url, title, description, tag) {
return Container(
child: Column(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Center(
child: Text(title, style: TextStyle(fontSize: 30)),
),
Center(
child: Text("Let's educate in the fun way!"),
)
],
),
),
Container(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(10),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Hero(tag: tag, child: Image.asset(url)),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Card(
child: Container(
margin: const EdgeInsets.all(10),
child: Text(
description,
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 20),
),
),
),
)
],
),
)
],
),
);
}
But instead of manually adding the imageDescription(
"assets/images/gallery/Image1.jpg",
"Tittle 1",
"Description 1.",
"Image1"),
I want to get the variables from the image that i clicked on previous page :
import 'package:flutter/material.dart';
import 'image_description.dart';
import 'show_image.dart';
class Gallery extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.white10,
elevation: 0,
leading: Container(
padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: InkWell(
child: Hero(
tag: 'back',
child: Image.asset(
'assets/images/wp_back_button_icon.png',
height: 250,
),
),
onTap: () {
Navigator.pop(context);
},
),
),
actions: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 20, 20, 0),
child: Hero(
tag: 'logo',
child: Image.asset(
'assets/images/wp_logo.png',
height: 250,
),
),
),
],
),
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text(
'AR Gallery',
style: TextStyle(fontSize: 30),
),
),
Container(
child: Text("Let's educate in the fun way"),
),
Expanded(
child: SizedBox(
height: double.infinity,
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 3,
children: <Widget>[
InkWell(
child: Stack(
children: <Widget>[
ShowImage(
url: "assets/images/gallery/Image1.jpg",
tag: "Image1",
title: "Title 1",
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageDescription()));
},
),
InkWell(
child: Stack(
children: <Widget>[
ShowImage(
url: "assets/images/gallery/Image2.jpg",
tag: "Image2",
title: "Title 2",
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageDescription()));
},
),
InkWell(
child: Stack(
children: <Widget>[
ShowImage(
url: "assets/images/gallery/Image3.jpg",
tag: "Image3",
title: "Title 3",
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageDescription()),
);
}),
],
),
),
),
],
),
),
);
}
}
using this widget:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ShowImage extends StatelessWidget {
final String tag;
final String url;
final String title;
const ShowImage({Key key, this.tag, this.url, this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child:
Hero(tag: tag, child: Image.asset(url, fit: BoxFit.fitHeight)),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text(title,
style: TextStyle(
backgroundColor: Colors.deepOrange, color: Colors.white)),
),
)
],
);
}
}
or simply:
open gallery page
click an image
open image description page with title & image path of clicked image
Regards, Slim

Answer 1

I would recommend you to follow this tutorial.
For you this would mean:
Create a class that contains all the data you would like to pass:
class ImageData {
final String title;
final String url;
final String description;
final String tag;
Image(this.title, this.url, this.description, this.tag);
}
Set Up your ImageDescriptionScreen to require an Image object:
import 'package:flutter/material.dart';
import 'description_widget.dart';
import 'image_data.dart';
class ImageDescription extends StatefulWidget {
final ImageData imageData;
// In the constructor, require an Image Object.
ImageDescriptionScreen({Key key, #required this.imageData}) :
super(key: key);
#override
_ImageDescriptionState createState() => _ImageDescriptionState();
}
class _ImageDescriptionState extends State<ImageDescription> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.white10,
elevation: 0,
leading: Container(
padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: InkWell(
child: Hero(
tag: 'back',
child: Image.asset(
'assets/images/wp_back_button_icon.png',
height: 250,
),
),
onTap: () {
Navigator.pop(context);
},
),
),
actions: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 20, 20, 0),
child: Hero(
tag: 'logo',
child: Image.asset(
'assets/images/wp_logo.png',
height: 250,
),
),
),
],
),
body: SingleChildScrollView(
child: imageDescription(
widget.imageData.url,
widget.imageData.title,
widget.imageData.description,
widget.imageData.tag
),
),
);
}
}
Pass the image object when navigating to the new page:
Navigator.push(context, MaterialPageRoute(builder: (context) =>
ImageDescription(imageData: ImageData('title', 'url', 'description', 'tag'),)));
EDIT: I put my solution outlined below into dartpad, feel free to try it out there and copy & paste the code.
Short remarks to my dartpad solution:
All image data is maintained and contained in this list of ImageData Objects. Relevant information for other screens is passed via Navigator. With this solution you only need to maintain image data in this list. The grid view automatically expands if more items are added to the list.
final List<ImageData> imageList = [
ImageData(title: 'MacBook',url: 'https://picsum.photos/250?image=9',
description: 'this is a macbook', tag: 'macbook'),
ImageData(title: 'Deer',url: 'https://picsum.photos/250?image=1003',
description: 'this is a deer', tag: 'deer'),
];
Let me know if anything is unclear :)