how i can click item in staggered gridview in flutter

Question

How can I click item in StaggeredGridView in Flutter? I want to add Navigator and send link photo to another screen.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Staggered View",
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => new Container(
            height: 120.0,
            width: 120.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('https://picsum.photos/500/500?random=$index')  ,

                fit: BoxFit.fill,
              ),
              shape: BoxShape.rectangle,
            ),
          ),
          staggeredTileBuilder: (int index) =>
          new StaggeredTile.count(2, index.isEven ? 3 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,

        ),
      ),
    );
  }
}

Answer 1

You can check the below code. You need to use GestureDetector. Then push it in another class. please check my answer for details.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Staggered View",
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) =>
                        details("https://picsum.photos/500/500?random=$index")),
              );
            },
            child: new Container(
              height: 120.0,
              width: 120.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      'https://picsum.photos/500/500?random=$index'),
                  fit: BoxFit.fill,
                ),
                shape: BoxShape.rectangle,
              ),
            ),
          ),
          staggeredTileBuilder: (int index) =>
              new StaggeredTile.count(2, index.isEven ? 3 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
      ),
    );
  }
}

class details extends StatelessWidget {
  details(this.image);

  String image;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: Image.network(image),
    );
  }
}

Answer 2

You can wrap the widget that is returned by the itemBuilder with a widget that can handle tap events, such as a GestureDetector or an InkWell:

itemBuilder: (BuildContext context, int index) => GestureDetector(
  onTap: () {
    // call Navigator here
  },
  child: Container(
    height: 120.0,
    width: 120.0,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage('https://picsum.photos/500/500?random=$index'),
        fit: BoxFit.fill,
      ),
      shape: BoxShape.rectangle,
    ),
  ),
),

More information on GestureDetector or InkWell can be found in the docs