Media Belajar Bahasa Pemrograman | by APPKEY

Dart Tutorial Dart 20 : Belajar Menggunakan Widget Container Flutter

Tutorial Dart 20 : Belajar Menggunakan Widget Container Flutter

-

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 7 : Dasar-dasar Perintah Conditions dalam 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.	)  
  1. 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(
      ...
    ),
  )
}

 

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

  1. 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.	)  
  1. 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 8 : Mari Belajar Menggunakan Looping pada Dart

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


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 Dart 1 : Pengenalan Bahasa Pemrogaman Dart untuk Pemula

Halo pembaca setia Codekey! Belajar pemrograman saat ini menjadi keharusan bagi semua orang yang ingin berkarir sebagai programmer, hal...

Tutorial Swift 2 : Tahap Awal Persiapan dan Mengatur Lingkungan Kerja pada Swift

Setelah Anda mengenal bahasa pemrograman Swift 4, langkah selanjutnya adalah Anda perlu memulai pemrograman Swift 4 dengan cara install...

Tutorial Javascript 6 : Cara Membuat Event pada Javascript

Event JavaScript adalah tindakan atau proses khusus yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda...

Tutorial Javascript 8 : Panduan Lengkap Cara Membuat Array di Javascript

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

Tutorial Dart 3 : Belajar Menggunakan Syntax atau Perintah dasar Dart

Setelah mengatur lingkungan kerja serta instalasi Dart ke dalam sistem operasi yang kalian miliki, dalam pembuatan suatu program baik...

Tutorial Javascript 1 : Pengenalan Javascript untuk Pemula

Ada banyak sekali jenis bahasa pemrograman yang bisa Anda pelajari untuk menjadi seorang programmer profesional. Salah satunya adalah belajar...

Tutorial PHP 8 : Memahami Array Multidimensi di PHP | Kapan dan Bagaimana Menggunakannya?

Pada artikel sebelumnya kami telah membahas tentang array PHP serta membahas sedikit tentang array multidimensi PHP. Pada artikel kali...

Tutorial Javascript 2 : Tahap Awal Cara Mudah Menulis Kode di Javascript

Kembali lagi di seri belajar Javascript bersama Codekey! Setelah di postingan sebelumnya Anda belajar Javascript terkait konsep-konsep dasarnya, kini...

Tutorial Python 7 : Tutorial Dasar Cara Mengoperasikan String pada Python

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

Tutorial PHP 9 : Belajar Menggunakan Sort Array Berdasarkan Key dan Value

Array PHP sangat berguna untuk para developer untuk menyimpan data pada variabel. Anda dapat mengelompokkannya dengan membuat kategori tertentu...

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