fetch url from data file to redirect to new pointed page in gridviewbuilder - flutter

Question

New to flutter and coding so newbie warning :D, I'm trying to create a gridview.builder that will on tap redirect to correctly assigned to that index page (that is already created) but I don't know how to assign it in model.dart and then to pass it to Navigator in InkWell, would greatly appreciate any explanation how this works
this is gridview page
import 'package:flutter/material.dart';
import 'package:practice/data/model.dart';
import 'package:practice/builds/allbuilds.dart';
class GridViewPage extends StatefulWidget {
#override
_GridViewPage createState() => _GridViewPage();
}
class _GridViewPage extends State<GridViewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey,
automaticallyImplyLeading: true,
title: const Text(
'Builds',
style: TextStyle(
fontFamily: 'Lexend Doca',
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
actions: const [],
centerTitle: false,
elevation: 2,
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(15, 0, 15, 25),
child: GridView.builder(
itemCount: griddata.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 1,
),
itemBuilder: (context, index) {
return GridSingleItem(itemGriddata: griddata[index]);
},
),
),
),
],
));
}
}
class GridSingleItem extends StatelessWidget {
final dynamic itemGriddata;
const GridSingleItem({Key key, #required this.itemGriddata})
: super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () async {
Navigator.push(
context, MaterialPageRoute(builder: (context) => PageX()));
},
child: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0x00EEEEEE),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(itemGriddata["image"]).image,
),
),
),
),
);
}
}
and this is model
const griddata = [
{
"name": "Page1",
"image" : "assets/images/Image1.png",
},
{
"name": "Page2",
"image" : "assets/images/Image2.png",
}
];

Answer 1

If I got your question right.
You want to create a model for a particular data,
and then use the data in gridviewbuilder,
and then pass the data to the next screen/page when tapped. [
{
"name": "Page1",
"image" : "assets/images/Image1.png",
},
{
"name": "Page2",
"image" : "assets/images/Image2.png",
}
]
from the data we can have
class Data{
final String name;
final String image;
Data({this.name,this.image});
}
Now const griddata becomes;
const griddata = [
Data(name:'Page1',image:"assets/images/Image1.png",),
Data(name: "Page2","image : "assets/images/Image2.png")
];
What we've done so far is create a model from the raw gridData,
Now passing the data to other pages;
I'll recommend making the destination page i.e PageX to accept Data model
like this;
class PageX extends StatelessWidget{
final Data data; //<------
PageX(data);
#override
Widget build(){
....
}
}
Then in your onTap property, you can have someting like;
Navigator.push(
context, MaterialPageRoute(builder: (context) => PageX(data)));
UPDATE:
class GridSingleItem extends StatelessWidget {
final dynamic itemGriddata;
final Function onTap; //add a function as a parameter/property here
const GridSingleItem({Key key,
#required this.itemGriddata,
this.onTap,
this.image,
})
: super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap:onTap,
child: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0x00EEEEEE),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(itemGriddata["image"]).image,
),
),
),
),
);
}
}
FULL CODE :
import 'package:flutter/material.dart';
import 'package:practice/data/model.dart';
import 'package:practice/builds/allbuilds.dart';
class GridViewPage extends StatefulWidget {
#override
_GridViewPage createState() => _GridViewPage();
}
class _GridViewPage extends State<GridViewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey,
automaticallyImplyLeading: true,
title: const Text(
'Builds',
style: TextStyle(
fontFamily: 'Lexend Doca',
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
actions: const [],
centerTitle: false,
elevation: 2,
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(15, 0, 15, 25),
child: GridView.builder(
itemCount: griddata.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 1,
),
itemBuilder: (context, index) {
return GridSingleItem(itemGriddata:
griddata[index],
onTap:(){
Navigator.push(
context, MaterialPageRoute(builder: (context) =>
PageX(griddata[index])));
}
);
},
),
),
),
],
));
}
}

Answer 2

ok I figured it out myself, turns out its literally 2 lines of code
in model, swap const to final, add url property
final griddata = [
{
"name": "Page1",
"image" : "assets/images/Image1.png",
"url": Page1()
},
{
"name": "Page2",
"image" : "assets/images/Image2.png",
"url": Page2()
}
];
and in GridSingleItem onTap pass itemGriddata["url"]
class GridSingleItem extends StatelessWidget {
final dynamic itemGriddata;
const GridSingleItem({Key key, #required this.itemGriddata})
: super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () async {
Navigator.push(
context, MaterialPageRoute(builder: (context) => itemGriddata["url"]));
},