-1

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

  @override
  _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",
      "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<Map<String, dynamic>> _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<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) =>
              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),
                    ),
            ),
          ],
        ),
      ),
    );
  }
}
Ken White
  • 123,280
  • 14
  • 225
  • 444
Nick Pope
  • 25
  • 5
  • Inserting nonsense (or repeating yourself) to bypass the minimum text length requirement is a very bad idea, and violates site policies. Please do not do so in the future. – Ken White Nov 05 '21 at 01:02
  • that wasn't the case I was trying to send the question without the repeated text and i got errors – Nick Pope Nov 05 '21 at 01:44
  • 2
    And the reason why you got errors was because you didn't use enough text to describe the problem, and solving it by repeating yourself or adding noise is not the correct solution. The correct solution is to add more **appropriate content**, not noise or clutter. You'll find your experiences here will be much better if you spend some time taking the [tour] and reading the [help] pages to learn how the site works before you begin posting, as was suggested when you created your account here (but you chose to ignore). – Ken White Nov 05 '21 at 01:47
  • The first thing you should have done when you wrote *I was getting some errors so I would like to know how I could fix this error* is to add the details about exactly what those *errors* are, including the **exact, complete error messages**. If you don't explain what the problem is that you're having, we can't help youi solve it. – Ken White Nov 05 '21 at 01:49

1 Answers1

0

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 Image.network and providing path having extra space on url-part, or you can just use likeImage.network( _foundHerbs[index]["urlImage"],),.

ListTile will be like

child: ListTile(
  onTap: () {
    print(_foundHerbs[index].toString());
  },
  leading: Text(
    _foundHerbs[index]["id"].toString(),
    style: const TextStyle(fontSize: 24),
  ),
  title: Text(_foundHerbs[index]['name']),
  subtitle: Container(
    color: Colors.amber,
    child: Image.network(
      '${_foundHerbs[index]["urlImage"]}',
    ),
  )),
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56