Tutorial Menggunakan Row dan Column di Flutter

Row dan column di Flutter digunakan untuk styling ke widget. Sekarang kita akan belajar cara mengatur widget di dalam row dan column. Row dan Column bukanlah single widget tapi mereka widget terpisah.

Row dan Column di Flutter dua widget yang penting yang dapat menyelaraskan widget secara horizontal atau vertikal sesuai dengan kebutuhan kita.

Row Widget di Flutter

Widget Row mengatur arah children di aplikasi. Row akan mengatur secara horizontal. Row widget bukan untuk scrollable atau bukan digunakan untuk kondisi yang mengharuskan scroll. Kalau membutuhkan widget yang bisa scroll kita dapat menggunakan ListView widget.

Kita bisa mengatur row widget dengan menggunakan property crossAxisAlignment dan mainAxisAlignment. crossAxis digunakan untuk vertical dan mainAxis secara horizontal.

Kita bisa mengatur row children widget dengan Bantuan property start, end, center, spaceBetween, spaceAround, dan spaceEvenly.

Contoh :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Row Example"),
      ),
      body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.all(12.0),
              padding: const EdgeInsets.all(8.0),
              child: const Text(
                "Text 1",
              ),
            ),
            Container(
              margin: const EdgeInsets.all(15.0),
              padding: const EdgeInsets.all(8.0),
              child: const Text(
                "Text 2",
              ),
            ),
            Container(
              margin: const EdgeInsets.all(12.0),
              padding: const EdgeInsets.all(8.0),
              child: const Text(
                "Text 3",
              ),
            )
          ]),
    );
  }
}

Setelah kita running hasilnya akan tampak seperti pada gambar di bawah:

Column Widget di Flutter

Widget Column mengatur arah children di aplikasi. Column akan mengatur secara vertikal. Column widget bukan untuk scrollable atau bukan digunakan untuk kondisi yang mengharuskan scroll. Kalau membutuhkan widget yang bisa scroll kita dapat menggunakan ListView widget.

Kita bisa mengatur Column widget dengan menggunakan property crossAxisAlignment dan mainAxisAlignment. crossAxis digunakan untuk vertical dan mainAxis secara horizontal.

Kita bisa mengatur column children widget dengan Bantuan property start, end, center, spaceBetween, spaceAround, dan spaceEvenly.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Contoh Column Flutter"),
      ),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.all(12.0),
              padding: const EdgeInsets.all(8.0),
              child: const Text(
                "Text 1",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
            Container(
              margin: const EdgeInsets.all(15.0),
              padding: const EdgeInsets.all(8.0),
              child: const Text(
                "Text 2",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
            Container(
              margin: const EdgeInsets.all(12.0),
              padding: const EdgeInsets.all(8.0),
              child: const Text(
                "Text 3",
                style: TextStyle(fontSize: 25.0),
              ),
            )
          ]),
    );
  }
}

Hasilnya akan seperti ini:

Kesimpulan

Penggunaan Row dan Column dimaksudkan untuk styling dan mengatur letak posisi dari widget yang  diinginkan. Row dan Column jika mengatur posisi terlalu jauh dari batas row dan column yang ada maka akan ada tulisan “Overflow message”.

arduino indo