membuat app mobile sederhana

Membuat app mobile sederhana 

1.membuat tampilan sederhana 
-appbar dengan judul
-body berisi column
-minimal 3 widget text 


dengan kode:
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Latihan'),
        backgroundColor: Colors.blue,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 20),
            const Text(
              'Text Pertama',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              'Text Kedua',
              style: TextStyle(
                fontSize: 18,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              'Text Ketiga',
              style: TextStyle(
                fontSize: 16,
                fontStyle: FontStyle.italic,
              ),
            ),
          ],
        ),
      ),
    );
  }
}


2.Eksperimen

Dengan kode:
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Latihan'),
        backgroundColor: Colors.deepPurple, // Warna berubah
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0), // Padding lebih besar
        child: Row(
          children: [
            const SizedBox(width: 10), // SizedBox pertama
            const Text('Text 1'),
            const SizedBox(width: 30), // SizedBox besar
            const Text('Text 2'),
            const SizedBox(width: 30), // SizedBox besar
            const Text('Text 3'),
            const SizedBox(width: 10), // SizedBox terakhir
          ],
        ),
      ),
    );
  }
}
 

Komentar

Posting Komentar

Postingan populer dari blog ini

Gambar
Project Aplikasi Jastip Kantin Sekolah 🚀 Project Website Sekolah Aplikasi Jastip Kantin Sekolah Solusi modern untuk mempermudah siswa membeli makanan di kantin sekolah secara online tanpa antre panjang. 📌 Tentang Project Project ini merupakan aplikasi berbasis web yang dibuat untuk membantu siswa melakukan pemesanan makanan dan minuman di kantin sekolah secara online. Dengan sistem ini, siswa dapat memesan makanan lebih cepat dan efisien langsung dari smartphone mereka. 🎯 Tujuan Project: Membuat sistem digital kantin sekolah yang lebih praktis, cepat, dan modern agar proses pemesanan makanan menjadi lebih efisien. ✨ Fitur Utama ✅ Login dan registrasi pengguna ✅ Pemesanan makanan online ✅ Daftar menu kantin ✅ Status pesanan realtime ✅ Responsive untuk HP dan Laptop ✅ Tampilan modern dan user friendly 💻 Tek...
Baca selengkapnya

code dart flutter layout responsif dan navigasi

 Hai gaes! 👋 Gue mau share sedikit hasil ngulik gue pake Flutter & Dart. Awalnya iseng-iseng doang, tapi eh kok malah jadi aplikasi beneran 😆. Di postingan ini gue bakal tunjukin gimana gue ngebuat project ini dari awal, beserta cuplikan kodenya yang (semoga) bisa bantu kalian juga yang lagi belajar atau cari inspirasi buat ngoding. Buat yang belum terlalu familiar, Flutter itu framework dari Google yang kece banget buat bikin aplikasi cross-platform (Android & iOS), dan bahasa yang dipake tuh Dart. Seru banget buat dipelajarin, apalagi kalo udah liat hasilnya 👀. Langsung aja yuk, scroll ke bawah buat liat kodenya! import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Zapp Run Layout Demo',       theme: ThemeData(primarySwatch: Colors.blue),       home: HomePage...
Baca selengkapnya

tugass jadwal pelajaran sandi

📱 Aplikasi Jadwal Pelajaran Flutter dengan CRUD & UI Modern Pada artikel ini, saya akan membagikan cara membuat aplikasi jadwal pelajaran menggunakan Flutter yang sudah dilengkapi fitur CRUD (Create, Read, Update, Delete) serta menggunakan database SQLite. 📦 Dependency dependencies: flutter: sdk: flutter sqflite: ^2.3.0 path: ^1.8.3 🧠 Model Schedule class Schedule { int? id; String subject; String day; String time; String teacher; Schedule({ this.id, required this.subject, required this.day, required this.time, required this.teacher, }); Map toMap() { return { 'id': id, 'subject': subject, 'day': day, 'time': time, 'teacher': teacher, }; } factory Schedule.fromMap(Map map) { return Schedule( id: map['id'], subject: map['subject'], day: map['day'], time: map['time'], teacher: map['teacher'], ); } } 💾 Database Helper ...
Baca selengkapnya