Class Icon di Flutter

View Categories

Class Icon di Flutter

Class Icon dalam Flutter digunakan untuk menampilkan ikon khusus dalam aplikasi kita. Daripada membuat gambar untuk ikon yang dibuat sendiri, kita dapat menggunakan class Icon untuk menyisipkan ikon yang sudah ada pada aplikasi kita. Untuk menggunakan class ini, pastikan bahwa Anda telah mengatur uses-material-design: true di file pubsec.yaml pada proyek Anda.

Constructor Icon

Icon(
      key key,
      size,
      color,
      semanticLabel,
      textDirection
)

Properti Icon

  • color: Digunakan untuk mengubah warna ikon.
  • size: Digunakan untuk mengubah ukuran ikon.
  • semanticLable: igunakan untuk memberikan deskripsi teks pada ikon saat aplikasi berada dalam mode aksesibilitas, seperti voice-over.
  • textDirection: Digunakan untuk mengatur arah teks pada ikon.

Note: properti SemanticLabel tidak akan terlihat pada antarmuka pengguna.

Berikut ini adalah beberapa contoh penggunaan properti ini.

Gambar contoh penggunaan icon

Untuk melihat semua ikon yang tersedia, klik disini.

Mari kita lihat beberapa contoh penggunaan ikon tersebut pada aplikasi sederhana yang dibangun dengan Flutter.

Contoh:

Dalam aplikasi ini kita akan menampilkan berbagai ikon pada tab-tab yang berbeda. Aplikasi ini akan memiliki 5 tab, masing-masing dengan 5 ikon yang berbeda. Kita akan mengubah properti Icon untuk melihat perubahan tampilan antarmuka pengguna. Berikut adalah daftar properti yang akan kita ubah:

1. music_note Icon:

properties:
color: default, size: 100, semanticLabel: None, textdirection: default

2. music_video Icon:

properties:
color: blue, size: 100, semanticLabel: None, textdirection: default

3. camera_alt Icon:

properties:
color: default, size: 100, semanticLabel: 'Camera', textdirection: default

4. grade Icon:

properties:
color: red, size: 300, semanticLabel: 'Star', textdirection: default

5. email Icon:

properties:
color: default, size: default, semanticLabel: None, textdirection: default

Source code lengkap

import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.music_note)),
                Tab(icon: Icon(Icons.music_video)),
                Tab(icon: Icon(Icons.camera_alt)),
                Tab(icon: Icon(Icons.grade)),
                Tab(icon: Icon(Icons.email)),
              ],
            ),
            title: const Text('Nextgen Tutorial'),
            backgroundColor: Colors.blue,
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.music_note, size: 100),
              Icon(Icons.music_video, color: Colors.blue, size: 100),
              Icon(Icons.camera_alt, semanticLabel: 'Camera', size: 100),
              Icon(
                Icons.grade,
                color: Colors.red,
                size: 300,
                semanticLabel: 'Star',
              ),
              Icon(Icons.email),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter Tile Card
Tutorial setelahnya : Flutter Expanded
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan