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

Asked

Viewed 1,192 times

2

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

2 answers

2

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');
  }
)

  • Lucas Paz, good afternoon! First I want to thank you for the support. With your help I managed to make the site open. However, I need to individualize the cards of each image so that each one opens a specific link. The way this one, where I have 6 cards with images, all open the same link.

  • Where does the specific link come from? Just set inside the Launch... Create a variable if it is dynamically and pass as parameter.

1

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

Browser other questions tagged dart flutter

You are not signed in. Login or sign up in order to post.