ทบทวน Layout Widget ตอนที่ 3 Single child Layout

Container(
  color: Colors.grey[300], // สีพื้นหลังของ Container
  height: 200,
  width: 200,
  child: Align(
    alignment: Alignment.topLeft, // จัดตำแหน่งไปที่มุมซ้ายบน
    child: Container(
      color: Colors.blue,
      width: 50,
      height: 50,
    ),
  ),
),

Container(
  color: Colors.grey[300], // สีพื้นหลังของ Container
  child: AspectRatio(
    aspectRatio: 16 / 9, // กำหนดอัตราส่วน 16:9
    child: Container(
      color: Colors.blue, // สีพื้นหลังของวิดเจ็ตภายใน
      child: Center(
        child: Text(
          '16:9 Aspect Ratio',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
),

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // ไม่มีการใช้ Baseline
    Row(
      children: [
        Container(
          color: Colors.blueAccent, // สีพื้นหลังสำหรับข้อความ Hello
          child: Row(
            children: [
              Icon(Icons.star, size: 30, color: Colors.white),
              SizedBox(width: 5),
              Text('Hello', style: TextStyle(fontSize: 30, color: Colors.white)),
            ],
          ),
        ),
        SizedBox(width: 10),
        Container(
          color: Colors.greenAccent, // สีพื้นหลังสำหรับข้อความ World
          child: Row(
            children: [
              Icon(Icons.star, size: 20, color: Colors.white),
              SizedBox(width: 5),
              Text('World', style: TextStyle(fontSize: 20, color: Colors.white)),
            ],
          ),
        ),
      ],
    ),
    SizedBox(height: 20), // ระยะห่างระหว่างสอง Row
    // มีการใช้ Baseline
    Row(
      children: [
        Baseline(
          baseline: 50,
          baselineType: TextBaseline.alphabetic,
          child: Container(
            color: Colors.blueAccent, // สีพื้นหลังสำหรับข้อความ Hello
            child: Row(
              children: [
                Icon(Icons.star, size: 30, color: Colors.white),
                SizedBox(width: 5),
                Text('Hello', style: TextStyle(fontSize: 30, color: Colors.white)),
              ],
            ),
          ),
        ),
        SizedBox(width: 10),
        Baseline(
          baseline: 50,
          baselineType: TextBaseline.alphabetic,
          child: Container(
            color: Colors.greenAccent, // สีพื้นหลังสำหรับข้อความ World
            child: Row(
              children: [
                Icon(Icons.star, size: 20, color: Colors.white),
                SizedBox(width: 5),
                Text('World', style: TextStyle(fontSize: 20, color: Colors.white)),
              ],
            ),
          ),
        ),
      ],
    ),
  ],
)

Container(
  color: Colors.grey[300], // สีพื้นหลังของ Container หลัก
  child: ConstrainedBox(
    constraints: BoxConstraints(
      minWidth: 100,
      minHeight: 100,
      maxWidth: 200,
      maxHeight: 200,
    ),
    child: Container(
      color: Colors.blue, // สีพื้นหลังของ Container ภายใน
      width: 50,
      height: 50,
    ),
  ),
),

class _HomeState extends State<Home> {
  
    @override
    Widget build(BuildContext context) {
  
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
                leading: IconButton(
                  icon: Icon(Icons.menu),
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                ),                
            ),
            body: Center(
              child: CustomSingleChildLayout(
                delegate: MyCustomLayoutDelegate(),
                child: Container(
                  color: Colors.red,
                  width: 100,
                  height: 100,
                ),
              ),
            ),
        );
    }
}

class MyCustomLayoutDelegate extends SingleChildLayoutDelegate {
  @override
  Size getSize(BoxConstraints constraints) {
    // กำหนดขนาดของพื้นที่สำหรับการจัดวาง widget ลูก
    return Size(200, 200);
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    // กำหนดตำแหน่งของ widget ลูก
    return Offset((size.width - childSize.width) / 2, (size.height - childSize.height) / 2);
  }

  @override
  bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate) {
    // กำหนดว่าจะต้องทำการจัดเรียงใหม่หรือไม่
    return false;
  }
}

body: Column(
  children: [
    Container(
      color: Colors.red,
      height: 100,
      child: Center(child: Text('Top')),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        child: Center(child: Text('Expanded')),
      ),
    ),
    Container(
      color: Colors.blue,
      height: 100,
      child: Center(child: Text('Bottom')),
    ),
  ],
),

body: SingleChildScrollView(
  child: Column(
    children: [
      // ตัวอย่างที่ 1: FittedBox with BoxFit.cover
      Container(
        color: Colors.grey[300],
        width: 200,
        height: 200,
        child: FittedBox(
          fit: BoxFit.cover, // ขยายให้เต็มพื้นที่และอาจทำให้บางส่วนถูกตัดออก
          child: Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            child: Center(child: Text('BoxFit.cover')),
          ),
        ),
      ),
      SizedBox(height: 20), // เว้นระยะห่างระหว่างตัวอย่าง
      
      // ตัวอย่างที่ 2: FittedBox with BoxFit.contain
      Container(
        color: Colors.grey[300],
        width: 200,
        height: 200,
        child: FittedBox(
          fit: BoxFit.contain, // ขยายให้พอดีกับพื้นที่โดยไม่ตัดออก
          child: Container(
            color: Colors.blue,
            width: 150,
            height: 150,
            child: Center(child: Text('BoxFit.contain')),
          ),
        ),
      ),
      SizedBox(height: 20), // เว้นระยะห่างระหว่างตัวอย่าง

      // ตัวอย่างที่ 3: FittedBox with BoxFit.scaleDown
      Container(
        color: Colors.grey[300],
        width: 200,
        height: 200,
        child: FittedBox(
          fit: BoxFit.scaleDown, // ย่อขนาดเพื่อไม่ให้เกินขนาดพื้นที่
          child: Container(
            color: Colors.blue,
            width: 300,
            height: 300,
            child: Center(child: Text('BoxFit.scaleDown')),
          ),
        ),
      ),
    ],
  ),
),

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // ตัวอย่างที่ 1: FractionallySizedBox ขยายให้ใช้ 50% ของความกว้าง
    Container(
      color: Colors.grey[300],
      width: 300,
      height: 100,
      child: FractionallySizedBox(
        widthFactor: 0.5, // ใช้ 50% ของความกว้าง
        child: Container(
          color: Colors.blue,
          child: Center(child: Text('50% Width')),
        ),
      ),
    ),
    SizedBox(height: 20), // เว้นระยะห่างระหว่างตัวอย่าง
    
    // ตัวอย่างที่ 2: FractionallySizedBox ขยายให้ใช้ 75% ของความสูง
    Container(
      color: Colors.grey[300],
      width: 100,
      height: 300,
      child: FractionallySizedBox(
        heightFactor: 0.75, // ใช้ 75% ของความสูง
        child: Container(
          color: Colors.green,
          child: Center(child: Text('75% Height')),
        ),
      ),
    ),
    SizedBox(height: 20), // เว้นระยะห่างระหว่างตัวอย่าง

    // ตัวอย่างที่ 3: FractionallySizedBox ขยายให้ใช้ 50% ของทั้งความกว้างและความสูง
    Container(
      color: Colors.grey[300],
      width: 200,
      height: 200,
      child: FractionallySizedBox(
        widthFactor: 0.5, // ใช้ 50% ของความกว้าง
        heightFactor: 0.5, // ใช้ 50% ของความสูง
        child: Container(
          color: Colors.red,
          child: Center(child: Text('50% Width & Height')),
        ),
      ),
    ),
  ],
),

body: Column(
  children: [
    // ตัวอย่างที่ 1: IntrinsicHeight กับหลาย widget
    IntrinsicHeight(
      child: Row(
        children: [
          Container(
            color: Colors.red,
            width: 100,
            height: 50, // ความสูงจะถูกขยายเพื่อให้เท่ากับ widget อื่น
            child: Center(child: Text('Red')),
          ),
          Container(
            color: Colors.green,
            width: 100,
            height: 100, // ความสูงสูงที่สุด
            child: Center(child: Text('Green')),
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 75, // ความสูงกลาง
            child: Center(child: Text('Blue')),
          ),
        ],
      ),
    ),
    SizedBox(height: 20), // เว้นระยะห่างระหว่างตัวอย่าง
    
    // ตัวอย่างที่ 2: IntrinsicHeight กับ widget ภายใน Column
    IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch, // ทำให้ widget ลูกขยายเต็มความสูง
        children: [
          Container(
            color: Colors.orange,
            width: 100,
            child: Center(child: Text('Orange')),
          ),
          Container(
            color: Colors.purple,
            width: 100,
            child: Center(child: Text('Purple')),
          ),
          Container(
            color: Colors.yellow,
            width: 100,
            child: Center(child: Text('Yellow')),
          ),
        ],
      ),
    ),
  ],
),

body: Column(
  children: [
    // ตัวอย่างการใช้ IntrinsicWidth
    IntrinsicWidth(
      child: Row(
        children: [
          Container(
            color: Colors.red,
            width: 50, // ความกว้างที่กำหนด
            height: 100,
            child: Center(child: Text('Red')),
          ),
          Container(
            color: Colors.green,
            width: 100, // ความกว้างสูงที่สุด
            height: 100,
            child: Center(child: Text('Green')),
          ),
          Container(
            color: Colors.blue,
            width: 75, // ความกว้างกลาง
            height: 100,
            child: Center(child: Text('Blue')),
          ),
        ],
      ),
    ),
    SizedBox(height: 20), // เว้นระยะห่างระหว่างตัวอย่าง

    // ตัวอย่างการใช้ Row โดยไม่ใช้ IntrinsicWidth
    Row(
      children: [
        Container(
          color: Colors.orange,
          width: 50, // ความกว้างที่กำหนด
          height: 100,
          child: Center(child: Text('Orange')),
        ),
        Container(
          color: Colors.purple,
          width: 100, // ความกว้างสูงที่สุด
          height: 100,
          child: Center(child: Text('Purple')),
        ),
        Container(
          color: Colors.yellow,
          width: 75, // ความกว้างกลาง
          height: 100,
          child: Center(child: Text('Yellow')),
        ),
      ],
    ),
  ],
),

body: Column(
  children: [
    // ตัวอย่างการใช้ LimitedBox ภายใน Column ที่มีข้อจำกัดด้านความกว้าง
    Row(
      children: [
        LimitedBox(
          maxWidth: 100,
          child: Container(
            color: Colors.red,
            height: 100,
            child: Center(
              child: Text(
                'LimitedBox 100 width',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        Container(
          color: Colors.green,
          width: 150,
          height: 100,
          child: Center(
            child: Text(
              'Normal Container 150 width',
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ],
    ),
    SizedBox(height: 20),

    // ตัวอย่างการใช้ LimitedBox ในบริบทที่ไม่มีข้อจำกัด
    LimitedBox(
      maxHeight: 50,
      child: Container(
        color: Colors.blue,
        width: double.infinity,
        height: 200, // LimitedBox ไม่มีผลกับขนาดนี้เพราะไม่มีข้อจำกัด
        child: Center(
          child: Text(
            'This height will be 200',
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
  ],
),

class _HomeState extends State<Home> {
    bool _isOffstage = true;

    @override
    Widget build(BuildContext context) {
  
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
                leading: IconButton(
                  icon: Icon(Icons.menu),
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                ),                
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // ปุ่มสำหรับสลับการแสดงผลของ Container ที่ซ่อนอยู่
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _isOffstage = !_isOffstage;
                    });
                  },
                  child: Text(_isOffstage ? 'Show Container' : 'Hide Container'),
                ),
                SizedBox(height: 20),

                // การใช้ Offstage ในการซ่อน Container
                Offstage(
                  offstage: _isOffstage,
                  child: Container(
                    color: Colors.blue,
                    height: 100,
                    width: 100,
                    child: Center(
                      child: Text(
                        'I am Offstage',
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),

                // Widget อื่นที่ยังคงถูกแสดงผล
                Container(
                  color: Colors.green,
                  height: 100,
                  width: 100,
                  child: Center(
                    child: Text(
                      'I am always visible',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
        );
    }
}

body: Center(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: OverflowBox(
      minWidth: 0.0,
      maxWidth: 200.0,
      minHeight: 0.0,
      maxHeight: 200.0,
      child: Container(
        width: 150,
        height: 150,
        color: Colors.blue.withOpacity(0.5),
      ),
    ),
  ),
),

body: Center(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
    child: SizedOverflowBox(
      size: Size(100, 100),
      alignment: Alignment.center,
      child: Container(
        width: 150,
        height: 150,
        color: Colors.blue.withOpacity(0.7),
      ),
    ),
  ),
),

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      // การแปลงแบบ Rotate
      Transform.rotate(
        angle: 0.5, // หมุนไป 0.5 เรเดียน (ประมาณ 28.65 องศา)
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          child: Icon(Icons.star, color: Colors.white),
        ),
      ),
      SizedBox(height: 20),

      // การแปลงแบบ Scale
      Transform.scale(
        scale: 1.5, // ขยายขนาด 1.5 เท่า
        child: Container(
          width: 100,
          height: 100,
          color: Colors.green,
          child: Icon(Icons.star, color: Colors.white),
        ),
      ),
      SizedBox(height: 20),

      // การแปลงแบบ Translate
      Transform.translate(
        offset: Offset(50, -30), // เลื่อนในแนวนอน 50 พิกเซลและในแนวตั้ง -30 พิกเซล
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
          child: Icon(Icons.star, color: Colors.white),
        ),
      ),
    ],
  ),
),