Pada artikel Tutorial Crud dengan Flutter Bagian 3, kami akan mencoba menunjukan cara untuk Menampilkan data ke ListView dengan Flutter yang sudah kita input. Jika anda belum mengetahui bagaimana cara untuk menginput ke table database dengan flutter melalui API anda dapat melihat artikel ini https://tukangaplikasi.com/blog/android/tutorial-crud-dengan-flutter-bagian-2/.

Menampilkan data ke ListView dengan Flutter

Pertama, kita akan membuat class, untuk tutorial ini kami menamakannya dengan nama MyList.dart.

Untuk sementara, isi fungsi build dari MyList.dart seperti ini

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Data Pegawai"),
    ),
    body: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: StreamBuilder<List<ListPegawai>>(
        stream: _pegawaiController.stream,
        builder: (context, snapshot) {
          print(snapshot);
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Container(
              width: 100,
              height: 100,
              child: Center(child: CircularProgressIndicator()),
            );
          } else {
            return MyListPopulate(listPegawai: snapshot.data);
          }
        },
      ),
    ),
  );
}




Untuk mencari refrensi anda dapat mengunjungi link ini https://api.flutter.dev/flutter/widgets/ListView-class.html. Baik, mari kita mulai. Pertama yang harus kita lakukan adalah memanggil data pada table database kita dalam bentuk JSON, begini formatnya

[
  {
    "userId": "1",
    "namaLengkap": "User 1",
    "alamatLengkap": "Alamat user 1",
    "tanggalLahir": "2019-08-14",
    "noTelp": "0123456"
  },
  {
    "userId": "2",
    "namaLengkap": "User 2",
    "alamatLengkap": "Alamat user 2",
    "tanggalLahir": "2019-08-14",
    "noTelp": "12312312"
  }
]

Jadi untuk mendapatkan Json di atas kita harus memanggilnya dengan cara seperti ini

loadPegawai() async {
  await fetchPegawai().then((result) {
    _pegawaiController.sink.add(result);
  });
}

Future<List<ListPegawai>> fetchPegawai() async {
  final response =
      await http.post("http://192.168.1.9:84/tutorial_api/tampil.php");
  print(response.statusCode);
  if (response.statusCode == 200) {
    return compute(parsePegawai, response.body);
  } else {
    throw Exception('Failed to load');
  }
}

static List<ListPegawai> parsePegawai(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
  return parsed
      .map<ListPegawai>((json) => ListPegawai.fromJson(json))
      .toList();
}

loadPegawai() disini hanya berfungsi sebagi pen-trigger, yang berfungsi untuk memanggilnya adalah fetchPegawai(), setelah json berhasil di dapatkan kita akan melalui proses parse pada fungsi parsePegawai(). Setelah itu kita akan mengirimkan hasilnya ke class lain yang bernama ListPegawai. Berikut isi dari ListPegawai

class ListPegawai {
  String userId;
  String namaLengkap;
  String alamatLengkap;
  DateTime tanggalLahir;
  String noTelp;

  ListPegawai({
    this.userId,
    this.namaLengkap,
    this.alamatLengkap,
    this.tanggalLahir,
    this.noTelp,
  });

  factory ListPegawai.fromJson(Map<String, dynamic> json) => new ListPegawai(
        userId: json["userId"],
        namaLengkap: json["namaLengkap"],
        alamatLengkap: json["alamatLengkap"],
        tanggalLahir: DateTime.parse(json["tanggalLahir"]),
        noTelp: json["noTelp"],
      );

  Map<String, dynamic> toJson() => {
        "userId": userId,
        "namaLengkap": namaLengkap,
        "alamatLengkap": alamatLengkap,
        "tanggalLahir":
            "${tanggalLahir.year.toString().padLeft(4, '0')}-${tanggalLahir.month.toString().padLeft(2, '0')}-${tanggalLahir.day.toString().padLeft(2, '0')}",
        "noTelp": noTelp,
      };
}

Masih belum selesai, kita akan membutuhkan class lain untuk menampilkannya disini kami menamakannya MyListPopulate, berikut isinya

class MyListPopulate extends StatefulWidget {
  List<ListPegawai> listPegawai;

  MyListPopulate({Key key, this.listPegawai}) : super(key: key);

  @override
  _MyListPopulateState createState() => _MyListPopulateState();
}
class _MyListPopulateState extends State<MyListPopulate> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: widget.listPegawai.length,
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          child: Card(
            child: Container(
              width: MediaQuery.of(context).size.width * 0.50,
              child: ListTile(
                title: Text(
                  widget.listPegawai[index].namaLengkap,
                  style: TextStyle(fontSize: 18),
                ),
                subtitle: Text(
                  widget.listPegawai[index].alamatLengkap,
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

Secara lengkap script diatas akan terlihat seperti ini

import 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  StreamController<List<ListPegawai>> _pegawaiController =
      new StreamController<List<ListPegawai>>.broadcast();

  @override
  void initState() {
    super.initState();
    loadPegawai();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Data Pegawai"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: StreamBuilder<List<ListPegawai>>(
          stream: _pegawaiController.stream,
          builder: (context, snapshot) {
            print(snapshot);
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Container(
                width: 100,
                height: 100,
                child: Center(child: CircularProgressIndicator()),
              );
            } else {
              return MyListPopulate(listPegawai: snapshot.data);
            }
          },
        ),
      ),
    );
  }

  loadPegawai() async {
    await fetchPegawai().then((result) {
      _pegawaiController.sink.add(result);
    });
  }

  Future<List<ListPegawai>> fetchPegawai() async {
    final response =
        await http.post("http://192.168.1.9:84/tutorial_api/tampil.php");
    print(response.statusCode);
    if (response.statusCode == 200) {
      return compute(parsePegawai, response.body);
    } else {
      throw Exception('Failed to load');
    }
  }

  static List<ListPegawai> parsePegawai(String responseBody) {
    final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
    return parsed
        .map<ListPegawai>((json) => ListPegawai.fromJson(json))
        .toList();
  }
}

class ListPegawai {
  String userId;
  String namaLengkap;
  String alamatLengkap;
  DateTime tanggalLahir;
  String noTelp;

  ListPegawai({
    this.userId,
    this.namaLengkap,
    this.alamatLengkap,
    this.tanggalLahir,
    this.noTelp,
  });

  factory ListPegawai.fromJson(Map<String, dynamic> json) => new ListPegawai(
        userId: json["userId"],
        namaLengkap: json["namaLengkap"],
        alamatLengkap: json["alamatLengkap"],
        tanggalLahir: DateTime.parse(json["tanggalLahir"]),
        noTelp: json["noTelp"],
      );

  Map<String, dynamic> toJson() => {
        "userId": userId,
        "namaLengkap": namaLengkap,
        "alamatLengkap": alamatLengkap,
        "tanggalLahir":
            "${tanggalLahir.year.toString().padLeft(4, '0')}-${tanggalLahir.month.toString().padLeft(2, '0')}-${tanggalLahir.day.toString().padLeft(2, '0')}",
        "noTelp": noTelp,
      };
}

class MyListPopulate extends StatefulWidget {
  List<ListPegawai> listPegawai;

  MyListPopulate({Key key, this.listPegawai}) : super(key: key);

  @override
  _MyListPopulateState createState() => _MyListPopulateState();
}
class _MyListPopulateState extends State<MyListPopulate> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: widget.listPegawai.length,
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          child: Card(
            child: Container(
              width: MediaQuery.of(context).size.width * 0.50,
              child: ListTile(
                title: Text(
                  widget.listPegawai[index].namaLengkap,
                  style: TextStyle(fontSize: 18),
                ),
                subtitle: Text(
                  widget.listPegawai[index].alamatLengkap,
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

Sebelum kita jalankan, kita akan menambakan tombol di halaman utama kita

Container(
                  width: MediaQuery.of(context).size.width,
                  margin:
                  const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
                  alignment: Alignment.center,
                  child: new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new FlatButton(
                          color: Colors.green,
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(builder: (context) => MyList()),
                            );
                          },
                          shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0),
                          ),
                          child: new Container(
                            padding: const EdgeInsets.symmetric(
                              vertical: 20.0,
                              horizontal: 20.0,
                            ),
                            child: new Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new Expanded(
                                  child: Text(
                                    "Lihat Data Pegawai",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

Baik, jadi jika dijalankan hasilnya akan seperi ini

Tutorial Crud dengan Flutter Bagian 3Sekian artikel singkat dari kami, semoga bermanfaat. Jika anda ingin mendapatkan source code untuk artikel ini silahkan kunjungi link https://github.com/bobykurniawan11/tutorial/tree/d2917ecfc1e711ca6928957dc6209e3547fa3712

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!