Menggunakan Image pada Aplikasi Flutter

Masih menggunakan file project expense tracker. Kali ini kita akan tambahkan image. Image akan ditampilkan jika list expense masih kosong, ditampilkan dibawah tulisan no expense.

Tambahkan folder untuk menyimpan file gambar, pada tutorial digunakan folder assets/img (struktur folder dan nama folder tidak ada aturan baku).

Untuk file image bisa download disini.

Buka pubsec.yaml, tambahkan setting image yang akan digunakan.

  assets:
    - assets/img/empty-icon.png

Pada file expense_list.dart, kita periksa jika _trans.isEmpty maka tampilkan text No Expense dan image yang sudah kita setting di pubsec.yaml

: _trans.isEmpty
          ? Column(
              children: <Widget>[
                Text(
                  'No Expense...',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Container(
                  height: 200,
                  child: Image.asset(
                    'assets/img/empty-icon.png',
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            )

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import '../models/trans.dart';

class ExpenseList extends StatelessWidget {
  final List<Trans> _trans;

  ExpenseList(this._trans);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: _trans.isEmpty
          ? Column(
              children: <Widget>[
                Text(
                  'No Expense...',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Container(
                  height: 200,
                  child: Image.asset(
                    'assets/img/empty-icon.png',
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            )
          : ListView.builder(
              itemCount: _trans.length,
              itemBuilder: (ctx, idx) {
                return Card(
                  child: Row(
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.all(6),
                        margin: EdgeInsets.symmetric(
                          vertical: 10,
                          horizontal: 15,
                        ),
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Theme.of(context).primaryColor,
                                width: 2)),
                        child: Text(
                          // 'Rp. ${trx.amount}',
                          NumberFormat.currency(
                                  symbol: 'Rp. ', decimalDigits: 0)
                              .format(_trans[idx].amount),
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                              color: Theme.of(context).accentColor),
                        ),
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            _trans[idx].title,
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 12,
                            ),
                          ),
                          Text(
                            DateFormat.yMMMd().format(_trans[idx].txdate),
                            style: TextStyle(fontSize: 10, color: Colors.grey),
                          ),
                        ],
                      )
                    ],
                  ),
                );
              },
            ),
    );
  }
}