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😊