Mengapa Baris tidak berada di tengah secara horizontal di dalam Kolom

Question

Seperti yang kita ketahui secara default, Kolom secara horizontal menengahkan anak-anaknya jika memiliki lebar penuh. Tetapi ketika saya menempatkan dua kartu dan satu baris di dalam kolom, dua kartu ditempatkan secara horizontal di tengah dengan flutter tetapi baris tetap sama pada posisi awalnya? Mengapa?
Saya pikir baris harus berada di tengah horizontal karena ini adalah anak dari Kolom dalam kasus saya tetapi sebenarnya tidak.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Container(
        color: Colors.purple,
        height: double.infinity,
        child: Column(
          //  mainAxisAlignment: MainAxisAlignment.center,
          //  crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: Text(
                'Chart',
                style: TextStyle(fontSize: 20.0),
              ),
              elevation: 5,
              color: Colors.blue,
            ),
            Card(
              child: Text(
                'list of tx',
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              color: Colors.purple,
            ),
            Row(
              children: [
                Text('this is row'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

keluaran dari kode ini

Answer 1

Ini terjadi karena secara default, Row akan mengambil seluruh ruang horizontal. Anda dapat memperbaikinya dengan menyuruhnya mengambil ruang sesedikit mungkin:

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)

Menyetel mainAxisAlignmentRow menjadi MainAxisAlignment.centerhanya akan berfungsi jika ada satu widget di dalam Row. Ia hanya menyuruh anak-anaknya pergi ke tengah.

Answer 2

Secara default mainAxisSizepropertynya ada MainAxisSize.maxdi Row widget, Yang harus kamu lakukan adalah mengubahnya menjadi MainAxisSize.min, To Affect by the parent widget, yang dalam contoh ini adalah Column

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)

Answer 3

Cobalah untuk menyampaikan mainAxisAlignmentargumen ke Row Anda. Sebagai contoh

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

Ini akan membuat anak-anak Row menjadi Centered.