How do I get every Gridview Card in flutter to open a specific link?

Asked

Viewed 949 times

0

Do I need to know how to differentiate one card from another in Gridview from the flutter? Because I need to open, as soon as clicked, a specific link for each card.

I have a code that opens a specific site, but when clicked on any card, I need you to open a specific link for each card.

Follow the code that needs correction:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.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  InkWell(
            onTap: () async {
              await launch('http://tigreadvocacia.com.br');
            },
            child: 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>[
                      AspectRatio(
                        aspectRatio: 1.3,
                        child: Image.asset('images/image$index.jpg',

                        ),
                      ),
                      Expanded(
                        child: Container(
                            padding: EdgeInsets.all(7.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  'Título $index',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w500
                                  ),
                                  textAlign: TextAlign.center,
                                ),
                              ],
                            )
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}
dart flutter

  • Associate the index from Grid to some array with links. remembering that this array must be in a setState(). Because index will work with a cursor in its array. Take a look at the fluter’s Http plug and see the documentation or some other that allows you to open a link and put the Widget inside the Column as well.

1 answer

1

You need to associate the items of GridView with the items of an array. Assuming you have the following class:

class Site {
  Site(this.name, this.url);

  String name;
  String url;
}

And the following list:

List<Site> sites = [
  Site("Google", "https://google.com"),
  Site("StackOverflow em Português", "https://answall.com")
]

Let’s build the Widget:

GridView.count(
  crossAxisCount: 2,
  children: List.generate(sites.length, (index) {
    Site site = sites[index];

    return Card(child: Text(site.url));
  })
);

See that when you build the list, I associate the index with the list item.

Browser other questions tagged dart flutter

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