Mengenal Flutter Widget

Flutter adalah toolkit UI milik Google untuk membuat aplikasi yang terkompilasi secara native untuk platform iOS dan Android dari satu source code. Untuk membangun aplikasi dengan Flutter, kita harus memulainya dengan menggunakan widget sebagai blok bangunan utama. Widget digunakan untuk menggambarkan tampilan apa yang harus ditampilkan sesuai dengan konfigurasi dan statusnya saat ini. Beberapa contoh widget yang tersedia di Flutter adalah widget text, widget row, widget column, widget container, dan masih banyak lagi.

Widget adalah setiap elemen pada layar aplikasi Flutter. Tampilan layar sepenuhnya bergantung pada pilihan dan urutan widget yang digunakan untuk membangun aplikasi. Struktur kode aplikasi disusun dalam bentuk pohon widget.

Kategori Widget

Ada 14 kategori utama di mana widget flutter dibagi. Mereka terutama dipisahkan berdasarkan fungsionalitas yang mereka berikan dalam aplikasi flutter.

1. Accessibility: Ini adalah kumpulan widget yang membuat aplikasi flutter lebih mudah diakses.
2. Animation dan Motion: Widget ini menambahkan animasi ke widget lain.
3. Assets, Images, dan Icons: Widget ini bertanggung jawab atas aset seperti tampilan gambar dan menunjukkan ikon.
4. Async: Ini menyediakan fungsionalitas async dalam aplikasi flutter.
5. Basics: Ini adalah kumpulan widget yang benar-benar diperlukan untuk pengembangan aplikasi flutter dasar.
6. Cupertino: Ini adalah widget yang dirancang untuk iOS.
7. Input: Kumpulan widget ini menyediakan fungsionalitas input dalam aplikasi flutter.
8. Interaction Models: Widget ini digunakan untuk mengelola interaksi pengguna dan mengarahkan pengguna ke tampilan yang berbeda dalam aplikasi.
9. Layout: Kumpulan widget ini membantu dalam menempatkan widget lain di layar sesuai kebutuhan.
10. Material Components: Ini adalah kumpulan widget yang terutama mengikuti desain material oleh Google.
11. Painting dan effects: Ini adalah kumpulan widget yang mengaplikasikan perubahan visual pada widget anak mereka tanpa mengubah tata letak atau bentuk mereka.
12. Scrolling: Ini menyediakan kemampuan scroll ke sekelompok widget lain yang tidak dapat di-scroll secara default.
13. Styling: Ini berkaitan dengan tema, responsivitas, dan ukuran aplikasi.
14. Text: Ini menampilkan teks.

Tipe Widget

Secara umum ada dua jenis widget di flutter:

1. Stateless Widget
2. Stateful Widget

Contoh: Layout Tree dari layar aplikasi dasar menggunakan Stateless Widgets:

import 'package:flutter/material.dart';

// fungsi untuk mentrigger proses build aplikasi flutter
void main() => runApp(const NextgenTutorial());

class NextgenTutorial extends StatelessWidget {
  const NextgenTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text("Nextgen Tutorial"),
        ), // AppBar
        body: Container(
          child: const Center(
            child: Text("Halo guys!!"),
          ), // Center
        ), // Container
      ), // Scaffold
    ); // MaterialApp
  }
}

Contoh:  Layout Tree dari layar aplikasi dasar yang menggunakan Stateful Widgets. Ini juga menghasilkan hasil yang sama seperti kode di atas.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text("Nextgen Tutorial"),
        ), // AppBar
        body: const Center(
          child: Text("Halo Guys!!"),
        ), // Container
      ), // Scaffold
    ); // MaterialApp
  }
}

Deskripsi widget yang digunakan adalah sebagai berikut: 

• Scaffold – Menerapkan struktur tata letak visual desain material dasar.
• App-Bar – Untuk membuat bilah di bagian atas layar.
• Teks Untuk menulis text pada layar.
• Container – Wadah untuk memuat widget lainnya.
• Center – Untuk memberikan perataan tengah ke widget lain.

Output

Tutorial sebelumnya : Cara Membuat Project Flutter Di Visual Studio Code
Tutorial setelahnya : Stateful Widget dan Stateless Widget
Semua Tutorial Flutter : Tutorial Flutter