How to linked facilities of each element in a list flutter? - flutter

Question

I'm new to flutter,I ran into a problem,i got problem where i cant linked facilites_list_screen to facilties_details_screen.dart using flutter when user click the picture in facilites_list_screen it will goes to fecilities_details.dart
//this is homepage for facilies_list_screen.dart
import 'package:flutter/material.dart';
import 'package:oracle_diamond_02/model/facilities.dart';
import 'package:oracle_diamond_02/screen/facilities_details_screen.dart';
class FacilitiesListScreen extends StatefulWidget {
FacilitiesListScreen({Key? key}) : super(key: key);
_FacilitiesListScreenState createState() => _FacilitiesListScreenState();
}
class _FacilitiesListScreenState extends State<FacilitiesListScreen> {
final TextStyle dropdownMenuItem =
TextStyle(color: Colors.black, fontSize: 18);
final primary = Color.fromARGB(255, 206, 84, 84);
final secondary = Color(0xfff29a94);
final List<Map> facilitiesListMap = [
{
"name": "Badminton Court",
"location": "UTM Convention Hall",
"type": "Indoor Courts",
"logoText":
"https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/badminton.jpg?alt=media"
},
{
"name": "PingPong Court",
"location": "UTM Convention Hall",
"type": "Indoor Courts",
"logoText":
"https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/pinpong.jpg?alt=media"
},
{
"name": "Futsal Court",
"location": "UTM Convention Hall",
"type": "Indoor Courts",
"logoText":
"https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/futsal.jpg?alt=media"
},
{
"name": "Tennis Court",
"location": "UTM Convention Hall",
"type": "Outdoor Courts",
"logoText":
"https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/tennis.jpg?alt=media"
},
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff0f0f0),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 145),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
itemCount: facilitiesList.length,
itemBuilder: (BuildContext context, int index) {
Facilities facilities = facilitiesList[index];
return buildList(context, index);
})),
Container(
height: 140,
width: double.infinity,
decoration: BoxDecoration(
color: primary,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
Icons.menu,
color: Colors.white,
),
),
Text(
"List of Facilities",
style: TextStyle(color: Colors.white, fontSize: 24),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.filter_list,
color: Colors.white,
),
),
],
),
),
),
Container(
child: Column(
children: <Widget>[
SizedBox(
height: 110,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.all(Radius.circular(30)),
child: TextField(
// controller: TextEditingController(text: locations[0]),
cursorColor: Theme.of(context).primaryColor,
style: dropdownMenuItem,
decoration: InputDecoration(
hintText: "Search Facilities",
hintStyle: TextStyle(
color: Colors.black38, fontSize: 16),
prefixIcon: Material(
elevation: 0.0,
borderRadius:
BorderRadius.all(Radius.circular(30)),
child: Icon(Icons.search),
),
border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(
horizontal: 25, vertical: 13)),
),
),
),
],
),
)
],
),
),
),
);
}
Widget buildList(BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.white,
),
width: double.infinity,
height: 110,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 50,
height: 50,
margin: EdgeInsets.only(right: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(width: 3, color: secondary),
image: DecorationImage(
image: NetworkImage(facilitiesListMap[index]['logoText']),
fit: BoxFit.fill),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
facilitiesListMap[index]['name'],
style: TextStyle(
color: primary,
fontWeight: FontWeight.bold,
fontSize: 18),
),
SizedBox(
height: 6,
),
Row(
children: <Widget>[
Icon(
Icons.location_on,
color: secondary,
size: 20,
),
SizedBox(
width: 5,
),
Text(facilitiesListMap[index]['location'],
style: TextStyle(
color: primary, fontSize: 13, letterSpacing: .3)),
],
),
SizedBox(
height: 6,
),
Row(
children: <Widget>[
Icon(
Icons.sports_tennis,
color: secondary,
size: 20,
),
SizedBox(
width: 5,
),
Text(facilitiesListMap[index]['type'],
style: TextStyle(
color: primary, fontSize: 13, letterSpacing: .3)),
],
),
],
),
)
],
),
);
}
}
this is homepage facilites_details_screen.dart
import 'package:flutter/material.dart';
import 'package:oracle_diamond_02/main.dart';
import 'package:oracle_diamond_02/model/facilities.dart';
class FacilitiesDetailsScreen extends StatelessWidget {
final Facilities facilities;
FacilitiesDetailsScreen(this.facilities);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
foregroundDecoration: BoxDecoration(color: Colors.black26),
height: 400,
child: Image.network(facilities.ImageUrl, fit: BoxFit.cover)),
SingleChildScrollView(
padding: const EdgeInsets.only(top: 16.0, bottom: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 250),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
facilities.name,
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
fontWeight: FontWeight.bold),
),
),
const SizedBox(width: 16.0),
Container(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 16.0,
),
),
Spacer(),
IconButton(
color: Colors.white,
icon: Icon(Icons.favorite_border),
onPressed: () {},
)
],
),
Container(
padding: const EdgeInsets.all(32.0),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30.0),
SizedBox(
width: double.infinity,
child: ElevatedButton(
child: Text(
"Reserve Now",
style: TextStyle(fontWeight: FontWeight.normal),
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => BookingCalendarDemoApp()));
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.red),
),
),
),
const SizedBox(height: 30.0),
Text(
facilities.name.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 18.0),
),
const SizedBox(height: 10.0),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
facilities.description,
textAlign: TextAlign.justify,
style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 16.0),
),
),
],
),
),
],
),
),
Positioned(
top: 0,
left: 0,
right: 0,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
centerTitle: true,
title: Text(
"List of Facilities",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.normal),
),
),
),
],
),
);
}
}
this is homepage facilities.dart
import 'package:flutter/material.dart';
class Facilities {
String name;
String description;
String ImageUrl;
Facilities(
{required this.name, required this.description, required this.ImageUrl});
}
List<Facilities> facilitiesList = [
Facilities(
name: 'Badminton Court',
description:
'Badminton Courts are the rectangular surfaces used for the racket sport of badminton. divided in half by a center badminton net, courts are usually marked for both singles or doubles games with boundary widths varying between the two match types',
ImageUrl:
'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/badminton.jpg?alt=media'),
Facilities(
name: 'Tennis Court',
description:
'Table tennis, also known as ping-pong and whiff-whaff, is a sport in which two or four players hit a lightweight ball, also known as the ping-pong ball, back and forth across a table using small rackets. The game takes place on a hard table divided by a net.',
ImageUrl:
'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/tennis.jpg?alt=media'),
Facilities(
name: 'PingPong Court',
description:
'Table tennis, also known as ping-pong and whiff-whaff, is a sport in which two or four players hit a lightweight ball, also known as the ping-pong ball, back and forth across a table using small rackets. The game takes place on a hard table divided by a net.',
ImageUrl:
'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/pinpong.jpg?alt=media'),
Facilities(
name: 'Futsal Court',
description:
'Futsal is an association football-based game playedon a hard court smaller than a football pitch, and mainly indoors. It has similarities to five-a-sidefootball and indoor soccer.',
ImageUrl:
'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/futsal.jpg?alt=media'),
];

Answer 1

You can wrap your listView item with tappable widget like GestureDetector/InkWell, and then use navigator like
Widget buildList(BuildContext context, int index) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => FacilitiesDetailsScreen( facilitiesList[index]),
));
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.white,
),