FLUTTER : CONTAINER, STACK & POSITIONED

PERTEMUAN VII
CONTAINER, STACK & POSITIONED

Lebih lanjut dengan widget Flutter yang banyak digunakan secara umum untuk membuat dan
mengatur layout pada aplikasi mobile yang dibangun dengan Flutter. Alur materi ini adalah dengan
membahas ketiga widget tersebut satu persatu dengan memperlihatkan kegunaannya masing-
masing, kemudian diakhir materi kita akan mengerjakan sebuah case sederhana dengan menyatukan
ketiga widget tersebut dalam satu frame.

7.1. CONTAINER
Container jika diterjemahkan ke dalam  ndonesia maka hasilnya adalah wadah. Bagaikan
sebuah wadah, container ini memiliki banyak fungsi untuk menampung objek lainnya atau sebagai
dirinya sendiri. Beberapa step ke depan, kita akan berinteraksi dengan Container dengan
menggunakan beragam attribute yang dimilikinya dan menggunakannya untuk menyelesaikan
beberapa case.

Contoh : Kita membuat sebuah objek menggunakan Container dengan mengatur warnanya serta
memberikan margin, dengan perintah seperto berikut :

body: Container( EdgeInsets.all() = Memberikan margin sebesar value yang ada di

margin: EdgeInsets.all(10), dalamnya pada semua sisi (left, top, right, bottom). Container secara
color: Colors.red, default akan memenuhi semua ruang yang diberikan.
), Colors.red = memberikan warna Merah

Koding pada file main.dart Hasil Running Project

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Container'),
),
body: Container(
margin: EdgeInsets.all(10),
color: Colors.red,
),
),
);
}
}

Kita mencoba memahami Container lebih jauh, bahwa didalam container ada container, jadi selain
menjadi parent, Container juga bisa berperan sebagai child widget. Kita coba buktikan, setelah
membuat sebuah kotak besar yang berwarna merah sebagaimana projek diatas, selanjutnya di
dalamnya kita buat kotak lainnya dengan menggunakan BoxDecoration, didalam BoxDecoration kita

1|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

buat warna gradient (blue, lightBlueAccent, white), dan dengan menggunakan borderRadius untuk
membuat lengkungan sudut kotak.
Untuk mencoba, perbarui file main.dart diatas, dan tepat di bawah perintah color.Colors.red
tambahkan perintah berikut ini :

padding: EdgeInsets.all(15),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.lightBlueAccent, Colors.white],
),
borderRadius: BorderRadius.circular(30),
boxShadow: <BoxShadow>[
BoxShadow(blurRadius: 10),
],
),
),

Koding pada file main.dart Hasil Running Project

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Container'),
),
body: Container(
margin: EdgeInsets.all(10),
color: Colors.red,
padding: EdgeInsets.all(15),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.lightBlueAccent, Colors.white],
),
borderRadius: BorderRadius.circular(30),
boxShadow: <BoxShadow>[
BoxShadow(blurRadius: 10),
],
),
),
),
),
);
}
}

2|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

7.2. STACK & POSITIONED

Stack memungkinkan widget yang ada di dalamnya untuk di-set posisinya. Sehingga dengan
bantuan Positioned maka kita dapat mengarahkan dimana posisi widget tersebut hendak
ditempatkan. Jadi skema yang diinginkan untuk mengenal cara kerja dari Stack dan Positioned adalah
dengan membuat sebuah kotak menggunakan container dan di sudut kanan bawah kotak tersebut
terdapat kotak kecil yang berisikan text "Stack & Positioned".
Untuk mencoba, perbarui file main.dart diatas, dan hapus body: Container() dan Seluruh isinya, lalu
masukkan perintah berikut ini :
body: Stack(
Stack itu hampir sama dengan Column
children: <Widget>[
Container( dalam hal kesanggupan menampung
color: Colors.yellowAccent, widget, yakni bisa menampung lebih
height: 250, dari 1 widget sebagai children-nya.
), Perbedaannya adalah widget yang ada
Positioned(
top: 195, di dalam Stack dapat saling tumpang
left: 155, tindih sehingga dibutuhkan dekorasi
child: Container( lanjutan untuk menempatkan
height: 50, posisinya mau diletakkan dimana.
width: 250,
color: Colors.green,
Sedangkan bagian yang penting dari
child: Center( Positioned adalah attribute top, left,
child: Text( bottom, right yang berfungsi untuk
"Stack & Positioned", mengatur jarak dari sudut sekitarnya.
style: TextStyle(
color: Colors.white, Jadi, manfaat gabungan Stack &
fontWeight: FontWeight.bold, Positioned adalah kemampuan untuk
fontSize: 20,
),
mengatur tatak letak secara custom,
), berbeda dengan Column-Row yang
), menempatkan widget secara
), berurutan baik secara vertical dan
)
horizontal.
],
),

Koding pada file main.dart Hasil Running Project

3|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

PRAKTIKUM 7
Design UI Menggunakan Container, Stack dan Positioned

Dalam Praktikum materi Container, Stack dan

Positioned ini, kita akan membuat latihan praktikum Stack
Widget dengan hasil output seperti pada gambar disamping ini
:

Ikuti tahapan dalam membuat project dibawah ini.

1. Buat Project
Nama Projek kita yaitu stackwidget_app (ambil 3 kata awal dari nama anda, contoh stackwidget
_app_des). Setelah Project selesai dibuat, selanjutnya pada kelas main.dart dimodifikasi menjadi
perintah seperti dibawah ini :
import 'package:flutter/material.dart'; Ketika Projek dijalankan, akan
void main() { tampil kosong seperti ini
runApp(MaterialApp(
home: BelajarStackWidget(),
));
}

class BelajarStackWidget extends

StatefulWidget {
@override
_BelajarStackWidgetState createState() =>
_BelajarStackWidgetState();
}

class _BelajarStackWidgetState extends

State<BelajarStackWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(

);
}
}

4|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

2. Membuat Stack
Masukkan perintah Membuat stack pada state _BelajarStackWidgetState(), didalam tanda
kurung return Scaffold().
Perintah Stack Perubahan Koding
body: Stack(
children: <Widget>[

//Didalam stack kita akan masukkan

//Perintah Container, Positioned, padding
//dll yang kita butuhkan

],
),

3. Menampilkan Bakcground Tampilan Gambar Menggunakan Container

Kita mulai dengan membuat Container untuk menampung dan menampilkan Gambar Backgound.

3.A. Kita awali dengan memasukkan gambar background kedalam projek. Pilihlah 1 buah gambar
.jpg yang anda sukai, kemudian masukkan gambar tersebut kedalam project dengan cara :

1. Buat folder assets, kemudian buat folder images, masukkan gambar jpg anda kedalam
folder images. Nama folder dan nama gambar harus huruf kecil. Disini saya menggunakan
gambar dengan nama forest.jpg

5|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

2. Perbarui file pubspec.yeml pada project anda, yaitu pada assets, dan daftarkan folder dan
gambar anda disini.
File pubspec.yeml Sebelum di perbarui

Perbarui Menjadi seperti Berikut

Ingat : Pubspec sensitif terhadap spasi

Setelah diperbarui, klik Pub get di atas workspace, ini bertujuan supaya gambar yang anda
masukkan sudah terverifikasi dan bisa digunakan

3.B. Kembali file main.dart, didalam perintah stack pada state _BelajarStackWidgetState(),
body: Stack(
children: <Widget>[

//DISINI

],
),

Masukkan perintah untuk membuat Container yang akan menampilkan Background

gambar diatas, dengan perintah sebagai berikut :
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/forest.jpg'),
fit: BoxFit.fitHeight,
),
),
),

6|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

Struktur Perintah Hasil Running Project

4. Menampilkan waktu, kosakata 1 dan kosakata 2 menggunakan Positioned

Semua perintah masih didalam file main.dart, didalam perintah stack pada state
_BelajarStackWidgetState().

4.1. Menampilkan Waktu (Jam : Menit)

Masukkan perintah berikut untuk deklarasi variable waktu di bawah state
_BelajarStackWidgetState()
var date =DateTime.now();

Kemudian masukkan perintah berikut ini setelah perintah Container untuk menampilkan
Bakground gambar diatas.

Positioned( //Menampilkan Waktu

right: 40.0,
top: 80.0,
child: Text( date.hour.toString() + ':' + date.minute.toString(),
style: TextStyle(color: Colors.white, fontSize: 45.0)),
),

7|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

Struktur Perintah Hasil Running Project

4.2. Menampilkan Kosakata 1 : Wisuda 2021

Dalam menampilkan kosakata 1 ini, kita akan menggunakan font yang kita download dari
internet. Setelah Download, masukkan font kedalam project sebagaimana memasukkan
gambar diatas, bedanya disini kita menggunakan folder sendiri yaitu assets/fonts/fontflut.ttf,
kemudian perbarui/ deklarasi font kedalam pubspec.yeml.

Posisi Font dalam Struktur Project Sebelum di perbarui

Perbarui Menjadi seperti Berikut

Ingat : Pubspec sensitif terhadap spasi

8|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

Masukkan Perintah berikut ini setelah Positioned Waktu untuk memanggil kosakata 1 dengan
jenis font yang kita masukkan diatas.
Positioned( //Menampilkan Kosakata 1 dengan font dari assets
right: 40.0,
top: 120.0,
child: Text("Wisuda 2021",
style: TextStyle(color: Colors.black, fontSize: 30.0,
fontWeight: FontWeight.bold, fontFamily: 'fontflut')),
),

4.3. Menampilkan Kosakata 2 : (Nama Anda)

Masukkan Perintah berikut ini setelah Positioned Kosakata 1, disini kita menggunakan font
default.
Positioned( //Menampilkan Kosakata 2
right: 40.0,
top: 150.0,
child: Text("Desi Amirullah, A.Md",
style: TextStyle(color: Colors.black, fontSize: 15.0)),
),

Sampai disini anda bisa jalankan project anda, dan dapat dilihat hasilnya kosakata 1 dan 2
sudah tampil.

5. Menampilkan Card Widget dan Mengatur Posisinya

Masukkan perintah dibawah ini untuk membuat Card Widget dan Pengatur posisinya
menggunakan Positioned

Positioned( //Menampilkan Kosakata Card Widget dan Mengatur Posisinya

bottom: 48.0,
left: 10.0,
right: 10.0,
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Kata Mutiara",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 0, left: 16.0, right: 16.0, bottom: 8.0),
child: Text(
"Mahasiswa tingkat akhir tidak boleh banyak berkeluh kesah."
"Itu hanya akan membuang waktu dengan sia-sia."

9|D3TI -PBO Lanjutan

FLUTTER : CONTAINER, STACK & POSITIONED

"Lebih baik bangkit dan kejar cita-cita hingga"

"wisuda tahun ini tepat waktu. Dan, saat kamu merasa"
"lelah dengan Tugas Akhir, ingatlah semua perjuanganmu"
"hingga kamu sampai di titik ini.",
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.only(
top: 0, left: 16.0, right: 16.0, bottom: 8.0),
child: Text("aNdeso,2021"),
),
],
),
),
),

Jalankan Project anda, seharusnya hasilnya seperti ini.

10 | D 3 T I - P B O L a n j u t a n
FLUTTER : CONTAINER, STACK & POSITIONED

Catatan :
1. Buat Laporan Latihan Praktikum 7
2. Sesuaikan Nama dan gunakan Kata Mutiara yang kamu sendiri
3. Supaya objek yang kita masukkan dalam project seperti gambar dan font diatas, dan kemudian
kita deklarasi objek kedalam pubspec.yeml jangan lupa untuk klik pub get atau pub upgrade

Dan juga klik Get Depedencies/ Upgrade Depedencies

Agar objek yang kita tambahkan, dapat digunakan dalam project kita.

11 | D 3 T I - P B O L a n j u t a n