Membuat Tampilan CRUD daftar kontak

Nama: Apriarni Luan
Kelas: B informatika 





 Assalamu'allaikum warahamtullahi wabaraktu Kali ini kita akan membuat tampilan CRUD daftar kontak CRUD adalah serangkaian fungsionalitas mendasar yang biasanya digunakan dalam manajemen database.CRUD terdiri dari CREATE.READ.UPDATE.DELETE.fungsi tersebut merupakan dasar bagi sebagian besar aplikasi.Nah berikut ini kita akan membuat tampilan CRUD daftar kontak. 

 1.Buat sebuah file dengan New Flutter Project
2.Berikut ini isi dari main dart 
main.dart:
import 'package:aplikasi_kontak/home.dart';
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,
      home: HomePage(),
    );
  }
}

3.lalu isi dari home.dart
home.dart:
import 'package:flutter/material.dart';
import 'create.dart';
import 'update.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(
        backgroundColor: Colors.blue,
        title: Text('Kontak'),
      ),
      body: Column(
        children: <Widget>[
          ListTile(
            title: Text('Nama Kontak 1'),
            subtitle: Text('Nomor Telepon 1'),
          ),
          ListTile(
            title: Text('Nama Kontak 2'),
            subtitle: Text('Nomor Telepon 2'),
          ),
          IconButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (builder) {
                  return UpdateDb();
                }));
              },
              icon: Icon(Icons.edit))
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (builder) {
            return CreateDb();
          }));
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

4.Berikut create.dart
create.dart:
import 'package:flutter/material.dart';

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

  @override
  State<CreateDb> createState() => _CreateDbState();
}

class _CreateDbState extends State<CreateDb> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Kontak Baru')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 30,
            ),
            Text('Nama'),
            TextField(),
            SizedBox(
              height: 30,
            ),
            Text('Nomor Telepon'),
            TextField(),
            SizedBox(
              height: 30,
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Simpan'),
            )
          ],
        ),
      ),
    );
  }
}

5.Lalu update.dart
update.dart:
import 'package:flutter/material.dart';

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

  @override
  State<UpdateDb> createState() => _UpdateDbState();
}

class _UpdateDbState extends State<UpdateDb> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Edit Kontak')),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 30,
              ),
              Text('Nama'),
              TextField(),
              SizedBox(
                height: 30,
              ),
              Text('Nomor Telepon'),
              TextField(),
              SizedBox(
                height: 30,
              ),
              ElevatedButton(onPressed: () {}, child: Text('Simpan')),
              SizedBox(
                height: 20,
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('Hapus'),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.red),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Berikut ini Hasilnya:



Komentar

Posting Komentar

Postingan populer dari blog ini

BELAJAR FLUTTER .Conditional Expression

Gambar
  Conditional expression adalah Operator kondisional yang digunakan untuk mengatur pernyataan if else secara singkat pada sebuah value variable atau Operator kondisi yang akan mengevaluasi suatu kondisi yang nilainya benar (true) atau salah (false) kemudian mengassign suatu nilai ke dalam variable. Berikut ini merupakan contoh conditional expression yang telah saya coba. Nah, disini saya menggunakan droppad untuk mengoding 1.Buka dratpad pada chrom yang sudah ada pada laptop atau computer kalian 2. kemudian masukkan perintah seperti dibawah ini                     1 2                                                                                   ...
Baca selengkapnya

Komunikasi Asertif

  Komunikasi Asertif Hayy teman" pada blog kali ini kita akan membahas tentang apa sih komunikasi asertif itu???      Mungkin kita sering mengalami kesulitan dalam megungkapkan perasaan serta pendapat kepada orang lain,Terutama didalam dunia pekerjaan,Nah dengan berkomunikasi asertif kita bisa menyelesaikan masalah tersebut.karena didalam dunia pekerjaan berkomunikasi dengan cara asertif sangatlah penting.        Gaya Berkomunikasi juga sangat berpengaruh terhadap perilaku individu.Perilaku yang perlu ditumbuhkan dalam diri agar lebih asertif seperti tetap berpandangan positif dan baik dalam mengadapi suatu permasalahan,mengatakan kebenaran dalam mempertahankan tujuan walaupun muncul konflik tetapi selalu menjaga perasaan orang lain,memberi dan menerima umpan balik dalam hal hal postif maupun dalam hal negatif,serta tegas dalam menentukan pilihan tanpa memaksakan kehendak kepada orang lain.     Apa Sih Asertif i...
Baca selengkapnya

Konsep Diriku

Gambar
  HII!!! SELAMAT DATANG DI BLOG SAYA TEMAN TEMAN Bagaimana kabar teman teman sekalian??Semoga kita semua tetap dalam keadaan sehat walafiat yaaa     Nah, Pada Blog kali ini sesuai dengan judul diatas bahwa saya akan membahas tentang konsep diriku sendiri atau self concept .Berfikir mengenai diri sendiri merupakan aktifitas manusia yang tidak dapat dihindari,kita berfikir mengenai diri sendiri dan membayangkan diri kita sebagai orang lain.Mungkin teman teman sklian bertanya tanya apa sih konsep diri itu? Nah baiklah, Konsep diri atau Self concept merupkan cara dan sikap individu dalam memandang dirinya sendiri.   Untuk Memahami pengertian konsep diri lebih dalam berikut pengertian konsep diri dari beberapa para ahli; 1. Menurut Budi Anna Keliat    Budi Anna Keliat mengatakan bahawa Self Concept atau konsep diri adalah cara pandang individu dalam memandang dirinya baik secara utuh,fisikal,intelektual,emosinal,spiritual, maupun sosial. 2. Clara...
Baca selengkapnya