Expanded Widget

 import "package:flutter/material.dart";

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: DemoExpanded(),
        ),
      ),
    ),
  );
}
class DemoExpanded extends StatelessWidget {
  const DemoExpanded({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded Widget"),
      ),
      // body: Row(
      //   mainAxisAlignment: MainAxisAlignment.center,
      //   children: [
      //     Container(
      //       width: 50,
      //       height: 100,
      //       color: Colors.deepOrange,
      //     ),
      //     Expanded(
      //       flex: 2,
      //       child: Container(
      //         width: 50,
      //         height: 100,
      //         color: Colors.brown,
      //       ),
      //     ),
      //     Expanded(
      //       flex: 5,
      //       child: Container(
      //         width: 50,
      //         height: 100,
      //         color: Colors.green,
      //       ),
      //     ),
      //     Container(
      //       width: 50,
      //       height: 100,
      //       color: Colors.pink,
      //     ),
      //   ],
      // ),

      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            //width: 50,
            height: 100,
            color: Colors.purple,
          ),
          Expanded(
            flex: 3,
            child: Container(
              //width: 50,
              height: 100,
              color: Colors.teal,
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              //width: 50,
              height: 100,
              color: Colors.limeAccent,
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              //width: 50,
              height: 100,
              color: Colors.indigo,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              height: 170,
              color: Colors.orange,
            ),
          ),
        ],
      ),
    );
  }
}