How would I wrap the subtitle for the image url so that it leads to another screen?


Asked by Nick P on November 05, 2021 (source).

I am trying to allow a user to click on a picture and allow them to get information about that image, how would I go about that? I was thinking about wrapping the subtitle(with the image url) in the gesture detector and I was getting some errors so I would like to know how I could fix this error. Thank you

   import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({Key? key}) : super(key: key);

  _ProfilePageState createState() => _ProfilePageState();

class _ProfilePageState extends State<ProfilePage> {
  // This holds a list of fiction users
  // You can use data fetched from a database or a server as well
  final List<Map<String, dynamic>> _allHerbs = [
      "id": 1,
      "name": "plant1",
    {"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<Map<String, dynamic>> _foundHerbs = [];
  initState() {
    // at the beginning, all users are shown
    _foundHerbs = _allHerbs;

  // This function is called whenever the text field changes
  void _runFilter(String enteredKeyword) {
    List<Map<String, dynamic>> 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) =>
      // we use the toLowerCase() method to make it case-insensitive

    // Refresh the UI
    setState(() {
      _foundHerbs = results;

  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,
              onChanged: (value) => _runFilter(value),
              decoration: const InputDecoration(
                  labelText: 'Search', suffixIcon: Icon(,
            const SizedBox(
              height: 20,
              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(
                            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),


Question answered by Yeasin S (source).

Firstly you don't need to use another widget to handle tap-event. ListTile already have onTap: callback method.

Secondly, There are two issue on yoursubtitle, Image.Network will be and providing path having extra space on url-part, or you can just use _foundHerbs[index]["urlImage"],),.

ListTile will be like

child: ListTile(
  onTap: () {
  leading: Text(
    style: const TextStyle(fontSize: 24),
  title: Text(_foundHerbs[index]['name']),
  subtitle: Container(
    color: Colors.amber,