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

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