Kami akan membuat kumpulan artikel yang membahas tentang Tutorial Crud dengan Flutter. Jadi pertama yang akan kita lakukan adalah konfigurasi awal seperti pembuatan projek baru. Mari kita mulai

Tutorial Crud dengan Flutter

Jika anda belum pernah menginstall flutter sebelumnya anda dapat melihat artikel ini Flutter untuk Pengembangan Aplikasi Mobile. Pertama kita akan membuat Projek flutter baru, tutorial ini saya menggunakan Android Studio sebagai IDE.

  1. Pilih File
  2. Pilih New
  3. Pilih New Flutter Project
  4. Pilih Flutter Application
  5. Isi form sesuai ke inginan anda

Ok, sebelum kita mulai saya ingin menjelaskan sedikit apa yang akan kita buat, pada artikel Tutorial Crud dengan Flutter ini kita akan mencoba untuk membuat sebuah input edit dan delete untuk data pegawai. Berikut struktur table nya

CREATE TABLE `pegawai` (
  `userId` int(11) NOT NULL,
  `namaLengkap` varchar(32) NOT NULL,
  `alamatLengkap` varchar(100) NOT NULL,
  `tanggalLahir` date NOT NULL,
  `noTelp` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `pegawai`
  ADD PRIMARY KEY (`userId`);

Pertama kita akan membuat form sederhana, berikut scriptnya

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Form(
        key: _formKey,
        child: Container(
          height: MediaQuery.of(context).size.height,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Divider(
                  height: 50.0,
                  color: Colors.white,
                ),
                Container(
                  width: MediaQuery.of(context).size.width,
                  margin:
                      const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Expanded(
                          child: new TextFormField(
                        textInputAction: TextInputAction.next,
                        decoration: new InputDecoration(
                            labelText: "Nama Lengkap",
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            fillColor: Colors.white70),
                      )),
                    ],
                  ),
                ),
                Divider(
                  height: 14.0,
                  color: Colors.white,
                ),
                Container(
                  width: MediaQuery.of(context).size.width,
                  margin:
                      const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Expanded(
                          child: new TextFormField(
                        textInputAction: TextInputAction.next,
                        onFieldSubmitted: (v) {},
                        decoration: new InputDecoration(
                            labelText: "No Telp",
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            fillColor: Colors.white70),
                      )),
                    ],
                  ),
                ),
                Divider(
                  height: 14.0,
                  color: Colors.white,
                ),
                Container(
                  width: MediaQuery.of(context).size.width,
                  margin:
                      const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Expanded(
                          child: new TextFormField(
                        textInputAction: TextInputAction.next,
                        onFieldSubmitted: (v) {},
                        decoration: new InputDecoration(
                            labelText: "Tanggal Lahir",
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            fillColor: Colors.white70),
                      )),
                    ],
                  ),
                ),
                Divider(
                  height: 14.0,
                  color: Colors.white,
                ),
                Container(
                  width: MediaQuery.of(context).size.width,
                  margin:
                      const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Expanded(
                          child: new TextFormField(
                        textInputAction: TextInputAction.next,
                        onFieldSubmitted: (v) {},
                        decoration: new InputDecoration(
                            labelText: "Alamat",
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            fillColor: Colors.white70),
                      )),
                    ],
                  ),
                ),
                Divider(
                  height: 14.0,
                  color: Colors.white,
                ),
                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.red,
                          onPressed: () {},
                          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(
                                    "Sign In",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Divider(
                  height: 30.0,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Tampilannya menjadi seperti ini




Tutorial Crud dengan Flutter Bagian 1

Mohon maaf jika tampilan tidak terlalu baik.

Kemudian, karena kita akan memilih tanggal lahir jadi kita harus menggunakan plugin tambahan. Kita akan menggunakan flutter_cupertino_date_picker, jadi tambahkan flutter_cupertino_date_picker: ^1.0.11 ke dalam pubspec.yaml. lalu jalankan package get.

Agar kita dapat menggunakan flutter_cuppertino_date_picker , kita harus memanggil packagenya kedalam file dart kita, dengan cara menambahkan script dibawah ini ke bagian atas.

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

kemudian kita akan membuat sebuah fungsi agar plugin yang kita tambahkan tadi bekerja sesuai yang kita ingingkan

String _format = 'yyyy-MMMM-dd';
DateTime _dateTime;
DateTimePickerLocale _locale = DateTimePickerLocale.en_us;
void _showDatePicker() {
  DatePicker.showDatePicker(
    context,
    pickerTheme: DateTimePickerTheme(
      confirm: Text('Ok', style: TextStyle(color: Colors.cyan)),
      cancel: Text('Close', style: TextStyle(color: Colors.red)),
    ),
    initialDateTime: _dateTime,
    dateFormat: _format,
    locale: _locale,
    onClose: () => print("----- onClose -----"),
    onCancel: () => print('onCancel'),
    onChange: (dateTime, List<int> index) {
      setState(() {
        _dateTime = dateTime;
      });
    },
    onConfirm: (dateTime, List<int> index) {
      setState(() {
        _dateTime = dateTime;
      });
    },
  );
}

Terakhir, kita akan menambahkan TextEditingController, untuk penjelasan tentang TextEditingController dapat anda lihat disini https://api.flutter.dev/flutter/widgets/TextEditingController-class.html. Jadi, pertama kita akan membuat variable untuk setiap field kita

TextEditingController namaLengkapController = new TextEditingController();
TextEditingController alamatController = new TextEditingController();
TextEditingController tanggalLahirController = new TextEditingController();
TextEditingController notelpController = new TextEditingController();

Lalu kita masukan variable diatas sesuai dengan tempatnya, misalnya

new TextFormField(
                        controller: namaLengkapController,
                        textInputAction: TextInputAction.next,
                        decoration: new InputDecoration(
                            labelText: "Nama Lengkap",
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            fillColor: Colors.white70),
                      )

Jadi , jika kita jalankan aplikasi yang kita buat hari ini secara keseluruhan hasilnya akan seperti ini

Untuk mendownload script di atas anda dapat menunjungi link github ini https://github.com/bobykurniawan11/tutorial/tree/f41eb3da28bb9bfd8693f4de5c31efc0a889e439. Semoga artikel Tutorial Crud dengan Flutter Bagian 1 bermanfaat, sekian terima kasih. wassalamualaikum warahmatullahi wabarakatuh

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!