Kunci Jawaban Soal Pilihan Ganda Flutter UI (State Management)

📱 Widget Dasar Flutter/Dart

1 Stateless Widget

Widget Stateless adalah widget yang tidak dapat berubah (immutable). Cocok untuk menampilkan konten statis yang tidak perlu diperbarui berdasarkan interaksi pengguna.

Dart Code - Stateless Widget

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Text(
        'Halo, saya Stateless Widget!',
        style: TextStyle(fontSize: 18),
      ),
    );
  }
}

2 Stateful Widget

Widget Stateful adalah widget yang dapat berubah (mutable). Digunakan ketika widget perlu diperbarui berdasarkan interaksi pengguna atau data yang berubah.

Dart Code - Stateful Widget

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Tambah'),
        ),
      ],
    );
  }
}

3 MaterialApp & Scaffold

MaterialApp adalah widget utama yang mengatur tema dan navigasi aplikasi. Scaffold menyediakan struktur layout dasar seperti AppBar, Body, dan FloatingActionButton.

🖼️ Preview Tampilan Aplikasi

Di bawah ini adalah area untuk menampilkan screenshot atau preview dari kode Flutter yang telah dibuat:

Screenshot aplikasi Yang dibuat dengan widget dart flutter

4 Container & BoxDecoration

Container adalah widget serbaguna untuk styling dan layout. BoxDecoration digunakan untuk mendekorasi container dengan border, shadow, gradient, dll.

Kode Lengkap Aplikasi Flutter

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(
      title: 'Aplikasi Flutter di Zapp.run',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Aplikasi Flutter Saya',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
          ),
        ),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: const EdgeInsets.all(16),
                margin: const EdgeInsets.only(bottom: 16),
                decoration: BoxDecoration(
                  color: Colors.blue.shade50,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Colors.blue.shade200, width: 1),
                ),
                child: Text(
                  'Ini adalah teks pertama dalam kolom. Teks ini menjelaskan konten utama aplikasi yang sedang dijalankan.',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.blue.shade900,
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.all(16),
                margin: const EdgeInsets.only(bottom: 16),
                decoration: BoxDecoration(
                  color: Colors.green.shade50,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Colors.green.shade200, width: 1),
                ),
                child: Text(
                  'Ini adalah teks kedua. Teks ini memberikan informasi tambahan atau penjelasan lebih lanjut tentang aplikasi.',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.green.shade900,
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.orange.shade50,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Colors.orange.shade200, width: 1),
                ),
                child: Text(
                  'Ini adalah teks ketiga. Teks ini biasanya berisi informasi penutup atau instruksi tambahan untuk pengguna.',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.orange.shade900,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5 Column & Row

Column menata widget secara vertikal, sedangkan Row menata widget secara horizontal. Keduanya menggunakan properti mainAxisAlignment dan crossAxisAlignment untuk pengaturan posisi.