flutterflutter-listviewflutter-list-tile
Can I add other widget below list tile
I am trying to achieve this:
But as I m new to this don't understand how to implement. I check many code but nothing help me so please help me. I am beginner in the coding.
In this code I use json file and I am able to display list tile but as shown in the image I want to add some text and icon below this list tile but when I add any widget it goes side to leading
I don't understand how do I do this
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _items = [];
// Fetch content from the json file
Future<void> readJson() async {
final String response = await rootBundle.loadString('assets/sample.json');
final data = await json.decode(response);
setState(() {
_items = data["items"];
});
}
@override
void initState() {
super.initState();
// Call the readJson method when the app starts
readJson();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
backgroundColor: Colors.white,
centerTitle: true,
elevation: 0,
title: const Text(
'Ask Help',
style: TextStyle(color: Colors.black),
),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
//change width and height on your need width = 200 and height = 50
minimumSize: Size(160, 50),
),
child: const Text('Patient'),
)
],
),
Column(
children: <Widget>[
OutlinedButton(
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.blue, width: 1),
minimumSize: Size(160, 50)),
onPressed: () {},
child: const Text(
"NGO",
style: TextStyle(color: Colors.blue),
),
),
],
)
],
),
// Display the data loaded from sample.json
Container(
child: _items.isNotEmpty
? Expanded(
child: ListView.separated(
itemCount: _items.length,
separatorBuilder: (BuildContext context, int index) =>
Divider(height: 1),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
leading: CircleAvatar(
child:
Text(_items[index]["imageUrl"].toString()),
),
title: Text(_items[index]["name"]),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(_items[index]["phone_number"],
style: const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.normal)),
Text(_items[index]["email_id"],
style: const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.normal)),
// Text(
// 'Population: ${_items[index]["email_id"]}',
// style: const TextStyle(
// fontSize: 11.0,
// fontWeight: FontWeight.normal),
// ),
]
),
trailing: const Icon(Icons.more_vert),
),
);
},
),
)
: Container(
//color: Colors.amber,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 70,
child: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
//change width and height on your need width = 200 and height = 50
minimumSize: Size(300, 50),
),
child: const Text('Register'),
),
),
),
)
],
),
),
);
}
}
My json code:
{
"items": [
{
"id": "p1",
"name": "Item 1",
"phone_number":"8975412369",
"email_id":"[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p1",
"name": "Item 1",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p1",
"name": "Item 1",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},{
"id": "p1",
"name": "Item 1",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
}
]
}
Solution
The answer to the question is yes! Here's a minimal example:
/* SAMPLE
{
"id": "p1",
"name": "Item 1",
"phone_number":"8975412369",
"email_id":"[email protected]",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
*/
class Item {
Item({
required this.id,
required this.name,
required this.phoneNumber,
required this.emailId,
required this.description,
required this.imageUrl,
});
final String id;
final String name;
final String phoneNumber;
final String emailId;
final String description;
final String imageUrl;
factory Item.fromJson(Map<String, dynamic> json) => Item(
id: json["id"],
name: json["name"],
phoneNumber: json["phone_number"],
emailId: json["email_id"],
description: json["description"],
imageUrl: json["imageUrl"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"phone_number": phoneNumber,
"email_id": emailId,
"description": description,
"imageUrl": imageUrl,
};
static List<Item> fromJsonList(List<Map<String,dynamic>> jsonList) {
final List<Item> items = [];
for (var json in jsonList) {
items.add(Item.fromJson(json));
}
return items;
}
}
The above class goes in data_model.dart file.
I have made a data model for you. Before working on UI, it's best to organize your code into different parts.
There is also this custom widget made for easier handling of stuff and the DRY rule!
This goes to the details.dart file.
import 'package:flutter/material.dart';
import 'data_model.dart';
class DetailsPage extends StatelessWidget {
const DetailsPage({super.key, required this.item});
final Item item;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context)
.pop(), // No need to pop for now, there is nothing behind this screen :)
),
backgroundColor: Colors.white,
centerTitle: true,
elevation: 0,
title: const Text(
'Ask Help',
style: TextStyle(color: Colors.black),
),
),
body: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints,
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal.withBlue(200),
//change width and height on your need width = 200 and height = 50
minimumSize: const Size(160, 50),
),
child: const Text('Patient'),
),
OutlinedButton(
style: OutlinedButton.styleFrom(
side:
const BorderSide(color: Colors.teal, width: 1),
minimumSize: const Size(160, 50)),
onPressed: () {},
child: const Text(
"NGO",
style: TextStyle(color: Colors.blue),
),
),
],
),
),
const SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: DetailSection(item: item, viewAttachment: true),
),
const SizedBox(
height: 10,
),
const Divider(
color: Colors.black26,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: DetailSection(
item: item,
viewAttachment: false,
skills: const ['plumber', '2 hrs']),
),
const Divider(
color: Colors.black26,
),
const Spacer(),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
height: 70,
child: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal.withBlue(200),
minimumSize: const Size(300, 50),
),
child: const Text('Register'),
),
),
),
)
],
),
),
);
}),
);
}
}
class DetailSection extends StatelessWidget {
final Item item;
final List<String> skills;
final bool viewAttachment;
const DetailSection(
{Key? key,
required this.item,
required this.viewAttachment,
this.skills = const []})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 35,
backgroundColor: Colors.transparent,
child: Image.network(item.imageUrl),
),
title: Text(
item.name,
style: const TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(item.phoneNumber,
style: const TextStyle(
fontSize: 13.0, fontWeight: FontWeight.normal)),
Text(item.emailId,
style: const TextStyle(
fontSize: 13.0, fontWeight: FontWeight.normal)),
],
),
),
const SizedBox(
height: 10,
),
if (skills.isNotEmpty) ...[
const Align(
alignment: Alignment.centerLeft,
child: Text(
'Skills',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 15,
),
Row(
children: skills
.map((e) => Container(
margin: const EdgeInsets.only(
right: 10,
bottom: 10,
),
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: Colors.amberAccent.withOpacity(0.5),
borderRadius:
const BorderRadius.all(Radius.circular(12))),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: Text(e),
)))
.toList(),
)
],
const Align(
alignment: Alignment.centerLeft,
child: Text(
'Needs Help for',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
const Align(
alignment: Alignment.centerLeft,
child: Text('Bluh bluh aaaaaaah I need help!')),
const SizedBox(
height: 10,
),
if (viewAttachment)
Row(
children: const [
Text(
'View Attachment',
style: TextStyle(fontWeight: FontWeight.bold),
),
Spacer(),
Icon(Icons.play_arrow_outlined),
],
),
],
);
}
}
Edited main.dart:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'details.dart';
import 'data_model.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final List<Item> _items =
[]; // Don't use dynamic types. List<T> where T is your type is the better form :)
// Fetch content from the json file
Future<void> readJson() async {
final String response = await rootBundle.loadString('assets/sample.json');
// jsonDecode/json.decode are not futures. No need to "await" them.
final rawItems = json.decode(response)['items'];
final jsonList = rawItems.cast<Map<String, dynamic>>().toList();
final items = Item.fromJsonList(jsonList);
setState(() {
_items.addAll(items);
});
}
@override
void initState() {
super.initState();
// Call the readJson method when the app starts
readJson();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
centerTitle: true,
elevation: 0,
title: const Text(
'Item List',
style: TextStyle(color: Colors.black),
),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 0),
child: Container(
child: _items.isNotEmpty
? ListView.separated(
itemCount: _items.length,
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 1),
itemBuilder: (context, index) {
final item = _items[
index]; // No need to use [index] for each item :)
return Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
leading: CircleAvatar(
child: Image.network(item
.imageUrl), // Optionally, use cached_network_image package.
),
title: Text(item.name),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(item.phoneNumber,
style: const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.normal)),
Text(item.emailId,
style: const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.normal)),
]),
trailing: const Icon(Icons.more_vert),
onTap: () =>
Navigator.of(context).push(MaterialPageRoute(
builder: ((context) => DetailsPage(
item: item,
)))),
),
);
},
)
: const CircularProgressIndicator(),
),
),
);
}
}
I have modified the UI code to represent the model changes.
Your code and JSON sample are a bit far from the linked image you want to implement, but I have used made-up details to represent a better example to you. Feel free to play with the code and UI.
- Show CircularProgressIndicator before showDialog
- "Too many positional arguments: 2 excepted, but 3 found. try removing the extra arguments" . please help me:(
- Generate SHA-1 for Flutter/React-Native/Android-Native app
- Flutter web - Missing install PWA button
- How can I change the color of an string-input in a TextField?
- Does reloading AdMob Banner Ads make more profit than showing just once?
- While installing cmdline-tools for flutter on Ubuntu, get KeyError: ('cmdline-tools', 'latest')
- How do I disable a Button in Flutter?
- flutter_lints any which doesn't exist (authorization failed), version solving failed
- How to load and present a PDF file from the web in Flutter
- When the keyboard appears, the Flutter widgets resize. How to prevent this?
- Formatting a number with space instead of commas as thousand separator
- Using Navigator in initState
- Applying Flutters app_plugin_loader Gradle plugin imperatively using the apply script method which is deprecated, will be removed in a future release
- How can I watch a change in the list size with Riverpod on a Flutter app?
- Error: RenderBox was not laid out, Failed assertion: line 1940 pos 12: 'hasSize'
- Flutter remove all routes
- flutterfire configure returns "zsh: command not found: flutterfire" on Mac
- Interceptors of dart Grpc
- Flutter Web how to serve file assetlinks.json for Android App Links verification
- I am trying to Make a Quiz app for training in Flutter and Dart, and would appreciate assistance in getting the following error cleared
- Flutter flavor build from Xcode different main.dart
- flutter fatal: early EOF invalid index-pack output
- Flutter get image from firebase storage and show it in app
- Flutter does not show any results
- Hide keyboard on scroll in Flutter
- Is there a way to add a background image to a flutter app widescale?
- flutter how to get rid of a icon padding?
- Flutter - Datatable - How to set a background color for heading / first row?
- Why does adding this Flutter widget make the app not responsive to mouse clicks?