Skip to the content.

Column

Column(
  crossAxisAlignment: CrossAxisAlignment.start,  // set children rata kiri
  mainAxisSize: MainAxisSize.min, // kecilkan ukuran mengikuti ukuran children
  children: <Widget>[
    const Text('We move under cover and we move as one'),
    const Text('Through the night, we have one shot to live another day'),
    const Text('We cannot let a stray gunshot give us away'),
    const Text('We will fight up close, seize the moment and stay in it'),
    const Text('It’s either that or meet the business end of a bayonet'),
    const Text('The code word is ‘Rochambeau,’ dig me?'),
    Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
  ],
)

return Scaffold(
  backgroundColor: Color(0xFF222222),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.stretch, // set lebar kolom full width
    children: <Widget>[
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Container(
              color: Colors.red,
              child: Text('Left', textAlign: TextAlign.center),
             ),
           ),
           Expanded(
             child: Container(
             color: Colors.green,
             child: Text('Right', textAlign: TextAlign.center),
             ),
            ),
          ],
        ),
      ),
      Expanded(
        child: Container(
        color: Colors.blue,
        child: Text('Bottom', textAlign: TextAlign.center),
       ),
      ),
    ],
  ),
);

Berikut adalah contoh kolom dengan jarak antar objeknya secara proporsional, mengikuti ukuran dari parent.

Container(
  height: 100,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween, // memberi jarak antar objek
    children: [
      const Text('Baris 1'),
      const Text('Baris 2'),
      const Text('Baris 3')
    ],
  )
)