[Flutter][44] BoxShadow pada Container Flutter



Card image cap

[Flutter][44] BoxShadow pada Container Flutter

Hello world,

Kali ini saya ingin menulis singkat mengenai salah satu class dalam flutter yaitu BoxShadow. Apa itu BoxShadow? Singkatnya BoxShadow seperti namanya adalah fungsi untuk membuat shadow (bayangan) pada widget Container. Kalau yang sudah sering bermain CSS pasti sudah biasa menggunakan property box-shadow pada CSS. Untuk flutter kita bisa menggunakan BoxShadow pada widget Container. Kenapa pakai Container? karena BoxShadow adalah bagian dari BoxDecoration dimana BoxDecoration adalah bagian dari Container. Apakah bisa pakai widget yang lain? Saya belum tahu, hehe.

Langsung ke pembahasan, kita buat dalam main.dart seperti berikut.


import 'package:flutter/material.dart';

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

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
body: Center(
child: Container(
height: 200.0,
width: 200.0,
),
),
);
}
}

Dari sini kita sudah punya sebuah kotak yang berada pada tengah layar dengan tinggi dan lebar 200.0. Selanjutnya kita buat BoxDecoration seperti berikut.

import 'package:flutter/material.dart';

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

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
body: Center(
child: Container(
height: 200.0,
width: 200.0,
decoration: new BoxDecoration(
color: Theme.of(context).primaryColor,
),

),
),
);
}
}

Dari sini kita sudah punya kotak dengan warna background berwarna biru (warna primary flutter). Hasilnya seperti berikut.


Selanjutnya kita buat shadow seperti berikut.

import 'package:flutter/material.dart';

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

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
body: Center(
child: Container(
height: 200.0,
width: 200.0,
decoration: new BoxDecoration(
color: Theme.of(context).primaryColor,
boxShadow: [
BoxShadow(
color: Colors.black,
spreadRadius: 3,
blurRadius: 10,
offset: Offset(0, 3), // changes position of shadow
)
],

),
),
),
);
}
}

Hasilnya seperti berikut.


Kita bisa mengubah warna shadow dan ukuran radius serta offsetnya sesuka hati. Kita juga bisa menggunakan warna dengan opacity seperti berikut.

boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 3,
blurRadius: 10,
offset: Offset(0, 3),
)
],

Selamat mencoba :)

Share :