Copilot - Membuat Aplikasi Android Flutter (Flashscreen,Login, Register, HomePage)

1. Setup Flutter Project

Buat proyek Flutter baru:

flutter create my_app
cd my_app

2. Tambahkan Dependensi

Tambahkan dependensi di pubspec.yaml untuk SQLite dan provider:

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.0.0
  path_provider: ^2.0.0
  provider: ^6.0.0

Jalankan flutter pub get untuk menginstal dependensi.

3. Buat Model Database

Buat file database_helper.dart untuk mengelola database SQLite:

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
  static final DatabaseHelper _instance = DatabaseHelper._internal();
  factory DatabaseHelper() => _instance;

  static Database? _database;

  DatabaseHelper._internal();

  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await _initDB();
    return _database!;
  }

  Future<Database> _initDB() async {
    String path = join(await getDatabasesPath(), 'user.db');
    return await openDatabase(path, version: 1, onCreate: _createDB);
  }

  Future _createDB(Database db, int version) async {
    await db.execute('''
      CREATE TABLE users(
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        username TEXT,
        password TEXT
      )
    ''');
  }

  Future<void> insertUser(String username, String password) async {
    final db = await database;
    await db.insert('users', {'username': username, 'password': password});
  }

  Future<List<Map<String, dynamic>>> getUsers() async {
    final db = await database;
    return await db.query('users');
  }
}

4. Buat Halaman Splash Screen

Buat file splash_screen.dart:

import 'package:flutter/material.dart';
import 'login_screen.dart';

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future.delayed(Duration(seconds: 3), () {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => LoginScreen()),
      );
    });

    return Scaffold(
      body: Center(
        child: Text('Welcome to My App', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

5. Buat Halaman Login dan Register

Buat file login_screen.dart:

import 'package:flutter/material.dart';
import 'database_helper.dart';

class LoginScreen extends StatelessWidget {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(controller: usernameController, decoration: InputDecoration(labelText: 'Username')),
            TextField(controller: passwordController, decoration: InputDecoration(labelText: 'Password'), obscureText: true),
            ElevatedButton(
              onPressed: () async {
                // Implement login logic
              },
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () {
                // Navigate to register screen
              },
              child: Text('Register'),
            ),
          ],
        ),
      ),
    );
  }
}

6. Buat Halaman Home

Buat file home_screen.dart:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Welcome to Home Page')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Implement logout logic
        },
        child: Icon(Icons.logout),
      ),
    );
  }
}

7. Update main.dart

Akhirnya, update main.dart untuk memulai aplikasi:

import 'package:flutter/material.dart';
import 'splash_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: SplashScreen(),
    );
  }
}

8. Tampilan Menarik dan Colorful

Anda bisa menambahkan lebih banyak warna dan gaya menggunakan ThemeData dan widget seperti Container, Card, dan ListTile untuk membuat tampilan lebih menarik.

9. Jalankan Aplikasi

Jalankan aplikasi dengan perintah:

flutter run 

Ini adalah kerangka dasar untuk aplikasi Anda. Anda bisa menambahkan logika untuk login, register, dan logout sesuai kebutuhan. Jika ada pertanyaan lebih lanjut atau butuh bantuan, silakan tanya! 😊