How to open the link by clicking on a Gridview image and placing the name below it?

Question

Good morning! I’m starting to learn programming with flutter, I’m very new in the field.

I want to know how to open the link of a site, when clicked on a certain image that is in the flutter Gridview?

I also need to know how to make the name/text different on each Gridview item? Follow the code that needs to be implemented these features:

import 'package:flutter/material.dart';

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(

      body: GridView.count(
        // Create a grid with 2 columns. If you change the scrollDirection to
        // horizontal, this would produce 2 rows.
        crossAxisCount: 2,
        // Generate 100 Widgets that display their index in the List
        children: List.generate(6, (index) {
          /*return Card (child: Image.asset('images/image$index.jpg'));*/

          return Card(
            color: Colors.white,
            child: Padding(
              padding:
              EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0, top: 10.0),
              child: Container(
                alignment: Alignment.center,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Flexible(
                      child: Image.asset('images/image$index.jpg',
                        width: 150,
                        height: 150,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.all(10.0),
                      child: Text(
                        'Título $index',
                        maxLines: 1,
                        softWrap: true,
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}

Answer 1

You can use the Gesturedetector with url_launcher to open the URL when clicking on the image.

Import the lib from url_launcher

import 'package:url_launcher/url_launcher.dart';

How would it look:

GestureDetector(
  child: Image.network(
    'https://www.paixaoporgatos.com/wp-content/uploads/2018/07/gatinhos-mais-fofos-do-mundo-06.png'
  ),
  onTap: () async {
    await launch('https://google.com');
  }
)

Answer 2

You should add the package:

url_launcher: 5.2.0

And it would be more like this, in place of the link that I mounted on Launch, you put the link that you get via webservice or the link of some array as well as the images.

It would be more like this, if you use some webservice to return the lists of information you should replace the lists titles and links

var titulos = [
    'Imagem 1',
    'Imagem 2',
    'Imagem 3',
    'Imagem 4',
    'Imagem 5',
    'Imagem 6'
  ];
...
var links = [
    'https://link1.com.br',
    'https://link2.com.br',
    'https://link3.com.br',
    'https://link4.com.br',
    'https://link5.com.br',
    'https://link6.com.br'
  ];
...
GestureDetector(
  onTap: () async {
    await launch('${links[index]}');
  },
  child: Container(
    alignment: Alignment.center,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Flexible(
          child: Image.asset('images/image$index.jpg',
            width: 150,
            height: 150,
          ),
        ),
        Padding(
          padding: EdgeInsets.all(10.0),
          child: Text(
            '${titulos[index]}',
            maxLines: 1,
            softWrap: true,
            textAlign: TextAlign.center,
          ),
        ),
      ],
    ),
  ),
),