Flutter & Dart Cross-Platform Mobile Apps

Buat aplikasi Android & iOS berkualitas native dari satu basis kode menggunakan Dart dan Flutter framework.

Status Membaca:Belum Dibaca

Daftar Bab (1)

Bab 1 dari 1

Widget Tree & Dart Syntax Essentials

Flutter & Dart Mobile App Development

Di Flutter, Everything is a Widget. Tampilan aplikasi disusun dari hirarki pohon widget (Widget Tree).

Stateless vs Stateful Widget

StatelessWidget — Tampilan statis yang tidak berubah setelah di-render (misal: Text, Icon, Logo).

StatefulWidget — Tampilan dinamis yang dapat berubah saat ada interaksi pengguna (setState()).

Contoh Kode Flutter Simple UI:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('CodeBook Mobile'),
          backgroundColor: Colors.indigo,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.code, size: 80, color: Colors.indigo),
              const SizedBox(height: 16),
              const Text(
                'Selamat Datang di CodeBook!',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Mulai Belajar'),
              )
            ],
          ),
        ),
      ),
    );
  }
}