Tengahkan Kolom

Termasuk bagian Aplikasi Pertamamu dalam perjalanan Flutter di Coddy. Pelajaran 22 dari 32.

Column memiliki tinggi sebesar ruang yang diberikan kepadanya, dan memulai penempatan child-nya dari atas. mainAxisAlignment: menentukan posisi child di sepanjang tinggi tersebut, yaitu sumbu utama column:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...],
)

MainAxisAlignment.start berarti bagian atas, center bagian tengah, dan end bagian bawah. spaceEvenly memberi jarak yang sama di antara semuanya. Row memiliki pengaturan yang sama, tetapi berlaku di sepanjang lebarnya.

Di layar, column ini hanya selebar child terlebarnya, jadi posisinya tetap di kiri. Arah tersebut akan dibahas di pelajaran berikutnya.

Tantangan

Mudah

Tiga angka berada di bagian atas layar. Pindahkan ke tengah layar dengan mainAxisAlignment: pada kolom.

Coba sendiri

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}