Tutorial Cara Membuat Container pada Flutter

Container adalah sebuah widget yang berfungsi sebagai wadah serbaguna untuk menampilkan elemen-elemen tampilan (UI)

Handoyo Saputra | 18 Agustus 2023

Flutter

Dalam pengembangan aplikasi Flutter, pengaturan tata letak (layout) yang baik sangat penting agar antarmuka pengguna (UI) terlihat menarik dan responsif.

Salah satu elemen kunci dalam tata letak Flutter adalah container. Artikel ini akan memberikan panduan langkah demi langkah tentang cara menggunakan container pada Flutter.

Container adalah sebuah widget yang berfungsi sebagai wadah serbaguna untuk menampilkan elemen-elemen tampilan (UI). Widget ini memungkinkan Anda untuk mengatur tampilan dengan berbagai konfigurasi, seperti warna latar belakang, bentuk, padding, margin, border, bayangan, dan lain-lain.

Dengan menggunakan widget Container, Anda dapat menciptakan tata letak yang lebih menarik dan sesuai dengan kebutuhan aplikasi Anda. Container sering digunakan sebagai elemen dasar dalam mengatur tampilan UI dalam pengembangan aplikasi Flutter.

Dengan container, kita dapat mengatur tata letak elemen-elemen UI dengan lebih fleksibel. Untuk membuat container, gunakan widget Container(). Contoh berikut menunjukkan cara membuat container dengan teks di dalamnya.

Source Code Membuat Container pada Flutter

Buat project dengan nama flutter_application_2 lalu copy source code berikut ini pada file lib/main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_application_2/home.dart';
void main() {
	runApp(MyApp());
}
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			debugShowCheckedModeBanner: false,
			home: Home()
		);
	}
}

 Buat file baru pada folder lib yang bernama home.dart lalu copy source code berikut ini:

import 'package:flutter/material.dart';

class Home extends StatelessWidget {

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('KaptenTekno')
			),
			body: Container(
				height: 250,
				width: 250,
				alignment: Alignment.center,
				color: Colors.green,
				margin: EdgeInsets.all(16),
				padding: EdgeInsets.all(16),
				decoration: BoxDecoration(
					border: Border.all(
						color: Colors.blue,
						width: 4,
					),
					borderRadius: BorderRadius.circular(12),
				),
				child: Text(
					'Belajar Membuat Container',
					style: TextStyle(
						fontSize: 16,
						color: Colors.white
					)
				)
			)
		);
	}
}

Keterangan Source Code

body: Container()

Sebuah widget yang digunakan untuk menampilkan konten visual dalam bentuk kotak atau container pada body.

height: 250,
width: 250,

Mengatur lebar dan tinggi container menggunakan properti width dan height dengan nilai 250px. Jika lebar dan tinggi tidak ditentukan, maka secara default container akan membuat lebar dan tinggi sesuai ukuran device (100%).

alignment: Alignment.center

Mengatur posisi child widget agar rata tengah. Fungsi property Alignment diantaranya adalah:

  • center: memindahkan ke posisi tengah.
  • centerLeft: memindahkan ke tengah bagian Kiri.
  • centerRight: memindahkan ke tengah bagian Kanan.
  • bottomCenter: memindahakan kebawah bagian tengah.
  • bottomLeft: memindahkan ke bawah bagian Kiri.
  • bottomRight: memindahkan ke bawah bagian Kanan.
  • topCenter: memindahkan ke atas bagian Tengah.
  • topLeft: memindahkan ke atas bagian Kiri.
  • topRight: memindahkan ke atas bagian Kanan.
color: Colors.green

Properti color digunakan untuk  menetapkan warna background dengan menggunakan warna dasar hijau.

margin: EdgeInsets.all(16)

Mengatur jarak antara batas luar container dengan elemen-elemen di sekitarnya senilai 16px. Margin mengatur ruang kosong di sekeliling elemen, sehingga memberikan jarak antara elemen tersebut dengan elemen-elemen lain yang ada di sekitarnya.

padding: EdgeInsets.all(16)

Mengatur jarak antara konten atau isi elemen dengan batas dalam elemen tersebut senilai 16px. Padding mengatur ruang kosong di sekitar konten elemen, sehingga memberikan jarak antara konten elemen dan batas dalamnya.

decoration: BoxDecoration()

Salah satu properti dari widget Container() pada flutter yang digunakan untuk menentukan dekorasi visual dari sebuah container atau kotak.

border: Border.all(
	color: Colors.blue,
	width: 4,
)

Properti border digunakan untuk menetapkan border pada container. Disini menggunakan Border.all() untuk menetapkan border disemua sisi container dengan warna biru dan ketebalan 4px.

borderRadius: BorderRadius.circular(12)

Properti borderRadius digunakan untuk menetapkan radius pada sudut-sudut border dari container. Disini menggunakan BorderRadius.circular(12) untuk membuat radius border berbentuk lingkaran dengan jari-jari 12.

child: Text(
	'Belajar Membuat Container',
	style: TextStyle(
		fontSize: 16,
		color: Colors.white
	)
),

Membuat tulisan Belajar Membuat Container dengan warna putih dan ukuran font 16px.

Container adalah salah satu widget yang penting dalam pengembangan aplikasi Flutter. Dengan menguasai penggunaan container dan berbagai properti yang dimilikinya, Anda dapat membuat tampilan UI yang menarik dan sesuai dengan kebutuhan aplikasi Anda.

TagsCoding
visibility 1.362

Artikel Lainnya

Artikel Terbaru