WidgetFlutter

 🧩 1. Apa Itu Widget di Flutter

Dalam Flutter, semua tampilan aplikasi dibangun dari widget.

Widget = “Komponen penyusun UI (User Interface)” di Flutter.

Contoh:

• Text di layar → pakai Text()

• Gambar → pakai Image()

• Tombol → pakai ElevatedButton()

• Tata letak → pakai Column() atau Row()

🩷 Jadi, setiap elemen tampilan di Flutter adalah widget!

---

💡 2. Jenis-Jenis Widget di Flutter

Jenis Widget	Penjelasan	Contoh
Stateless Widget	Tampilan tidak berubah walaupun pengguna berinteraksi.	Text, Icon, Image
Stateful Widget	Tampilan bisa berubah karena interaksi pengguna atau data.	TextField, Switch, Counter

---

🌷 3. Stateless Widget

➡️ Widget yang tidak punya “state” (tidak berubah).
Cocok untuk tampilan statis seperti teks, logo, atau judul.

🧠 Contoh:

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello Flutter 💖',
      style: TextStyle(fontSize: 24, color: Colors.pinkAccent),
    );
  }
}

🩷 Penjelasan:

• StatelessWidget tidak memiliki data yang berubah.

• Fungsi build() digunakan untuk menggambar tampilan di layar.

---

💖 4. Stateful Widget

➡️ Widget yang bisa berubah tampilannya saat ada interaksi pengguna.
Biasanya punya nilai atau variabel yang bisa diperbarui.

🧠 Contoh:

import 'package:flutter/material.dart';

class MyCounterWidget extends StatefulWidget {
  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int count = 0; // nilai yang bisa berubah

  void increaseCount() {
    setState(() {
      count++; // ubah nilai state
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Angka saat ini: $count', style: TextStyle(fontSize: 20)),
        ElevatedButton(
          onPressed: increaseCount,
          child: Text('Tambah 💗'),
        ),
      ],
    );
  }
}

🩷 Penjelasan:

• StatefulWidget punya dua bagian:
  1️⃣ Kelas utama → MyCounterWidget
  2️⃣ Kelas state → _MyCounterWidgetState

• Fungsi setState() → untuk memperbarui tampilan.

---

🌸 5. Contoh Widget Penting di Flutter

Kategori	Widget	Kegunaan
Teks & Gambar	Text, Image, Icon	Menampilkan tulisan dan gambar
Tata Letak (Layout)	Row, Column, Container, Stack	Mengatur posisi elemen di layar
Interaktif (Button/Input)	ElevatedButton, TextField, Checkbox, Switch	Interaksi pengguna
Navigasi	AppBar, Drawer, BottomNavigationBar	Navigasi antar halaman
Scroll/List	ListView, GridView	Menampilkan daftar data
Card & Decor	Card, Container, Padding	Membuat tampilan rapi & cantik

---

🌼 6. Struktur Dasar Aplikasi Flutter

Setiap aplikasi Flutter biasanya dimulai dari:

• main() → fungsi utama program

• runApp() → menjalankan widget utama

• MaterialApp() → kerangka aplikasi

• Scaffold() → kerangka halaman

---

💅 7. Contoh Kode Aplikasi Flutter Lengkap & Aesthetic

Berikut contoh aplikasi aesthetic pink skincare ✨:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fwairley & Glow 💖',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.pinkAccent),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int likes = 0;

  void addLike() {
    setState(() {
      likes++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFF0F5), // pink lembut 🍓
      appBar: AppBar(
        title: const Text('Fwairley & Glow 💋'),
        centerTitle: true,
        backgroundColor: Colors.pinkAccent,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const CircleAvatar(
              radius: 60,
              backgroundImage: NetworkImage(
                  'https://i.pinimg.com/736x/34/1b/55/341b55fd66e9b3fc39cf08d3c7cdb3de.jpg'),
            ),
            const SizedBox(height: 20),
            const Text(
              'Fwairley & Glow ✨',
              style: TextStyle(
                  fontSize: 26,
                  color: Colors.pinkAccent,
                  fontWeight: FontWeight.bold),
            ),
            const Text(
              'Be Radiant, Be You 🌸',
              style: TextStyle(fontSize: 18, color: Colors.grey),
            ),
            const SizedBox(height: 30),
            Text(
              '💗 $likes Likes 💗',
              style: const TextStyle(fontSize: 20, color: Colors.pink),
            ),
            const SizedBox(height: 10),
            ElevatedButton.icon(
              onPressed: addLike,
              icon: const Icon(Icons.favorite),
              label: const Text('Like 💕'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.pinkAccent,
                foregroundColor: Colors.white,
                padding:
                    const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

💖 Penjelasan Singkat:

Bagian	Fungsi
main()	Titik awal program Flutter
runApp()	Menjalankan widget utama
MaterialApp()	Mengatur tema, warna, dan halaman utama
Scaffold()	Menyediakan struktur dasar (AppBar, Body, dll.)
AppBar()	Menampilkan judul di atas
CircleAvatar()	Menampilkan foto profil bulat
Text()	Menampilkan teks
ElevatedButton()	Tombol untuk aksi pengguna
setState()	Memperbarui tampilan ketika data berubah

---

🌸 Kesimpulan Akhir:

Konsep	Penjelasan Singkat
Widget	Komponen penyusun UI di Flutter
Stateless Widget	Tidak berubah (statis)
Stateful Widget	Bisa berubah (dinamis)
MaterialApp + Scaffold	Struktur utama aplikasi
setState()	Fungsi untuk memperbarui tampilan
Contoh Widget Penting	Text, Image, Column, Row, Container, Button

---

💖 Hasil Code nya