[dart] home

Viewer

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_contact_app/contact_service.dart';
  3. import 'package:flutter_contact_app/edit_form.dart';
  4.  
  5. class HomeScreen extends StatefulWidget {
  6.   const HomeScreen({super.key});
  7.  
  8.   @override
  9.   State<HomeScreen> createState() => _HomeScreenState();
  10. }
  11.  
  12. class _HomeScreenState extends State<HomeScreen> {
  13.   //inisialisasi variabel
  14.   ContactService contactService =
  15.       ContactService(); //inisialisai class transaksi
  16.   List data = []; //digunakan untuk menampung data yang diambil
  17.   bool isLoading = true;
  18.  
  19.   @override
  20.   void initState() {
  21.     super.initState();
  22.     //menjalankan data pertama kali
  23.     getData();
  24.   }
  25.  
  26.   //memanggil data
  27.   void getData() async {
  28.     setState(() {
  29.       isLoading = true;
  30.     });
  31.  
  32.     //menggunakan method getData pada class transact ion
  33.     List getData = await contactService.getData();
  34.     setState(() {
  35.       data = getData; //reversed.toList() akan mengurutkan data DESC
  36.       isLoading = false;
  37.     });
  38.   }
  39.  
  40.   @override
  41.   Widget build(BuildContext context) {
  42.     return Scaffold(
  43.       appBar: AppBar(
  44.         title: Text(
  45.           'Contact Apps',
  46.           style: TextStyle(color: Colors.white),
  47.         ),
  48.         backgroundColor: Colors.blue,
  49.         shadowColor: Colors.blue,
  50.         elevation: 4,
  51.       ),
  52.       body: isLoading
  53.           ? Center(
  54.               child:
  55.                   CircularProgressIndicator(), // Menampilkan Circular Progress Indicator
  56.             )
  57.           : ListView.builder(
  58.               itemCount: data.length,
  59.               itemBuilder: (_, item) {
  60.                 return Column(
  61.                   children: [
  62.                     ListTile(
  63.                       contentPadding:
  64.                           EdgeInsets.symmetric(horizontal: 16, vertical: 10),
  65.                       leading: CircleAvatar(
  66.                         radius: 30, // Sesuaikan radius sesuai keinginan Anda
  67.                         backgroundImage: NetworkImage(
  68.                           'https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png',
  69.                         ),
  70.                       ),
  71.                       title: Text(
  72.                         '${data[item]['name']}',
  73.                         maxLines: 2,
  74.                         overflow: TextOverflow.ellipsis,
  75.                       ),
  76.                       subtitle: Column(
  77.                         crossAxisAlignment: CrossAxisAlignment.start,
  78.                         children: [
  79.                           Text('Kelamin: ${data[item]['gender']}'),
  80.                           Text('Phone: ${data[item]['phone']}'),
  81.                           Text('Alamat: ${data[item]['address']}'),
  82.                           Text('Hobi: ${data[item]['hobby']}'),
  83.                         ],
  84.                       ),
  85.                       trailing: Row(
  86.                         mainAxisSize: MainAxisSize.min,
  87.                         children: [
  88.                           IconButton(
  89.                             onPressed: () {
  90.                               Navigator.push(
  91.                                 context,
  92.                                 MaterialPageRoute(
  93.                                   builder: (context) => EditForm(
  94.                                     data: data[item],
  95.                                   ),
  96.                                 ),
  97.                               );
  98.                             },
  99.                             icon: Icon(
  100.                               Icons.edit,
  101.                               color: Colors.blue,
  102.                             ),
  103.                           ),
  104.                           SizedBox(width: 8),
  105.                           IconButton(
  106.                             onPressed: () {
  107.                               contactService.deleteData(item);
  108.                               getData();
  109.                             },
  110.                             icon: Icon(
  111.                               Icons.delete,
  112.                               color: Colors.red,
  113.                             ),
  114.                           ),
  115.                         ],
  116.                       ),
  117.                     ),
  118.                     Divider(),
  119.                   ],
  120.                 );
  121.               },
  122.             ),
  123.       floatingActionButton: FloatingActionButton(
  124.         onPressed: () {
  125.           Navigator.pushNamed(context, '/addForm');
  126.         },
  127.         child: Icon(
  128.           Icons.add,
  129.           color: Colors.white,
  130.         ), // Ikona FAB
  131.         backgroundColor: Colors.blue, // Warna latar belakang FAB
  132.       ),
  133.     );
  134.   }
  135. }
  136.  

Editor

You can edit this paste and save as new:


File Description
  • home
  • Paste Code
  • 10 Dec-2023
  • 4.56 Kb
You can Share it: