Card image cap

[Flutter][4] Menambahkan Icon dengan Icon Widget
Wednesday, 20 Feb 2019

Hello World,

Hari ini pembahasannya sederhana saja yaitu tentang widget icon pada flutter. Penggunaannya sangat sederhana. Biasanya digunakan di list menu atau di link yang lebih praktis kalau menggunakan icon dari pada text. Oke langsung saja masuk ke kodenya (kita lanjutkan dari kode sebelumnya).

import 'package:flutter/material.dart';

void main(){
runApp(
new MaterialApp(
title: "My Apps",
home: new Myapp(),
)
);
}


class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: new Text(
"Hello World",
style: TextStyle(color: Colors.red, fontSize: 20.0, fontWeight: FontWeight.w500),
),
)
);
}
}

Penggunaan icon saya contohkan dengan mengganti text dengan icon sebagai berikut :

new Icon(Icons.home),

Untuk daftar icons yang disediakan oleh flutter bisa dilihat di sini.

- Icon Size

Seperti text,  pada icon size-nya juga hanya tinggal menyebutkan angka saja seperti contoh di bawah ini.

new Icon(
Icons.home,
size: 40.0,
),


- Icon Color

Untuk color kita masih menggunakan cara yang sama juga seperti pada Text. Pilihan warna bisa dilihat di sini.

new Icon(
Icons.home,
size: 40.0,
    color: Colors.blue,
),



Full Code

import 'package:flutter/material.dart';

void main(){
runApp(
new MaterialApp(
title: "My Apps",
home: new Myapp(),
)
);
}


class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: new Icon(
Icons.home,
size: 40.0,
color: Colors.blue,
),
)
);
}
}

Selamat Mencoba :) 





Card image cap
[Flutter][3] Menambahkan Text dengan Text Widget
19 Feb 2019 Learn


Card image cap
[Flutter][5] Menambahkan dan Menampilkan Gambar dengan Image Widget
21 Feb 2019 Learn