Latihan Tentang Appbar,column berisi 3 widget text

 Latihan 1 (Wajib)

Membuat Tampilan Sederhana:

    • Appbar dgn Judul
  • Body Berisi Column
  • Minimal 3 Widget Text
Experiment:

  • Ubah Warna AppBAr
  • Ganti Column ke Row
  • Tambahkan Padding dan SizedBox
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, // Menghilangkan banner debug
      home: Scaffold(
        // Bagian Atas Aplikasi
        appBar: AppBar(
          title: const Text('Latihan Pertama Flutter'),
          backgroundColor: Colors.blueAccent,
          centerTitle: true, // Membuat judul di tengah
        ),
        
        // Bagian Utama Aplikasi
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // Mengatur teks rata kiri
          children: const [
            Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                'Selamat Datang di Belajar Flutter!',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                '1. Belajar widget AppBar.',
                style: TextStyle(fontSize: 16),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                '2. Menggunakan Column untuk susunan vertikal.',
                style: TextStyle(fontSize: 16),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                '3. Menampilkan teks dengan widget Text.',
                style: TextStyle(fontSize: 16),
              ),
            ),
          ],
        ),
      ),
    );
  }
}













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, // Menghilangkan banner debug
home: Scaffold(
// Bagian Atas Aplikasi
appBar: AppBar(
title: const Text('Latihan Pertama Flutter'),
backgroundColor: Color.fromARGB(255, 255, 0, 0),
centerTitle: true, // Membuat judul di tengah
),
// Bagian Utama Aplikasi
body: Row(
crossAxisAlignment: CrossAxisAlignment.start, // Mengatur teks rata kiri
children: const [
Padding(
padding: EdgeInsets.all(16.0),
child: Text(
'Selamat Datang di Belajar Flutter!',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
'1. Belajar widget AppBar.',
style: TextStyle(fontSize: 16),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
'2. Menggunakan Column untuk susunan vertikal.',
style: TextStyle(fontSize: 16),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
'3. Menampilkan teks dengan widget Text.',
style: TextStyle(fontSize: 16),
),
),
],
),
),
);
}
}












Comments

Post a Comment

Popular posts from this blog

PRAKTIKUM FLUTTER APLIKASI JADWAL + setState

Praktikum Flutter - Aplikasi Jadwal PRAKTIKUM FLUTTER Aplikasi Jadwal Menggunakan setState Pendahuluan Flutter merupakan framework UI dari Google yang digunakan untuk membuat aplikasi mobile secara cepat dan efisien. Pada praktikum ini, kita akan membuat aplikasi jadwal sederhana dengan memanfaatkan setState . Tujuan Praktikum Memahami Stateful Widget Menggunakan setState Membuat aplikasi jadwal sederhana Konsep setState setState digunakan untuk memperbarui tampilan UI ketika data berubah. setState(() { data = "Data baru"; }); Langkah Pembuatan 1. Membuat Project flutter create jadwal_app cd jadwal_app flutter run 2. Stateful Widget class JadwalPage exte...
Read more

Praktikum Flutter: Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState)

Praktikum Flutter CRUD + setState PRAKTIKUM FLUTTER Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState) Pendahuluan Pada praktikum ini kita akan membuat aplikasi jadwal pelajaran sederhana menggunakan Flutter. Aplikasi ini mendukung fitur CRUD (Create, Read, Update, Delete) dengan memanfaatkan setState untuk memperbarui tampilan secara real-time. Tujuan Memahami konsep CRUD di Flutter Menggunakan setState untuk update data Membuat aplikasi interaktif sederhana Konsep CRUD Create → Menambah data Read → Menampilkan data Update → Mengubah data Delete → Menghapus data Struktur Data List<String> jadwal = []; TextEditingController controller = TextEditingController(); int indexEdit = -1; Fungsi Create & Update void simpanJadwal() { setState(() { if (indexEdit == -1) { jadwal.add(controller.text); // Create } else { ...
Read more