Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 20 : Belajar Menggunakan Widget Container Flutter

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.	});  
Artikel Terkait  Tutorial Dart 11 : Dart Symbol, Mengenal Symbols dalam Bahasa Pemrograman Dart

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.	)  

  1. 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.	)  

 

  1. 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.	)  
  1. 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:

Artikel Terkait  Tutorial Dart 5 : Cara Menggunakan Variabel Dart dengan Mudah
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.	}  
  1. 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.	)  
  1. 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/.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya