Menggunakan gambar pada Flutter

Untuk menggunakan gambar pada Flutter terdapat beberapa tahapan antara lain :

1. Membuat folder images dan memasukkan gambar-gambar yang akan digunakan.
2. Mendaftarkan gambar yang akan digunakan pada file pubspec.yaml
3. 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
                  )
               ),
            )
         );
    }
}