Sebenarnya tidak tahu ya apa judul di atas tepat atau tidak, intinya saya ingin membuat widget seperti berikut :
Awalnya saya kira mudah, tapi ternyata sulit, hehehe setelah mencoba berkali-kali akhirnya berhasil juga, berikut ini adalah penampakannya :
Fokuskan pada widget yang ada di kotak merah, untuk codenya adalah berikut ini :
Stack(
children: <Widget>[
Container(
width: 350.0, // Lebar parent container
height: 200.0,
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 300,
height: 200,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(20),
),
)),
Positioned(
left: 0,
top: 0,
child: Container(
width: 350,
height: 200,
child: Row(
mainAxisAlignment: MainAxisAlignment
.start, // Dimulai dari atas
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin:
EdgeInsets.only(left: 20, top: 20),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
constraints:
BoxConstraints(maxWidth: 150),
child: Text(
"Biaya Sepatu Rebook dengan discount 15 %"), // child: Widget lain di sini
),
SizedBox(
height: 50,
),
Text("Beli Sekarang"),
],
)),
Spacer(),
Padding(
padding: EdgeInsets.only(top: 20.0),
child: Image.asset(
'assets/images/sepatu.png',
width: 150,
height: 150,
),
),
],
)),
),
],
),
Setelah disave akhirnya berhasil pula, yang perlu diingat adalah pada widget stack, terdapat sub yaitu Positioned, nah kompulan Positioned ini harus berada dalam wadah, wadah ini bisa dibuat transparat.
lihat code berikut :
Container(
width: 350.0, // Lebar parent container
height: 200.0,
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 300,
height: 200,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(20),
),
)),
Positioned masih harus berada dalam Container bukan.
