third/TestModuleB_1/testModuleB_1/lib/DetialHome.dart

import 'package:flutter/material.dart';

Map<String,dynamic> mapData = {
  "name": "Details page (Matsutake foie gras)",
  "content": [
    "Matsutake\nfoie gras",
    "Recommended！",
    "Prep",
    "10 Min",
    "Total",
    "30 Min",
    "Servings",
    "2",
    "4.5",
    "Description",
    "Matsutake goose liver is a delicious dish that combines matsutake and goose liver. Matsutake is a precious wild mushroom with a unique aroma and rich taste. Goose liver, on the other hand, is a luxurious poultry visceral ingredient known for its soft and delicate taste and rich flavor.",
    "Steps",
    "Making Matsutake Sauce: Cut fresh matsutake into small pieces, then bake in an oven until crispy or heat in a frying pan until the aroma spreads. Next, put the chopped matsutake into a blender, add some chicken soup or white wine, and stir to form a uniform matsutake sauce.",
    "Pan fried foie gras: Cut the foie gras into evenly thick slices and season with salt and pepper. Heat the pan, add some butter, and let the butter melt. Then, put the foie gras into the pan and fry for about 2-3 minutes on each side until the surface is golden and the inside is fully cooked.",
    "Platter and decoration: Place the fried foie gras on a plate, pour in matsutake sauce, and then use some fresh matsutake, fruits, or flowers as decoration. Enjoy the delicacy of Matsutake Goose Liver."
  ]
};

class DetailHomePage extends StatefulWidget {
  const DetailHomePage({super.key});
  @override
  State<DetailHomePage> createState() => _DetailHomePageState();
}

class _DetailHomePageState extends State<DetailHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 4,
          centerTitle: false,
          backgroundColor: Colors.white,
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios, color: Colors.grey,),
            onPressed: () => Navigator.pop(context),),
          title: Text("Details", style: TextStyle(color: Colors.black87),),
        ),
        body: Stack(
          children: [
            Positioned.fill(
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Column(
                  children: [
                    myContainer(),
                    SizedBox(height: 16,),
                    myDis(),
                    SizedBox(height: 16,),
                    myStep()
                  ],
                ),
              ),
            ),
            Positioned(
              right: 32,
              top: 180,
              child: PhysicalModel(color: Colors.white,elevation: 4,borderRadius: BorderRadius.circular(4),child: Container(
                alignment: Alignment.center,
                height: 50,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text("4.5"),
                    Row(
                      children: List.generate(5, (index) => Icon(index==4?Icons.star_half:Icons.star,color: Colors.amber,size: 15,)),
                    )
                  ],
                ),
              )),
            )
          ],
        )
    );
  }


  myStep(){
    return PhysicalModel(
      color: Colors.white,
      elevation: 4,
      borderRadius: BorderRadius.circular(8),
      child: Container(
        padding: EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("Steps",style: TextStyle(
                fontStyle: FontStyle.italic
            ),),
           ...List.generate(3, (index) => SizedBox(
             height: 110,
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Icon(Icons.looks_one_outlined,color: Colors.red,size: 23,),
                 SizedBox(width: 300,child: Text(mapData["content"][12+index])),
               ],
             ),
           ))
          ]
        )
      )
    );
  }

  myDis(){
    return PhysicalModel(
        color: Colors.white,
        elevation: 4,
        borderRadius: BorderRadius.circular(8),
        child: Container(
          height: 150,
          padding: EdgeInsets.all(12),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(mapData["content"][9],style: TextStyle(
                fontStyle: FontStyle.italic
              ),),
              Text(mapData["content"][10]),
            ],
          ),
        )
    );
  }

  myContainer() {
    return PhysicalModel(
      elevation: 4,
      borderRadius: BorderRadius.circular(8),
      color: Colors.white, child: Container(
      height: 200,
      child: Row(
        children: [
          Expanded(flex: 1,child: myContainerCotent(),),
          Expanded(flex: 1,child: ClipRRect(borderRadius: BorderRadius.horizontal(right: Radius.circular(8)),child: Image.asset("lib/image/brioche.jpg",height: double.infinity,fit: BoxFit.cover)))
        ],
      )
    ),);
  }

  myContainerCotent(){
    return DefaultTextStyle(
      style: TextStyle(fontSize: 16,fontWeight: FontWeight.w500),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(mapData['content'][0],style: TextStyle(color: Colors.amber,fontWeight: FontWeight.bold,fontSize: 22),),
          Text(mapData['content'][1],style: TextStyle(color: Colors.blueAccent,fontSize: 16),),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(mapData['content'][2],style: TextStyle(color: Colors.brown),),Text(mapData['content'][3],style: TextStyle(color: Colors.black87,fontSize: 14),)],),
              Container(height: 30,width: 1,color: Colors.brown.withOpacity(0.3),),
              Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(mapData['content'][4],style: TextStyle(color: Colors.brown),),Text(mapData['content'][5],style: TextStyle(color: Colors.black87,fontSize: 14),)],),
              Container(height: 30,width: 1,color: Colors.brown.withOpacity(0.3),),
              Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(mapData['content'][6],style: TextStyle(color: Colors.brown),),Text(mapData['content'][7],style: TextStyle(color: Colors.black87,fontSize: 14),)],),
            ],
          )
        ],
      ),
    );
  }
}