[Flutter][4] Menambahkan Icon dengan Icon Widget

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
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 :)