Baris di Dalam Kolom

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

Row dapat menjadi salah satu child dari Column. Dengan cara ini, layar menampilkan baris yang berisi beberapa hal:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.min membuat row atau column hanya sebesar child-nya, alih-alih menggunakan seluruh ruang yang tersedia. Di sini, pengaturan ini menjaga keduanya tetap berada di tengah layar.

Tantangan

Mudah

Ubah ini menjadi header profil kecil:

letakkan Ada Lovelace di baris pertama
letakkan London dan 1815 berdampingan di bawahnya, dalam sebuah Row

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: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}