Card image cap
[Flutter][7] Penggunaan Background pada Container
Friday, 22 Feb 2019

Hello world,

Hari ini saya melanjutkan pembahasan tentang container, yaitu untuk penggunaan background pada container. Sebelumnya saya sudah membahas cukup banyak tentang penggunaan container. Jadi untuk hari ini mungkin hanya sebagai tambahan saja. Langsung saja saya berikan contoh.

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: new Text("My Apps"),
),
body: new Container(
height: 200.0,
width: 300.0,
child: new Text("Hello world"),
decoration: new BoxDecoration(
image: DecorationImage(
image: NetworkImage('http://code.byriza.com/lib/blog/flutter225.png'),
fit: BoxFit.cover
),
),
),
);
}
}

Nah ini dia contoh yang saya buat. Di contoh kali ini simpel saja, saya set container dengan height : 200 dan width : 300, lalu di dalamnya ada child berisi text hello world. Nah untuk backgroundnya saya gunakan decoration dengan class BoxDecoration yang diisi dengan image yang saya ambil dari sumber online. Selanjutnya ada fit dan BoxFit. Fit dan BoxFit di sini penggunaannya sebagai pengaturan gambar yang kita gunakan sebagai background. Penamaannya seperti pada css, yaitu cover, contain, fill, dan lain-lain. 

Mungkin itu saja untuk pembahasan kali ini.


Selamat mencoba :)