I’m new to flutter,I ran into a problem.I need to specify
Facilities facilities = facilitiesList[index];
But I have an error on the word index. I’m passing the list into a list view builder. Please find my code below and this the error:
"message": "A value of type 'Map<dynamic, dynamic>' can't be assigned to a variable of type 'Facilities'.nTry changing the type of the variable, or casting the right-hand type to 'Facilities'.",
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> facilitiesList = [
{
"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];
Card(
child: ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
FacilitiesDetailsScreen(facilities)));
},
));
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(facilitiesList[index]['logoText']),
fit: BoxFit.fill),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
facilitiesList[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(facilitiesList[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(facilitiesList[index]['type'],
style: TextStyle(
color: primary, fontSize: 13, letterSpacing: .3)),
],
),
],
),
)
],
),
);
}
}
2
Answers
You have two different
facilitiesList
. One inFacilitiesListScreen
and one inFacilities
(as a global variable). By declaring another one inFacilitiesListScreen
the other one went out of scope, but it seems you wanted to use that one in some part. Renaming it maybe solves your problem, for example tofacilitiesListMap
. Try out this code.Please try set your data in Map instead of Facilities because facilitiesList is list of Map not list of Facilities
Your code
Correct method