Card image cap
[Flutter][31] Overlay Layout dengan Stack Widget
Tuesday, 18 Jun 2019

Hello world,

Widget Stack memungkinkan kita membuat beberapa widget saling overlay atau bertumpuk. Selain itu kita dapat membuat dan mengatur posisi dari widget dengan mudah pada Stack widget. Contohnya pada beberapa kasus untuk meletakkan icon atau text di atas sebuah gambar. Atau pada thumbnail produk biasanya terdapat icon tanda diskon dan lain-lain. Semuanya dapat kita buat dengan Stack.

Pada gambar di atas adalah contoh gambaran layer-layer atau widget-widget pada stack. Untuk penulisan dalam flutter urutannya akan terbalik, dimana widget pertama akan menjadi widget terbawah dan seterusnya. Lihat contoh di bawah.

Stack(
children: <Widget>[
BottomWidget(),
MiddleWidget(),
TopWidget(),
],
),


Contoh codenya akan menjadi seperti ini:

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamanstack(),
));
}

class Halamanstack extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Stack"),
),
body: Stack(
children: <Widget>[
Container(
color: Colors.green,
),
Container(
color: Colors.red,
height: 200.0,
width: 200.0,
),
Container(
color: Colors.teal,
height: 100.0,
width: 100.0,
),
],
),
);
}
}

Pada contoh di atas terdapat tiga widget yang dibuat dalam stack, yaitu container pertama yang berisi warna background green, kemudian container kedua memiliki background red dan widget ketiga memiliki background teal. Jika dijalankan maka akan menjadi seperti di bawah ini.


Penggunaan Positioned

Selanjutnya ada penggunaan positioned untuk mengatur posisi widget secara bebas. Contoh:

Positioned(
right: 50.0,
top: 50.0,
child: Container(
color: Colors.teal,
height: 150.0,
width: 150.0,
),
)

Pada contoh di atas memposisikan widget container pada 50.0 dari kanan dan 50.0 dari atas. Contoh lengkapnya akan menjadi seperti di bawah ini.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamanstack(),
));
}

class Halamanstack extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Stack"),
),
body: Stack(
children: <Widget>[
Container(
color: Colors.green,
),
Container(
color: Colors.red,
height: 200.0,
width: 200.0,
),
Positioned(
right: 50.0,
top: 50.0,
child: Container(
color: Colors.teal,
height: 150.0,
width: 150.0,
),
)
],
),
);
}
}




Selamat mencoba :)