Class Container di Flutter adalah widget yang mudah digunakan karena menggabungkan fungsi penempatan dan penyesuaian ukuran umum dari widget. Dengan menggunakan class Container, kita dapat menempatkan satu atau lebih widget di layar sesuai dengan kebutuhan. Secara sederhana, Container mirip seperti sebuah kotak untuk menyimpan konten. Setiap elemen Container dasar memiliki margin, yang memisahkan elemen tersebut dari konten lainnya. Selain itu, kita dapat memberikan border pada Container dengan bentuk yang berbeda seperti persegi panjang, melengkung, dan lainnya. Container juga menyediakan padding untuk setiap child-nya dan menerapkan batasan tambahan pada lebar dan tinggi setelah padding diterapkan (jika salah satu di antaranya tidak null).
Constructor dari Class Container
Constructor adalah metode khusus yang digunakan untuk membuat object dari suatu class. Dalam Flutter, class container memiliki beberapa jenis constructor yang dapat digunakan untuk membuat object dengan mudah.
Sintaks
Container({Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Clip clipBehavior: Clip.none});
Properti dari Class Container
Dalam Flutter, class Container digunakan untuk menampung widget lain dan memberikan kontrol atas tata letak mereka di dalamnya. Properti pada class Container sangat penting karena memungkinkan developer untuk mengatur tampilan widget dengan lebih presisi.
1. child
Class container memiliki properti ‘child:’ yang berfungsi untuk menyimpan anak-anaknya. Class child bisa berupa widget apa saja. Sebagai contohnya, kita dapat menggunakan widget teks sebagai salah satu child.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
child: const Text("Halo! Saya berada di dalam sebuah kontainer.!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
2. color
Properti color digunakan untuk menentukan warna latar belakang pada semua container. Dengan memanfaatkan warna latar belakang ini, kita dapat memvisualisasikan posisi container.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
color: Colors.orange,
child: const Text("Halo! Saya berada di dalam sebuah kontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
3. height dan width
Secara default, class container mengambil ruang yang diperlukan oleh elemen anaknya. Namun, kita juga dapat menentukan tinggi dan lebar dari container sesuai dengan kebutuhan yang ada.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
height: 200,
width: double.infinity,
color: Colors.orange,
child: const Text("Halo! Saya berada di dalam sebuah kontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
4. margin
Margin digunakan untuk memberikan jarak atau spasi di sekitar suatu container. Anda dapat melihat ada ruang kosong di sekeliling container tersebut. Untuk menentukan margin, Anda bisa menggunakan EdgeInsets.geometry. Dengan menggunakan metode .all(), margin akan diterapkan di keempat sisi (atas, bawah, kiri, dan kanan) dengan ukuran yang sama.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
height: 200,
width: double.infinity,
color: Colors.orange,
margin: const EdgeInsets.all(20),
child: const Text("Halo! Saya berada di dalam sebuah kontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
5. padding
Padding digunakan untuk memberikan ruang antara batas kotak dan elemen-elemennya. Perhatikan contoh di bawah ini dengan menambahkan properti padding akan terdapat jarak yang cukup antara batas dan teks.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
height: 200,
width: double.infinity,
color: Colors.orange,
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(30),
child: const Text("Halo! Saya berada di dalam sebuah kontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
6. alignment
Alignment digunakan untuk memposisikan elemen anak di dalam wadah. Kita dapat memposisikan dengan berbagai cara: bottom, bottom center, left, right, dan sebagainya. Di sini, elemen child akan diselaraskan dengan posisi tengah bawah.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
height: 200,
width: double.infinity,
color: Colors.orange,
margin: const EdgeInsets.all(20),
alignment: Alignment.bottomCenter,
padding: const EdgeInsets.all(30),
child: const Text("Halo! Saya berada di dalam sebuah kontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
7. decoration
Properti decoration digunakan untuk menghias kotak, seperti memberikan bingkai pada kotak tersebut. Properti ini akan melukis di belakang elemen yang ada di dalam kotak. Sedangkan dekorasi depan akan melukis di bagian depan elemen tersebut. Mari kita tambahkan border pada kotak. Namun, kita tidak dapat memberikan warna dan border dengan warna secara bersamaan.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
height: 200,
width: double.infinity,
margin: const EdgeInsets.all(20),
alignment: Alignment.center,
padding: const EdgeInsets.all(30),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 3),
),
child: const Text("Halo! Saya berada di dalam sebuah kontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
8. transform
Properti dari container ini membantu kita untuk memutar container tersebut. Kita dapat memutar container pada sumbu apapun, di sini kita sedang memutar pada sumbu z.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Contoh Container"),
),
body: Container(
height: 200,
width: double.infinity,
margin: const EdgeInsets.all(20),
alignment: Alignment.center,
padding: const EdgeInsets.all(30),
transform: Matrix4.rotationZ(0.1),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 3),
color: Colors.orange,
),
child: const Text("Halo! Saya berada di dalam sebuah kontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
9. constrain
Ketika kita ingin memberikan batasan tambahan pada child, kita dapat menggunakan properti ini.
10. clipBehaviour
Properti ini menerima Object Clip Enum. Ini menentukan apakah konten di dalam container akan dipotong atau tidak.
11. foregroundDecoration
Properti ini menyimpan class Decoration sebagai object. Properti mengontrol dekorasi di depan class Container.
Penting untuk dicatat bahwa class container memiliki banyak operasi lain yang dapat dilakukan. Selain itu, dalam pengembangan aplikasi flutter, class container digunakan secara luas. Namun, informasi yang disajikan di atas hanya merupakan dasar untuk memahami class container. Anda dapat menemukan lebih banyak properti dan atribut pada tautan yang disediakan ini, yaitu pada dokumentasi resmi flutter.
Tutorial sebelumnya : Stateful Widget dan Stateless Widget
Tutorial setelahnya : Flutter Scaffold
Semua Tutorial Flutter : Tutorial Flutter