Mendalami Widget Flutter: Dasar Penting dalam Pengembangan Aplikasi

Flutter adalah framework open-source dari Google yang digunakan untuk membuat aplikasi Android, iOS, web, dan desktop dengan satu basis kode. Salah satu konsep paling penting dalam Flutter adalah Widget. Hampir semua hal yang kita lihat di aplikasi Flutter dibangun dari widget.

Apa Itu Widget di Flutter?

Widget adalah blok penyusun utama dalam Flutter. Mulai dari teks, tombol, gambar, hingga tata letak layar, semuanya merupakan widget. Flutter menggunakan konsep Everything is a Widget, artinya seluruh tampilan aplikasi dibentuk dari kumpulan widget yang saling tersusun.

Jenis-Jenis Widget Flutter

1. StatelessWidget

StatelessWidget adalah widget yang tidak berubah setelah dibuat. Widget ini cocok untuk tampilan statis.

Contoh penggunaan:

Text
Icon
Image

Ciri-ciri:

Tidak memiliki state
Ringan dan sederhana
Digunakan untuk UI yang tidak perlu update data

2. StatefulWidget

StatefulWidget adalah widget yang dapat berubah saat aplikasi berjalan.

Contoh penggunaan:

Checkbox
Form input
Counter

Ciri-ciri:

Memiliki state
Tampilan bisa berubah
Cocok untuk interaksi pengguna

Widget Layout yang Sering Digunakan

Widget layout digunakan untuk mengatur posisi dan ukuran widget lain.

Beberapa widget layout penting:

Column → Menyusun widget secara vertikal
Row → Menyusun widget secara horizontal
Container → Mengatur margin, padding, warna, dan ukuran
Expanded & Flexible → Mengatur ukuran dinamis

MaterialApp dan Scaffold

Dalam Flutter, aplikasi biasanya dimulai dengan MaterialApp yang berfungsi sebagai akar aplikasi.

Sedangkan Scaffold digunakan untuk membuat struktur halaman seperti:

AppBar
Body
FloatingActionButton

Kombinasi keduanya sangat penting dalam membangun tampilan aplikasi Flutter.

Mengapa Perlu Mendalami Widget?

Dengan memahami widget secara mendalam, kita dapat:

Membuat UI yang rapi dan responsif
Mengoptimalkan performa aplikasi
Mengurangi bug pada tampilan
Lebih mudah mengembangkan fitur baru

Penutup

Widget adalah fondasi utama dalam Flutter. Semakin kita memahami cara kerja dan jenis-jenis widget, semakin mudah kita membangun aplikasi yang menarik dan fungsional. Bagi pemula, disarankan untuk sering berlatih membuat tampilan sederhana agar terbiasa dengan konsep widget.

Semoga artikel ini bermanfaat dan menambah wawasan tentang Flutter. 🚀

Eksperimen

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: const Text(
          'Profil Evan Raka',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.transparent,
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Color(0xFFff416c), Color(0xFFff4b2b)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFF141E30), Color(0xFF243B55)],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: Center(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                InfoCard(
                  title: '🎂 Tanggal Lahir',
                  subtitle: '33 Agustus 2008',
                  gradientStart: Color(0xFFFF416C),
                  gradientEnd: Color(0xFFFF4B2B),
                ),
                SizedBox(width: 20),
                InfoCard(
                  title: '📍 Tempat Lahir',
                  subtitle: 'Kota Banjar, Indonesia',
                  gradientStart: Color(0xFF00C6FF),
                  gradientEnd: Color(0xFF0072FF),
                ),
                SizedBox(width: 20),
                InfoCard(
                  title: '🏄 Hobi',
                  subtitle: 'Bermain Game',
                  gradientStart: Color(0xFF11998E),
                  gradientEnd: Color(0xFF38EF7D),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class InfoCard extends StatefulWidget {
  final String title;
  final String subtitle;
  final Color gradientStart;
  final Color gradientEnd;

  const InfoCard({
    super.key,
    required this.title,
    required this.subtitle,
    required this.gradientStart,
    required this.gradientEnd,
  });

  @override
  State<InfoCard> createState() => _InfoCardState();
}

class _InfoCardState extends State<InfoCard>
    with SingleTickerProviderStateMixin {
  bool _pressed = false;

  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 2))
          ..repeat(reverse: true);
    _animation = Tween<double>(begin: 0.0, end: 0.05).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedScale(
      scale: _pressed ? 0.96 : 1,
      duration: const Duration(milliseconds: 150),
      child: GestureDetector(
        onTapDown: (_) => setState(() => _pressed = true),
        onTapUp: (_) => setState(() => _pressed = false),
        onTapCancel: () => setState(() => _pressed = false),
        onTap: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('${widget.title} diklik!')),
          );
        },
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: 220,
              height: 150,
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(24),
                gradient: LinearGradient(
                  colors: [
                    widget.gradientStart.withOpacity(0.9 + _animation.value),
                    widget.gradientEnd.withOpacity(0.9 + _animation.value),
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                boxShadow: [
                  BoxShadow(
                    color:
                        widget.gradientEnd.withOpacity(0.6 + _animation.value),
                    blurRadius: 20,
                    offset: const Offset(0, 10),
                  ),
                ],
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    widget.title,
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    widget.subtitle,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white.withOpacity(0.9),
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Non Eksperimen

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Profil Evan Raka'),
          centerTitle: true,
        ),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              _simpleCard(
                title: 'Tanggal Lahir',
                subtitle: '33 Agustus 2008',
              ),
              const SizedBox(height: 20),
              _simpleCard(
                title: 'Tempat Lahir',
                subtitle: 'Kota Banjar, Indonesia',
              ),
              const SizedBox(height: 20),
              _simpleCard(
                title: 'Hobi',
                subtitle: 'Bermain Game',
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _simpleCard({
    required String title,
    required String subtitle,
  }) {
    return Container(
      height: 120,
      width: double.infinity,
      color: Colors.grey[300], // polos, tanpa gradient
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center, // text di tengah vertikal
        crossAxisAlignment: CrossAxisAlignment.center, // text di tengah horizontal
        children: [
          Text(
            title,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 18,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            subtitle,
            style: const TextStyle(fontSize: 14),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

Cari Blog Ini

Tugas Evan Raka Riadi