2

Bom dia! Estou começando a aprender programação com o flutter, sou bem novato na área.

Quero saber como posso abrir o link de algum site, ao ser clicado numa determinada imagem que está na GridView do flutter?

Também preciso saber como deixar o nome/texto diferente em cada item da GridView? Segue o código que precisa ser implementado essas funcionalidades:

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

2 Respostas 2

2

Você pode usar o GestureDetector com url_launcher para abrir a URL quando clicar na imagem.

Importa a lib do url_launcher

import 'package:url_launcher/url_launcher.dart';

Como ficaria:

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');
  }
)
2
  • Lucas Paz, boa tarde! Primeiro quero agradecer pelo apoio. Com a sua ajuda consegui fazer o site abrir. Contudo, preciso individualizar os card de cada imagem, para que cada uma abra um link específico. Da maneira que esta, onde tenho 6 cards com imagens, todos abrem o mesmo link.
    – Valdir
    12/05/2019 às 17:22
  • De onde vem o link específico? É só setar dentro do launch... Cria uma variavel se for dinamicamente e passa como parâmetro.
    – Lucas Paz
    14/05/2019 às 20:35
1

Você deve adicionar o package:

url_launcher: ^5.2.0

E iria ficar mais o menos assim, no lugar do link que eu montei no launch, você poe o link que você obtém via webservice ou o link de alguma array assim como as imagens.

Ficaria mais o menos assim, caso você use algum webservice para retornar as listas das informações você deve substituir as listas títulos e 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,
          ),
        ),
      ],
    ),
  ),
),

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .