Tutorial Dart 20 : Belajar Menggunakan Widget Container Flutter

Last Updated on August 11, 2021 by

Pada pembahasan sebelumnya, Anda telah mengetahui tentang Flutter, yaitu framework untuk bahasa pemrograman Dart. Kali ini, Codekey akan mengajak Anda untuk belajar dasar-dasar Flutter, khususnya tentang cara menggunakan container dalam framework Flutter.

Beberapa Flutter Container yang harus Anda ketahui adalah: Flutter Container Padding dan Flutter Container Border. Masing-masing akan kami jelaskan dalam artikel ini. Jika Anda tertarik untuk tahu tentang Flutter Container, simak terus artikel berikut ini.

Flutter Container

Flutter Container adalah parent widget (widget induk) dalam Framework Flutter yang bisa berisikan berbagai child widget atau widget anak yang dapat mengaturnya dengan efisien melalui width, height, padding, background color, dan lain sebagainya.

Hal yang kami sebutkan di atas tadi adalah widget yang mengkombinasikan gambaran umum, pemosisian, dan ukuran dari child widget. Hal tersebut juga merupakan kelas untuk menyimpan satu atau lebih widget dan menempatkannya di layar sesuai dengan kebutuhan developer.

Umunya, container pada Flutter ini mirip dengan kotak untuk menyimpan konten. Ia memungkinkan banyak atribut kepada pengguna untuk mendekorasi widget turunannya, seperti menggunakan margin, serta memisahkan container dengan konten lainnya.

Widget container pada Flutter sama dengan tag <div> di HTML. Jika widget ini tidak berisi child widget, maka widget ini akan mengisi seluruh area di layar secara otomatis. Jika tidak, itu akan membungkus widget anak sesuai dengan tinggi dan lebar yang ditentukan.

Perlu diperhatikan bahwa widget ini tidak dapat dirender secara langsung tanpa widget induk. Kita bisa menggunakan widget Scaffold, widget Center, widget Padding, widget row, atau widget column sebagai widget induknya.

Mengapa kita membutuhkan widget pada Flutter Container?

Jika kita memiliki widget yang memerlukan beberapa background style yang mungkin berupa batasan warna, bentuk, atau ukuran, kita dapat mencoba untuk membungkusnya dalam widget container. Widget ini membantu kita untuk menyusun, mendekorasi, dan memposisikan widget anaknya.

Jika Anda membungkus widget Anda dalam container, maka tanpa menggunakan parameter apa pun, Anda tidak akan melihat perbedaan dalam tampilannya. Tetapi jika kita menambahkan properti seperti warna, margin, padding, dan lain sebagainya dalam sebuah container, kita dapat menata widget kita di layar sesuai dengan kebutuhan kita. Container dasar memiliki properti margin, batas, dan bantalan yang mengelilingi widget turunannya.

Constructor dari Container Class

Berikut ini adalah contoh syntax dari Container Class:

1.	Container({Key key,  
2.	           AlignmentGeometry alignment,   
3.	           EdgeInsetsGeometry padding,   
4.	           Color color,   
5.	           double width,   
6.	           double height,  
7.	           Decoration decoration,   
8.	           Decoration foregroundDecoration,   
9.	           BoxConstraints constraints,   
10.	           Widget child,   
11.	           Clip clipBehavior: Clip.none  
12.	});  

Properti dari Container Widget

Beberapa properti penting yang ada di dalam container widget:

1. child

Properti ini digunakan untuk menyimpan child widget dari container. Misalkan Anda telah mengambil widget Teks sebagai widget anaknya maka kode yang akan didapatkan seperti pada contoh di bawah ini:

1.	Container(  
2.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 42)),  
3.	)  

2. Flutter container border

Flutter container border adalah properti yang berfungsi agar developer tahu batas dari objek yang dibangun. Properti ini juga akan membantu untuk mempermudah proses penyusunan layout karena ia berperan sebagai garis pembantu. Berikut adalah contohnya:

@override
Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.black,
        width: 2,
      ),
    ),
    child: Column(
      ...
    ),
  )
}

3. color

Properti ini digunakan untuk mengatur warna background dari teks. Ia juga dapat mengubah warna background dari semua container. Lihatlah contohnya di bawah ini:

1.	Container(  
2.	    color: Colors.blue,   
3.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 42)),  

4. height and width

Properti ini digunakan untuk mengatur tinggi dan lebar container sesuai dengan kebutuhan kita. Secara default, container selalu mengambil ruang berdasarkan widget turunannya. Lihat kode di bawah ini:

1.	Container(  
2.	    width: 50.0,  
3.	    height: 150.0,  
4.	    color: Colors.blue,   
5.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 42)),  
6.	)  

5. margin

Properti ini digunakan untuk mengelilingi ruang kosong yang ada di sekitar container. Anda dapat mengamati properti ini dengan melihat ruang putih di sekitar container. Misalkan kita telah menggunakan EdgeInsets.all(50) yang mengatur margin yang sama di keempat arah, seperti yang ditunjukkan pada contoh di bawah ini:

1.	Container(  
2.	    width: 50.0,  
3.	    height: 150.0,  
4.	    color: Colors.blue,   
5.	    padding: EdgeInsets.all(15),  
6.	    margin: EdgeInsets.all(50),  
7.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 25)),  
8.	)  

6. Flutter container padding

Flutter container padding adalah Properti digunakan untuk mengatur jarak antara batas wadah (keempat arah) dan widget turunannya. Kita dapat mengamati ini dengan melihat jarak antara container dan widget anak. Di sini, kami telah menggunakan EdgeInsets.all(15) yang mengatur ruang antara teks dan keempat arah container:

1.	Container(  
2.	    width: 50.0,  
3.	    height: 150.0,  
4.	    color: Colors.blue,   
5.	    padding: EdgeInsets.all(15),  
6.	    margin: EdgeInsets.all(50),  
7.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 25)),  
8.	)  

7. alignment

Properti ini digunakan untuk mengatur posisi dari child widget dengan containernya. Flutter memungkinkan pengguna untuk menyelaraskan elemennya dari berbagai cara seperti center, bottom, bottomCenter, topLeft, centerRight, left, right, dan masih banyak lagi. Di bawah ini adalah contoh di mana kita akan menyelaraskannya dengan widget anak ke posisi bottom right.

1.	Container(  
2.	    width: 50.0,  
3.	    height: 150.0,  
4.	    color: Colors.blue,   
5.	    padding: EdgeInsets.all(15),  
6.	    margin: EdgeInsets.all(50),  
7.	    alignment: Alignment.topCenter,  
8.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 42)),  
9.	)  

8. decoration

Properti ini memungkinkan developer untuk menambahkan dekorasi pada widget. Hal ini akan menghiasi atau melukis widget di belakang child widget. Jika kita ingin mendekorasi atau melukis di depan child wodget, kita perlu menggunakan parameter forgroundDecoration.

Gambar di bawah menjelaskan perbedaan di antara keduanya di mana foregroundDecoration menutupi anak dan cat dekorasi di belakang child widget.

Properti dekorasi mendukung banyak parameter, seperti warna, gradien, gambar background, batas, bayangan, dan lain sebagainya. Hal ini berguna untuk memastikan bahwa kita dapat menggunakan properti warna dalam wadah atau dekorasi, tetapi tidak di keduanya. Lihat kode di bawah ini di mana kami telah menambahkan properti perbatasan dan bayangan untuk mendekorasi box:

1.	import 'package:flutter/material.dart';  
2.	  
3.	void main() => runApp(NewApp());  
4.	  
5.	class NewApp extends StatelessWidget {  
6.	  
7.	  @override  
8.	  Widget build(BuildContext context) {  
9.	    return MaterialApp(  
10.	      home: Scaffold(  
11.	        appBar: AppBar(  
12.	          title: Text("Teks container flutter"),  
13.	        ),  
14.	        body: Container(  
15.	          padding: EdgeInsets.all(15),  
16.	          margin: EdgeInsets.all(50),  
17.	          decoration: BoxDecoration(  
18.	            border: Border.all(color: Colors.black, width: 2),  
19.	            borderRadius: BorderRadius.circular(12),  
20.	            boxShadow: [  
21.	              new BoxShadow(color: Colors.blue, offset: new Offset(4.0, 4.0),),  
22.	            ],  
23.	          ),  
24.	          child: Text("Teks dalam BoxDecoration",  
25.	              style: TextStyle(fontSize: 24)),  
26.	        ),  
27.	      ),  
28.	    );  
29.	  }  
30.	}  

9. transform

Properti transformasi memungkinkan developer untuk memutar container. Hal itu dapat memutar container ke segala arah, yaitu, mengubah koordinat wadah di widget induk. Pada contoh di bawah ini, kita akan memutar container pada sumbu z.

1.	Container(  
2.	    width: 50.0,  
3.	    height: 150.0,  
4.	    color: Colors.blue,   
5.	    padding: EdgeInsets.all(15),  
6.	    margin: EdgeInsets.all(50),  
7.	    alignment: Alignment.topCenter,  
8.	    transform: Matrix4.rotationZ(0.5),   
9.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 42)),  
10.	)  

10. constraints

Properti ini digunakan ketika kita ingin menambahkan constraint tambahan ke widget anak. Ia berisikan berbagai konstruktor seperti tight, loose, expand, dan lain sebagainya. Berikut ini adalah cara untuk menggunakan constructor.

– tight: jika kita ingin menggunakan ukuran properti, maka ia akan memberikan nilai yang pasti ke child.

1.	Container(  
2.	    color: Colors.blue,   
3.	    constraints: BoxConstraints.tight(Size size)  
4.	        : minWidth = size.width, maxWidth = size.width,  
5.	          minHeight = size.height, maxHeight = size.height;   
6.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 24)),  
7.	)  

- expand: di sini, kita dapat memilih height, width, atau kedua nilai ke widget child.
1.	Container(  
2.	    color: Colors.blue,   
3.	    constraints: BoxConstraints.expand(height: 50.0),   
4.	    child: Text("Teks dalam container widget", style: TextStyle(fontSize: 24)),  
5.	)  

Anda dapat memahaminya dengan contoh di bawah ini. Kita akan mencoba untuk menutupi sebagian besar properti container. Buka file main.dart dan ganti dengan kode di bawah ini:

1.	import 'package:flutter/material.dart';  
2.	  
3.	void main() => runApp(NewApp());  
4.	  
5.	class NewApp extends StatelessWidget {  
6.	  
7.	  @override  
8.	  Widget build(BuildContext context) {  
9.	    return MaterialApp(  
10.	      home: MyContainerWidget(),  
11.	    );  
12.	  }  
13.	}  
14.	  
15.	class MyContainerWidget extends StatelessWidget {  
16.	  @override  
17.	  Widget build(BuildContext context) {  
18.	    return MaterialApp(  
19.	      home: Scaffold(  
20.	        appBar: AppBar(  
21.	          title: Text("Teks container flutter "),  
22.	        ),  
23.	        body: Container(  
24.	          width: double.infinity,  
25.	          height: 100.0,  
26.	          color: Colors.blue,  
27.	          margin: EdgeInsets.all(50),  
28.	          padding: EdgeInsets.all(15),  
29.	          alignment: Alignment.center,  
30.	          transform: Matrix4.rotationZ(0.5),  
31.	          child: Text("Teks dalam container widget",  
32.	              style: TextStyle(fontSize: 42)),  
33.	        ),  
34.	      ),  
35.	    );  
36.	  }  
37.	}  

Demikianlah penjelasan tentang Flutter container. Jika Anda tertarik untuk tahu lebih banyak tentang Flutter nantikan terus artikel-artikel terbaru tentang Flutter dalam Seri Tutorial Dart di Codekey.

Situs Codekey menyediakan berbagai artikel tutorial bahasa pemrograman tidak hanya Dart, tetapi juga bahasa pemrograman lainnya. Jangan lupa untuk simak terus artikel terbaru dari https://codekey.id/.