How does one link an image url to another url to display some information about the first url in flutter?

Question

I am trying to create a hyperlink to link each and every image's URL in my code so that a user can be directed to another page with information about the image that was clicked on. How do I go about doing that? Thank you I am trying to create a hyperlink to link each and every image's URL in my code so that a user can be directed to another page with information about the image that was clicked on. How do I go about doing that? Thank you ``` import 'package:flutter/material.dart'; class ProfilePage extends StatefulWidget { const ProfilePage({Key? key}) : super(key: key); @override _ProfilePageState createState() => _ProfilePageState(); } class _ProfilePageState extends State { // This holds a list of fiction users // You can use data fetched from a database or a server as well final List> _allHerbs = [ { "id": 1, "name": "plant1", "urlImage": 'https://www.southernexposure.com/media/products/originals/sweet-genovese-basil-809aaf7e3d9a3f3fa7ce2f0eb4480e95.jpg' }, {"id": 2, "name": "plant2", "urlImage": ''}, {"id": 3, "name": "plant3", "urlImage": ''}, {"id": 4, "name": "plant4", "urlImage": ''}, {"id": 5, "name": "plant5", "urlImage": ''}, {"id": 6, "name": "plant6", "urlImage": ''}, {"id": 7, "name": "plant7", "urlImage": ''}, {"id": 8, "name": "plant8", "urlImage": ''}, {"id": 9, "name": "plant9", "urlImage": ''}, {"id": 10, "name": "plant10", "urlImage": ''}, ]; // This list holds the data for the list view List> _foundHerbs = []; @override initState() { // at the beginning, all users are shown _foundHerbs = _allHerbs; super.initState(); } // This function is called whenever the text field changes void _runFilter(String enteredKeyword) { List> results = []; if (enteredKeyword.isEmpty) { // if the search field is empty or only contains white-space, we'll display all users results = _allHerbs; } else { results = _allHerbs .where((user) => user["name"].toLowerCase().contains(enteredKeyword.toLowerCase())) .toList(); // we use the toLowerCase() method to make it case-insensitive } // Refresh the UI setState(() { _foundHerbs = results; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Herb Search'), ), body: Padding( padding: const EdgeInsets.all(10), child: Column( children: [ const SizedBox( height: 20, ), TextField( onChanged: (value) => _runFilter(value), decoration: const InputDecoration( labelText: 'Search', suffixIcon: Icon(Icons.search)), ), const SizedBox( height: 20, ), Expanded( child: _foundHerbs.isNotEmpty ? ListView.builder( itemCount: _foundHerbs.length, itemBuilder: (context, index) => Card( key: ValueKey(_foundHerbs[index]["id"]), color: Colors.blueAccent, elevation: 4, margin: const EdgeInsets.symmetric(vertical: 10), child: ListTile( leading: Text( _foundHerbs[index]["id"].toString(), style: const TextStyle(fontSize: 24), ), title: Text(_foundHerbs[index]['name']), subtitle: Image.Network('${_foundHerbs[index]["urlImage"]} '), ), ), ) : const Text( 'No results found', style: TextStyle(fontSize: 24), ), ), ], ), ), ); } }

Answer 1

If I understand your question, for each image clicked, you want to be directed to another page containing information about the image.

One way to go about it is :

1. For the data being fetched, you could modify to : {"id": 2, "name": "plant2", "urlImage": '', **"urlInfo" :""**}

2. Since you want to launch a url, you could use the **url_launcher package** or a suitable package, based on how you want to access the information. Use a WebView package if you want to access the information in-app.

3. You're using ListTile so you could do : When using url_launcher package

    ListTile( onTap: () async{ await launch('${_foundHerbs[index]["urlInfo"]} '); }, ),

Or for something like flutter_webview_plugin, you could do :

ListTile(
onTap: (){
          Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => WebviewScaffold(
      url: '${_foundHerbs[index]["urlInfo"]} ',
      appBar: new AppBar(
        title: new Text("Image Information"),
        withJavascript: true,
      ),
    ),
   ),
  );
},
),