Home Flutter Cara Menambahkan kelas Icon dan kelas image pada Flutter

Cara Menambahkan kelas Icon dan kelas image pada Flutter

0
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😊