CODEWITHSUNDEEP
flutter
Tizi Dev
Tizi Dev

Reputation: 311

How to pop up in real size picture into Gridview.builder

I have my Gridview.builder build here is the code:

GridView.builder(
                      itemCount: 20,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                      ),
                      itemBuilder: (BuildContext context, int index){
                        return GestureDetector(
                          onTap: () => Navigator.pop(
                            context,
                          ),
                          child: Card(
                            elevation: 5,
                            child: Image.asset(widget.user.imageUrl),
                          ),
                        );
                      },
                    ),

I left Gesturdector function empty, because I dont know how to put onTap function to PopPup the image in real size like instagram Profile images. Could you help me please?

Upvotes: 1

Views: 145

Answers (1)

galloper
galloper

Reputation: 941

You can add a stateless widget that will show full images, something like this:

class ShowFullImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Center(child: Text('Full image here')),
    );
  }
}

and in onTap (for the image that needs to show full version) do this:

onTap: () async {
                  await showDialog(
                    context: context,
                    builder: (_) {
                      return ShowFullImage();
                    },
                  );
                },

Adjust as needed (add params and so on).

Upvotes: 1

Related Questions