Dasar-dasar Widget di Flutter

****# Dasar-Dasar Widget di Flutter

Flutter adalah framework yang menggunakan konsep widget sebagai dasar dari UI (User Interface). Dalam Flutter, segala sesuatu adalah widget, mulai dari layout, tombol, hingga animasi.

1. Apa Itu Widget?

Widget adalah elemen dasar dalam Flutter yang membentuk tampilan aplikasi. Ada dua jenis widget utama:

• StatelessWidget: Widget yang tidak berubah (immutable). Contohnya adalah Text, Icon, dan Container.
• StatefulWidget: Widget yang dapat berubah saat aplikasi berjalan (memiliki state). Contohnya adalah TextField, Checkbox, dan AnimatedContainer.

2. Contoh StatelessWidget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateless Widget')),
        body: Center(
          child: Text('Halo, Flutter!'),
        ),
      ),
    );
  }
}

3. Contoh StatefulWidget

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateful Widget')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Counter: $counter', style: TextStyle(fontSize: 20)),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: incrementCounter,
                child: Text('Tambah'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. Widget Umum yang Sering Digunakan

Berikut beberapa widget dasar yang sering digunakan dalam Flutter:

1. Text

Digunakan untuk menampilkan teks.

Text('Halo, Flutter!', style: TextStyle(fontSize: 20, color: Colors.blue))

2. Container

Widget serbaguna untuk menampung elemen lain dan dapat diatur warna, margin, padding, dll.

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(child: Text('Kotak')),
)

3. Row & Column

Digunakan untuk mengatur layout secara horizontal (Row) atau vertikal (Column).

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star, color: Colors.yellow),
    SizedBox(width: 10),
    Text('Rating: 5.0')
  ],
)

4. ElevatedButton

Tombol dengan efek elevasi.

ElevatedButton(
  onPressed: () => print('Tombol ditekan!'),
  child: Text('Klik Saya'),
)

5. Image

Digunakan untuk menampilkan gambar dari file lokal atau internet.

Image.asset('assets/logo.png', width: 100, height: 100)

5. Kesimpulan

Flutter menggunakan konsep widget untuk membangun UI aplikasi. Memahami perbedaan antara StatelessWidget dan StatefulWidget serta berbagai widget dasar sangat penting bagi pengembang Flutter.

Dengan dasar-dasar ini, Mimin bisa mulai mengembangkan aplikasi Flutter dengan lebih percaya diri! 🚀