Good day everyone I am new to flutter, I was trying to get the pictures of some plants to show up beside the name of the specific plant however I was getting the url instead, is there any possible way that i can fix this issue in my code down below?
<pre><code>
Good day everyone I am new to flutter, I was trying to get the pictures of some plants to show up beside the name of the specific plant however I was getting the url instead, is there any possible way that i can fix this issue in my code down below?
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: Text('${_foundHerbs[index]["urlImage"]} '),
),
),
)
: const Text(
'No results found',
style: TextStyle(fontSize: 24),
),
),
],
),
),
);
}
}
CodePudding user response:
You are expecting to get image from text widget you just need to
change this
subtitle: Text('${_foundHerbs[index]["urlImage"]} '),
to this
subtitle: Image.network('${_foundHerbs[index]["urlImage"]} '),
the above will show your image under the title but if you want to show it beside use the leading or trailing instead of subtitle
like this
leading: Image.network('${_foundHerbs[index]["urlImage"]} '),