Untuk menggunakan gambar pada Flutter terdapat beberapa tahapan antara lain :
- Membuat folder images dan memasukkan gambar-gambar yang akan digunakan.
- Mendaftarkan gambar yang akan digunakan pada file pubspec.yaml
- Menggunakan/ memanggil gambar dengan Wigdet Image
Pada artikel ini saya akan membuat cara menggunakan gambar dari folder images, dari Network dan menggunakan gambar sebagai decoration.
Membuat Folder Image dan memasukkan gambar.
Mendaftarkan gambar yang akan digunakan pada file pubspec.yaml
Apabila gambar yang akan digunakan lebih dari satu, kita cukup mendaftarkan nama foldernya saja seperti berikut
Untuk menggunakan gambar dapat menggunakan widget :
Image.asset : Gambar bersumber dari folder image.
Image.network : Gambar bersumber dari Internet / Network.
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Image.asset("images/madina.jpg"),
Image.network("https://www.linggapos.com/wp-content/uploads/2016/12/wpid-wp-1480665483720.jpg")
],
),
),
Untuk merubah ukuran gambar tambahkan properti width.
children: <Widget>[
Image.asset("images/madina.jpg", width: 300,),
Divider(),
Image.network("https://www.linggapos.com/wp-content/uploads/2016/12/wpid-wp-1480665483720.jpg", width: 300,)
],
Menggunakan gambar sebagai decoration
Apabila gambar akan digunakan sebagai decoration maka widget yang digunakan adalh AssetImage. Contoh dibawah ini adalah penggunakan gambar sebagai decoration dari Container.
body: Container(
height: 220,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/macca.jpg"),
fit: BoxFit.cover
)
)
)
Untuk menampilkan gambar berbentuk lingkaran, tambahkan properti, shape : BoxShape.circle
main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tutorial Drawer',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HalamanHome(),
);
}
}
class HalamanHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IDR CORNER IMAGE'),
backgroundColor: Colors.green,
centerTitle: true,
),
body: Center(
child: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/macca.jpg"),
fit: BoxFit.cover
),
shape: BoxShape.circle
)
),
)
);
}
}