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

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",
  }

];

CodePudding user response：

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])));
    }
    );
                          },
                        ),
                      ),
                    ),
                  ],
                ));
          }
        }

CodePudding user response：

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"]));
      },