1-) widget yüzde ile çalışma

return Container(
  child: Column(
    children: [
      Expanded(
          flex: 30,
          child: Container(
            color: Colors.blue,
            child: Row(
              children: [
                Expanded(
                    flex: 30,
                    child: Container(
                      color: Colors.orange,
                    )),
                Expanded(
                    flex: 30,
                    child: Container(
                      color: Colors.yellow,
                    )),
                Expanded(
                    flex: 40,
                    child: Container(
                      color: Colors.black38,
                    ))
              ],
            ),
          )),
      Expanded(
          flex: 50,
          child: Container(
            color: Colors.black,
            child: Row(
              children: [
                Expanded(
                    flex: 100,
                    child: Container(
                      color: Colors.blue,
                    )),
              ],
            ),
          )),
      Expanded(
          flex: 10,
          child: Container(
            color: Colors.yellow,
            child: Row(
              children: [
                Expanded(
                    flex: 30,
                    child: Container(
                      color: Colors.black,
                    )),
                Expanded(
                    flex: 70,
                    child: Column(
                      children: [
                        Expanded(
                            flex: 50,
                            child: Container(
                              color: Colors.lightBlueAccent,
                            )),
                        Expanded(
                            flex: 50,
                            child: Container(
                              color: Colors.blue,
                            )),
                      ],
                    )),
              ],
            ),
          )),
      Expanded(
          flex: 10,
        child: Row(
          children: [
            Expanded(
                flex: 30,
                child: Container(
                  color: Colors.lightGreen,
                )),
            Expanded(
                flex: 70,
                child: Column(
                  children: [
                    Expanded(
                        flex: 50,
                        child: Container(
                          color: Colors.yellow,
                        )),
                    Expanded(
                        flex: 50,
                        child: Container(
                          color: Colors.green,
                        )),
                  ],
                )),
          ],
        ),
      ),
    ],  ), );

DİĞER -->

her expanded widgetin flexi bir olarak default vardır. bir tanesini 2 yaparsan o diğerinin iki katı olarak büyür. toplam flex sayısına böler orantılı yayar

 Container(
height: MediaQuery.of(context).size.height * 0.50,
child: Row(
children: <Widget>[
Expanded(
flex: 70,
child: Container(
color: Colors.lightBlue[400],
),
),
Expanded(
flex: 30,
child: Container(
color: Colors.deepPurple[800],
),
)
],
),
)

FLEXİBLE DA EN FAZLA WİDTH KADAR BÜYÜR AMA EXPANDED DE OLDUĞU YERİN HEPSİNİ KAPLAMAYA ÇALIŞIR

List<Widget> flexibleMetot(){
  return [
    Flexible(
      child: Container(
        width: 100,
        height: 300,
        color: Colors.blue,
      ),
    ),
    Flexible(
      child: Container(
        width: 100,
        height: 300,
        color: Colors.blue,
      ),
    ),

  ];
}

kaynak : https://stackoverflow.com/questions/43122113/sizing-elements-to-percentage-of-screen-width-height