Dasar Dart & Flutter UI

Dasar Bahasa Dart

Dart adalah bahasa pemrograman di balik Flutter. Mari pelajari syntax dasarnya.

Variabel & Tipe Data:

Dartvoid main() {
  // Tipe data dasar
  String nama = 'IoT Academy';
  int umur = 1;
  double suhu = 27.5;
  bool isConnected = false;

  // var & final
  var pesan = 'Hello Dart!';  // tipe otomatis
  final pin = 2;              // tidak bisa diubah

  print('$nama - Suhu: $suhu°C');
  print('Connected: $isConnected');
}

Fungsi:

Dart// Fungsi sederhana
String getStatus(bool isOn) {
  return isOn ? 'ON 🟢' : 'OFF 🔴';
}

// Fungsi dengan named parameter
double hitungSuhu({required double celsius}) {
  return celsius * 9 / 5 + 32; // ke Fahrenheit
}

void main() {
  print(getStatus(true));        // ON 🟢
  print(hitungSuhu(celsius: 30)); // 86.0
}

Class:

Dartclass SensorData {
  final String nama;
  final double nilai;
  final String satuan;

  SensorData({
    required this.nama,
    required this.nilai,
    required this.satuan,
  });

  String tampilkan() => '$nama: $nilai $satuan';
}

void main() {
  var suhu = SensorData(nama: 'Suhu', nilai: 27.5, satuan: '°C');
  print(suhu.tampilkan()); // Suhu: 27.5 °C
}

Widget Dasar Flutter

Di Flutter, semua UI adalah Widget. Widget disusun seperti pohon (widget tree).

Widget yang sering dipakai:

StatelessWidget vs StatefulWidget

Widget ada 2 jenis: Stateless (tidak berubah) dan Stateful (bisa berubah).

Proyek Mini: App Tombol ON/OFF

Buat app dengan tombol yang bisa toggle ON/OFF. Ini akan menjadi dasar untuk kontrol LED nanti.

Dart — lib/main.dartimport 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: const Color(0xFF0F172A),
      ),
      home: const ControlPage(),
    );
  }
}

class ControlPage extends StatefulWidget {
  const ControlPage({super.key});
  @override
  State<ControlPage> createState() => _ControlPageState();
}

class _ControlPageState extends State<ControlPage> {
  bool isLedOn = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LED Controller'),
        backgroundColor: const Color(0xFF1E293B),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // LED Indicator
            Icon(
              Icons.lightbulb,
              size: 120,
              color: isLedOn
                  ? Colors.amber
                  : Colors.grey[700],
            ),
            const SizedBox(height: 20),
            // Status text
            Text(
              isLedOn ? 'LED: ON' : 'LED: OFF',
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
                color: isLedOn
                    ? Colors.greenAccent
                    : Colors.redAccent,
              ),
            ),
            const SizedBox(height: 40),
            // Toggle Button
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isLedOn = !isLedOn;
                });
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: isLedOn
                    ? Colors.redAccent
                    : Colors.greenAccent,
                padding: const EdgeInsets.symmetric(
                  horizontal: 40,
                  vertical: 16,
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              child: Text(
                isLedOn ? 'TURN OFF' : 'TURN ON',
                style: const TextStyle(
                  fontSize: 18,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Checklist Minggu 2

• Memahami variabel, tipe data, fungsi, dan class di Dart
• Mengenal widget dasar: Text, Column, Row, Container, ElevatedButton
• Memahami perbedaan StatelessWidget vs StatefulWidget
• Berhasil membuat app ON/OFF toggle dengan setState()
• Bisa menjalankan app di emulator atau device fisik