flutter - PageView Builder & Card - displaying different info on each card - flutter

Question

I am trying to use PageView and Card. My objective is to display different information on the fourth cards that the user can see.
To be more precise, on one card, I could display a title for example. On the second card, I will display dates, on the third card, it could be some random text...
I hope this is clear.
To give you more color on this, the information will come from FireBase.
I do not know how to do this easily. I have considered to create 4 widget myCard, with different info on it and to use them. But I would like to do something more professional and efficient. Thank you
About FireBase, I do not use json. I have a simple document in FireBase. In this document, I have several fields, like 'price' 'quantity' 'reference'...
I just want that each card to display two or three fields from this FireBase document.
class MyBodyWindMill extends StatefulWidget {
const MyBodyWindMill({Key key}) : super(key: key);
#override
_MyBodyWindMillState createState() => _MyBodyWindMillState();
}
class _MyBodyWindMillState extends State<MyBodyWindMill> {
#override
Widget build(BuildContext context) {
return
Container(
height: 260,
child: PageView.builder(controller: PageController(viewportFraction: 0.88),
itemCount: 4,
itemBuilder: ( _, i){
return GestureDetector(
child: Container(
padding: const EdgeInsets.only(left:20, top:20),
height: 220,
width: MediaQuery.of(context).size.width-20,
margin: const EdgeInsets.only(right:10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
),
child:Column(
children: [
MyCard(),
],
))
);
},
));
}}
class MyCard extends StatefulWidget {
const MyCard( {Key key} ) : super(key: key);
#override
_MyCardState createState() => _MyCardState();
}
class _MyCardState extends State<MyCard> {
//String monText;
#override
Widget build(BuildContext context) {
return Container(
height: 230,
child: Stack(
children: [
Positioned(
top: 35,
left: 20,
child: Card(
elevation: 6.0,
shadowColor: Colors.grey,
child: Container(
height: 180,
width: 0.9,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(0.0),
boxShadow: [BoxShadow(
color: Colors.black.withOpacity(0.3),
offset: Offset(-10.0, 10.0),
blurRadius: 20.0,
spreadRadius: 4.0,
),
])
),
),
),
Positioned(
top: 0.0,
left: 30.0,
child:Card(
elevation: 10.0,
shadowColor: Colors.grey.withOpacity(0.5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 200,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
fit: BoxFit.fill,
image:AssetImage('assets/header.jpg'),
),
),
))),
Positioned(
top:40,
left:200,
child:
Container(
height: 150,
width: 170,
child:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:[
Text('Title: ', style: TextStyle(fontSize:16,
color:Colors.red),),
Divider(color:Colors.black),
Text('Info 1: ', style: TextStyle(fontSize:16,
color:Colors.red),),
Text('Info 2'),
])
))
],
),
);
}
}

Answer 1

Based on what you're trying to do it looks like what you need is something like this widget:
class InfoBlock {
final String title;
final String description;
InfoBlock({
required this.title,
required this.description,
});
}
class MyCard extends StatefulWidget {
String title;
List<InfoBlock> infoBlocks;
MyCard({
Key? key,
required this.title,
required this.infoBlocks,
}) : super(key: key);
#override
_MyCardState createState() => _MyCardState();
}
class _MyCardState extends State<MyCard> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: const DecorationImage(
fit: BoxFit.fill,
image: AssetImage('header.jpeg'),
))),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.title,
style: const TextStyle(fontSize: 30),
),
...widget.infoBlocks.map((block) {
return Text(
'${block.title}: ${block.description}',
style: const TextStyle(fontSize: 16),
);
}),
],
)
],
),
);
}
}
And then you can use it like-so:
Column(
children: [
MyCard(
title: 'Quantity',
infoBlocks: [
InfoBlock(title: 'Price', description: '100'),
],
),
MyCard(
title: 'Status',
infoBlocks: [
InfoBlock(title: 'Txt1', description: 'value1'),
InfoBlock(title: 'Txt2', description: 'value2'),
InfoBlock(title: 'Txt3', description: 'value3'),
],
),
],
));
And here's what the output would look like:
Here's a a link to Flutlab with the above code fully functional: https://flutlab.io/ide/6d8762de-50b1-4cfe-a509-a301edaacebf