Mengatur Layout Pada Flutter (Row and Column)

Mengatur tatatak atau layout pada User Interface sangatlah penting untuk kenyamanan pengguna saat menggunakan aplikasi yang kita buat. Mempunyai user interface yang bagus dan rapi pastinya menjadi kebanggaan tersendiri untuk developernya dan juga penggunanya, salah satu widget yang paling penting dalam flutter untuk menyusun user interface, yaitu Row dan Column.

Row dan Column mempunyai peranan seperti LinearLayout, kalo di Android Studio atau aplikasi semacamnya. Row digunakan untuk menyusun widget secara Horizontal, sedangkan Column digunakan untuk menyusun widget secara Vartical.

Pada widget tersebut kita juga dapat mengatur propertiesnya, seperti padding, margin, alignment,dll. Dengan menggunakan Flutter, kita dapat dengan mudah dan cepat untuk mengatur semua itu. Pada tutorial ini kita akan belajar membuat project sederhana yang menampilkan susunan widget secara Horizontal dan Vertical serta mengatur propertiesnya.

A. Widget Row

Berikut ini langkah-langkah membuat widget row :

  1. Buka Aplikasi Visual Studio Code, atau Android Studio kalian, buat project baru, berinama project tersebut, lalu simpan pada lokasi yang diinginkan.
  2. Setiap widget yang kita buat didalam Row, akan tersusun secara Horizontal, untuk itu kita menggunakan atribut children, yaitu atribut turunan dari widget Row, berbeda dengan atribut child yang hanya dapat membuat satu widget saja, atribut children dapat membuat beberapa widget.

B. Widget Column

Widget Column digunakan untuk menyusun  widget turunannya secara vertikal, dan ia akan tampak seperti list.

Contoh code row and column :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fluter Column',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Column Flutter'),
        ),
        body: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            new Column(mainAxisAlignment: MainAxisAlignment.center,
            children: [new Icon(Icons.apps, color: Colors.red[900], size: 40.0), new Text('Aplikasi'),
            ],
            ),

            new Column(mainAxisAlignment: MainAxisAlignment.center,
            children: [new Icon(Icons.android, color: Colors.red[900], size: 40.0), new Text('Android'),
            ],
            ),
            new Column(mainAxisAlignment: MainAxisAlignment.center,
            children: [new Icon(Icons.call, color: Colors.red[900], size: 40.0), new Text('Panggilan'),
            ],
            ),
          ],
        ),
      ),
    );
  }
}

class ListApps extends StatelessWidget{
  final title = 'List Apps';
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          backgroundColor: Colors.black12,
        ),
        body: ListView(
          children: [ListTile(leading: Icon(Icons.person), title: Text('Person'),
          ),
          ListTile(leading: Icon(Icons.mail), title: Text('Mail'),
          ),
          ListTile(leading: Icon(Icons.album), title: Text('Album'),
          ),
          ListTile(leading: Icon(Icons.alarm), title: Text('Alarm'),
          ),
          ListTile(leading: Icon(Icons.map), title: Text('Map'),
          )
          ],
        ),
      ),
    );
  }
}

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img
Previous articleKelebihan Flutter
Next articleIntroduce to Kotlin

LEAVE A REPLY

Please enter your comment!
Please enter your name here