Cara Menambahkan kelas Icon dan kelas image pada Flutter

Assalamualaikum, Hallo sobat baraja, kali ini saya akan membagikan ilmu tentang cara menambahkan kelas Image dan kelas Icon pada flutter dan kedua kelas ini juga sering digunakan dalam pembuatan proyek flutter

Pertama, buatlah folder images pada proyek yang dibuat dan masukkan gambarnya

Kemudian buat library pada folder pubspec.yaml

Dengan menambahkan library seperti di atas maka semua gambar yang ada di folder images dapat kita gunakan. Selanjutnya copy script di bawah ini dan paste di file main.dart nya

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Demo Icon and Image o n Flutter',
      home: Home(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String namaFile = 'images/uda.gif';

  void pilihGambar(int index) {
    setState(() {
      switch (index) {
        case 0:
          this.namaFile = 'images/pizza.jpg';
          break;

        case 1:
          this.namaFile = 'images/kue.jpg';
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gabungan kelas Image dan Icon'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.local_pizza),
            onPressed: () {
              pilihGambar(0);
            },
          ),
          IconButton(
            icon: Icon(Icons.cake),
            onPressed: () {
              pilihGambar(1);
            },
          ),
        ],
      ),
      body: ListView(
        children: <Widget>[
          SizedBox(
            height: 15.0,
          ),
          Image.asset(
            this.namaFile,
            fit: BoxFit.contain,
            height: 250.0,
          ),
        ],
      ),
    );
  }
}

Kemudian running, maka akan muncul tampilan seperti ini kemudian silahkan pencet tombol icon nya nanti menyesuaikan tampilannya berdasarkan gambar yang dipilih

Semoga membantu, terima kasih telah berkunjung😊

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here