Stack Widget #Flutter Indonesia
Asslamu’alaikum Wr. Wb.
Hallo sobat flutter kembali lagi di posting saya , pada postingan kali ini saya akan membahas tentang Stack Widget apasih stack widget ini Stack Widget adalah sebuah widget yang mana dapat memungkinkan kita membuat sebuah widget saling overlay atau bertumpuk contohnya seperti gambar dibawah ini :
Oke langsung saja bagaimana sih cara membuat stack widget :
1. Pertama kita buat project baru terlebih dahulu dengan nama stack_futter (optional)
2. Setelah itu kita tunggu sampai buil gradle nya selesai setelah selesai kalian coba edit file main.dart menjadi seperti ini :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PageHome(),
debugShowCheckedModeBanner: false,
);
}
}
class PageHome extends StatefulWidget {
@override
_PageHomeState createState() => _PageHomeState();
}
class _PageHomeState extends State<PageHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ClipRRect Flutter"),
),
body: ListView(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(32),
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
width: 400,
height: 400,
color: Colors.red,
),
Container(
width: 300,
height: 350,
color: Colors.green,
),
Container(
width: 250,
height: 300,
color: Colors.blue,
),
],
),
),
],
),
],
),
);
}
}
3. Lalu coba kalian running di emulator maka kurang lebih seperti gambar di atas
4. Lalu kita tambahkan beberapa tampilan model stacknya dengan mengetikan source code dibawah ini :
....
Padding(
padding: const EdgeInsets.all(32),
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 5,
color: Colors.blue,
child: Container(
width: 80,
height: 80,
),
),
Positioned(
bottom: -50,
right: -50,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 5,
color: Colors.orange,
child: Container(
width: 70,
height: 70,
),
),
),
Positioned(
top: -50,
left: -50,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 5,
color: Colors.orange,
child: Container(
width: 70,
height: 70,
),
),
),
],
),
),
SizedBox(
height: 60,
),
Padding(
padding: EdgeInsets.all(32),
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Card(
elevation: 5,
color: Colors.orange,
child: Container(
width: 240,
height: 100,
),
),
Positioned(
top: -50,
right: 20,
child: Container(
width: 200,
height: 100,
child: Card(
elevation: 5,
child: Image.network(
"https://specials-images.forbesimg.com/imageserve/675172642/960x0.jpg",
fit: BoxFit.cover,
),
),
),
)
],
),
)
....
5. maka kurang lebih full source code nya seperti ini :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PageHome(),
debugShowCheckedModeBanner: false,
);
}
}
class PageHome extends StatefulWidget {
@override
_PageHomeState createState() => _PageHomeState();
}
class _PageHomeState extends State<PageHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ClipRRect Flutter"),
),
body: ListView(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(32),
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
width: 400,
height: 400,
color: Colors.red,
),
Container(
width: 300,
height: 350,
color: Colors.green,
),
Container(
width: 250,
height: 300,
color: Colors.blue,
),
],
),
),
Padding(
padding: const EdgeInsets.all(32),
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 5,
color: Colors.blue,
child: Container(
width: 80,
height: 80,
),
),
Positioned(
bottom: -50,
right: -50,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 5,
color: Colors.orange,
child: Container(
width: 70,
height: 70,
),
),
),
Positioned(
top: -50,
left: -50,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 5,
color: Colors.orange,
child: Container(
width: 70,
height: 70,
),
),
),
],
),
),
SizedBox(
height: 60,
),
Padding(
padding: EdgeInsets.all(32),
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Card(
elevation: 5,
color: Colors.orange,
child: Container(
width: 240,
height: 100,
),
),
Positioned(
top: -50,
right: 20,
child: Container(
width: 200,
height: 100,
child: Card(
elevation: 5,
child: Image.network(
"https://specials-images.forbesimg.com/imageserve/675172642/960x0.jpg",
fit: BoxFit.cover,
),
),
),
)
],
),
)
],
),
],
),
);
}
}
kemudian kita running maka hasil akhirnya seperti ini :
1 Comment :