Membuat Baris dan Kolom menggunakan Flutter (Flutter Row and Column)

Halo semuanya, Berjumpa dengan Miniblog dari Inzaghi's Blog! Jika sebelumnya, sudah membuat Program Dart Sederhana menggunakan Flutter, kali ini kita akan membuat Baris (Row) dan Kolom (Column) menggunakan Flutter.

Sumber : Jagongoding.com, Buildwithangga.com, dan juga menggunakan ChatGPT

Flutter dikenal dengan beragam widgets yang dapat membangun UI pada aplikasi kita. Disini saya akan menjelaskan Widget yang wajib kamu tahu yaitu Row dan Column (Baris dan Kolom). Disini kita akan mencoba menggunakan kedua Widget ini dengan Row di dalam Column.

Inilah Program Flutter Row dan Column :

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contoh Flutter dengan Row dan Column'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Contoh Row:',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 8),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(
                    color: Colors.blue,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        'A',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.green,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        'B',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.orange,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        'C',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 16),
              Text(
                'Contoh Column:',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 8),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    color: Colors.red,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        '1',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.purple,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        '2',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.yellow,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        '3',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output :

Untuk melihat Project ini di Web, silakan lihat di sini :

• https://zapp.run/edit/flutter-z7fk06n87fl0?entry=lib/main.dart&file=lib/main.dart:0-3538

Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)