Row


Row adalah widget yang digunakan untuk menyajikan widget lain dalam bentuk horizontal. Widget ini tidak mampu melakukan scroll, jadi juga kita ingin melakukan scroll kita harus menggunakan ListView. Kita coba menggunakan Row dibawah body secara langsung:

    Row(
      children: [
        Container(
          color: Colors.yellow,
          child: FlutterLogo(
            size: 60.0,
          ),
        ),
        Container(
          color: Colors.orange,
          child: FlutterLogo(
            size: 60.0,
          ),
        ),
        Container(
          color: Colors.red,
          child: FlutterLogo(
            size: 60.0,
          ),
        ),
      ],
    ),

Row Widget
Row Widget


Column


Kebalikan dari row, Column adalah widget yang digunakan untuk menyajikan widget lain dalam bentuk vertikal. Kita coba menggunakan Column dibawah body secara langsung:

    Column(
      children: [
        Container(
          color: Colors.yellow,
          child: FlutterLogo(
            size: 60.0,
          ),
        ),
        Container(
          color: Colors.orange,
          child: FlutterLogo(
            size: 60.0,
          ),
        ),
        Container(
          color: Colors.red,
          child: FlutterLogo(
            size: 60.0,
          ),
        ),
      ],
    ),

Column Widget
Column Widget


Center


Widget ini akan membuat widget child yang ada didalamnya berada ditengah. Kita akan mencoba membungkus Row dan Column kedalam Widget Center.


Center (Row)

    Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            color: Colors.yellow,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.orange,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.red,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
        ],
      ),
    ),

Widget Center + Row
Widget Center + Row


Center (Column)

    Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            color: Colors.yellow,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.orange,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.red,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
        ],
      ),
    ),

Widget Center + Column
Widget Center + Column