CODEWITHSUNDEEP
flutterflutter-layout
Mike Osborn
Mike Osborn

Reputation: 503

How to add Navigation to Grid View - Flutter Layouts

I want to add Navigation to my GridListTiles but I don't know how. My GridView is like this :

Also if anyone knows the container navigation it will also work for GridListTile

Update1: Added more code

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: Center(child: _buildGrid()),
      ),
    );
  }

  Widget _buildGrid() => GridView.extent(
      maxCrossAxisExtent: 150,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTileList(30));
      

  List<Widget> _buildGridTileList(int count) => 
    List.generate(
        count,
        (i) => InkWell(
             onTap: ()=> Navigator.of(context).push(
                 MaterialApp(
                     builder: (context) => 
                         YourWidgetName()//Added you can also pass the variable i to the next screen by passing it into your next screen constructor.
                 )
             ),
             child: Container(
                 decoration: BoxDecoration(
                     border: Border.all(color: Colors.black)
                 ),
                 child: Image.asset('images/pic$i.jpg'),
             ),
        ),    
    );
}

Upvotes: 0

Views: 879

Answers (1)

ritik kumar srivastava
ritik kumar srivastava

Reputation: 550

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: Center(child: _buildGrid(context)),
      ),
    );
  }

  Widget _buildGrid(BuildContext context) => GridView.extent(
      maxCrossAxisExtent: 150,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTileList(30,context));


  List<Widget> _buildGridTileList(int count,BuildContext context) =>
      List.generate(
        count,
            (i) => InkWell(
          onTap: ()=> Navigator.of(context).push(MaterialPageRoute(builder: (context)=>Scaffold(body:Text(i.toString())))),//you can pass the index (i) in the constructor of YourWidget(i) something like this if needed
          child: Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.black)
            ),
            child: Image.asset('images/pic$i.jpg'),
          ),
        ),
      );
}

Upvotes: 1

Related Questions