Kamis, 02 November 2023

Membuat aplikasi CRUD dengan floor

     Pada pembahasan kali ini saya akan membagikan tentang praktikum pemrograman mobile mengenai cara membuat aplikasi CRUD dengan menggunakan sistem database floor. jadi floor tersebut merupakan package dari flutter yang bisa digunakan untuk membuat aplikasi yang menggunakan database.

    Langsung saja kita ke praktikumnya


    Hal yang harus kita lakukan terlebih dahulu adalah membuat tampilan utama yang akan muncul ketika aplikasi dibuka. akan tetapi, sebelum kita membuat program halaman utama, kita harus membuat sebuah program untuk menjalankan aplikasi kita (debugging), biasanya saya akan menggunakan file "main.dart". untuk isi programnya adalah sebagai berikut:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

    Setelah membuat program tersebut, maka kita bisa lanjut ke tahap pembuatan Tampilan utama dari aplikasi kontak.

Tampilan utama (Home page)

     Berikut ini adalah program dari tampilan utama aplikasi kontak:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Apk Kontak'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Card(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('nama'),
                Text('08123456789'),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}


    Untuk tampilan utama ini, akan menghasilkan tampilan seperti berikut ini ketika di jalankan:






Tidak ada komentar:

Posting Komentar