Cara Membuat Tampilan Seperti WhatsApp Flutter

Flutter Romphe - Hai sob di sekarang saya akan mencoba membuat contoh tampilan mirip WA neh!, walaupun tidak mirip yang penting sudah hampirlah sekedar mencoba hal baru walaupun tidak kenak di kepala kalian yang penting sudah berusaha untuk mencoba aplikasi android, tapi sebelum kita mulai tutorialnya sebenarnya banyak hal yang perlu kalian persiapkan terlebih dahulu sebelum menjalankan aplikasi tersebut dan belajar membuat tampilan whatsapp menggunakan flutter.

Saran belajar android untuk spesifikasi laptop rendah itu hurus sabar sebab saya pertama kali belajar memang senang tapi kelamaan capek juga sebab melihat kondisi laptop rendah memang susah belajarnya yang penting mencoba dan berusaha.

Cara Membuat Tampilan Seperti WhatsApp Flutter

Judul kali ini seperti yang sudah saya utarakan dengan nama Cara Belajar Tampilan Seperti WhatsApp Flutter langsung saja baca dulu poin di bawah ini supaya kalian semangat terus dalam belajar bisa juga baca (Cara Menjalankan Emulator Menggunakan CMD).

Hal yang perlu dipersiapkan untuk menjalankan aplikasi android menggunakan flutter

#1 Laptop mempunyai spesifikasi yang cukup minimal RAM 4 GB paling rendah jika sudah tidak mampu lagi untuk mengupgrade.

#2. Usahakan menggunakan SSD supaya tidak lama-lama di depan laptop untuk menunggu debug aplikasi pertama yang kalian buat.

#3. Sediakan Kopi supaya tidak bete sebab setelah saya coba hampir 1 Jam untuk debug pertama kali sebab dua poin belum saya terpenuhi.

#4. Langsung kita coba walaupun spesifikasi rendah yang penting aplikasi sudah terinstall dengan baik langsung kita coba bersama-sama.

Itulah empat poin sedikit bisa kalian pertimbangkan saja sebelum memulai aplikasi flutter supaya tidak kaget jika pertama kali menggunakan bahasa flutter, seperti yang sudah saya alami dengan laptop seadanya.

Buka dulu visual studio code, pastikan dibagian lib ada bacaan main.dart lalu buat file kodingan source seperti dibawah ini.

import 'package:flutter/material.dart';
import 'package:newapp/screen/add.dart';
import 'package:newapp/screen/detail.dart';
import 'package:newapp/screen/list.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => ListScreen(),
        '/add': (context) => AddScreen(),
        '/detail': (context) => DetailScreen()
      },
    );
  }
}

Buat folder screen didalam lib 

Buat 3 File dengan nama add.dart, detail.dart, add.dart

Kita buat source pertama di dalam detail.dart isinya bisa lihat koding di bawah ini.

import 'package:flutter/material.dart';
import 'package:newapp/shared/animal.dart';

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Animal args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.nama),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            // gambar icon besar
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 30),
              child: Center(
                child: CircleAvatar(
                  radius: 80,
                  backgroundImage: NetworkImage('https://loremflickr.com/480/480/' + args.kode),
                ),
              ),
            ),

            // Teks Utama
            Padding(
              padding: const EdgeInsets.only(bottom: 20),
              child: Text(args.nama, style: TextStyle(
                fontSize: 35
              )),
            ),

            // Divider
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 0),
              child: Divider(),
            ),

            // List Keterangan
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30),
              child: Column(
                children: <Widget>[
                  ListTile(
                    subtitle: Text('Jenis'),
                    title: Text(args.jenis.toUpperCase()),
                  ),
                  ListTile(
                    subtitle: Text('Jumlah Kaki'),
                    title: Text(args.jumlahKaki.toString()),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Setelah itu bisa kita buat lagi yang sudah di buat tadi list.dart, jadikan satu folder dengan nama file yang berbeda langsung saja lihat kodinganya.

import 'package:flutter/material.dart';
import 'package:newapp/shared/animal.dart';

class ListScreen extends StatefulWidget {
  @override
  _ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
  List<Animal> _list = [];
  Animal _terpilih;

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

    setState(() {
      _list.add(Animal(
        id: 1, kode: 'dog', nama: 'Anjing', jenis: 'mamalia', jumlahKaki: 4
      ));
      _list.add(Animal(
        id: 2, kode: 'cat', nama: 'Kucing', jenis: 'mamalia', jumlahKaki: 4
      ));
      _list.add(Animal(
        id: 3, kode: 'lion', nama: 'Singa', jenis: 'mamalia', jumlahKaki: 4
      ));
      _list.add(Animal(
        id: 4, kode: 'fish', nama: 'Ikan', jenis: 'ikan', jumlahKaki: 0
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        return Future(() {
          if (_terpilih != null) {
            setState(() {
              _terpilih = null;
            });
            return false;
          }
          return true;
        });
      },
      child: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            final dynamic hasil = await Navigator.pushNamed(context, '/add');
            if (hasil != null) {
              setState(() {
                _list.add(hasil);
              });
            }
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.green,
        ),
        appBar: AppBar(
          title: Text('Animals'),
          actions: <Widget>[
            AnimatedOpacity(
              duration: Duration(milliseconds: 700),
              opacity: _terpilih == null ? 0 : 1,
              child: IconButton(
                icon: Icon(Icons.edit),
                onPressed: () async {
                  final dynamic result = await Navigator.pushNamed(context, '/add', arguments: _terpilih);
                  if (result != null) {
                    setState(() {
                      // remove yang idnya sama
                      final index = _list.indexWhere((v) => result.id == v.id);
                      _list[index] = result;
                      _terpilih = null;
                    });
                  }
                },
              ),
            ),
            AnimatedOpacity(
              duration: Duration(milliseconds: 700),
              opacity: _terpilih == null ? 0 : 1,
              child: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {
                  setState(() {
                    _list.removeWhere((a) => a.id == _terpilih.id);
                    _terpilih = null;
                  });
                },
              ),
            )
          ],
        ),
        body: ListView.separated(
          itemCount: _list.length,
          itemBuilder: (context, index) {
            var animal = _list[index];

            return GestureDetector(
              onLongPress: () {
                setState(() {
                  _terpilih = animal;
                });
              },
              onTap: () {
                if (_terpilih != null) {
                  setState(() {
                    _terpilih = null;
                  });
                } else {
                  Navigator.pushNamed(context, '/detail', arguments: animal);
                }
              },
              child: AnimatedContainer(
                duration: Duration(milliseconds: 700),
                color: _terpilih != null && _terpilih.id == animal.id ? Colors.blue.shade100 : Colors.transparent,
                child: ListTile(
                  leading: Hero(
                    tag: animal,
                    child: CircleAvatar(
                      backgroundColor: Colors.red,
                      backgroundImage: NetworkImage('https://loremflickr.com/480/480/' + animal.kode)
                    ),
                  ),
                  title: Text(animal.nama),
                  trailing: Text('${animal.jumlahKaki}', style: TextStyle(
                    fontSize: 30
                  )),
                  subtitle: Text('Jenis: ' + animal.jenis),
                ),
              ),
            );
          },
          separatorBuilder: (context, index) {
            return Divider();
          },
        ),
      ),
    );
  }
}

Kode yang ketiga mengunakan source di bawah ini, sama saja satu folder screen dengan nama add.dart.

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:newapp/shared/animal.dart';

class AddScreen extends StatefulWidget {
  @override
  _AddScreenState createState() => _AddScreenState();
}

class _AddScreenState extends State<AddScreen> {
  final _formKey = GlobalKey<FormState>();
  final _namaController = TextEditingController();
  final _kodeController = TextEditingController();
  final _jenisController = TextEditingController();
  final _kakiController = TextEditingController();

  Animal _diedit;
  _setAnimal(Animal a) {
    setState(() {
      _diedit = a;
      _kodeController.text = a.kode;
      _namaController.text = a.nama;
      _jenisController.text = a.jenis;
      _kakiController.text = a.jumlahKaki.toString();
    });
  }

  @override
  void dispose() {
    _kodeController.dispose();
    _namaController.dispose();
    _jenisController.dispose();
    _kakiController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Animal args = ModalRoute.of(context).settings.arguments;
    if (args != null) {
      _setAnimal(args);
    }

    return Scaffold(
      appBar: AppBar(
        title: _diedit == null ? Text('Tambah Animal') : Text('Edit Animal'),
      ),
      body: Container(
        constraints: BoxConstraints.expand(),
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
        child: Form(
          key: _formKey,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                // judul
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 30),
                  child: Text((_diedit != null ? 'Edit' : 'Tambah') + ' Animal', style: TextStyle(
                    fontSize: 24
                  ), textAlign: TextAlign.center),
                ),

                // input kode
                TextFormField(
                  controller: _kodeController,
                  decoration: InputDecoration(
                    labelText: 'Masukkan Kode'
                  )
                ),

                // input nama
                TextFormField(
                  controller: _namaController,
                  decoration: InputDecoration(
                    labelText: 'Masukkan Nama'
                  ),
                ),

                // input jenis
                TextFormField(
                  controller: _jenisController,
                  decoration: InputDecoration(
                    labelText: 'Masukkan Jenis'
                  ),
                ),

                // input kaki
                TextFormField(
                  controller: _kakiController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    labelText: 'Masukkan Kaki'
                  ),
                ),

                // tombol
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20.0),
                  child: SizedBox(
                    width: double.infinity,
                    child: RaisedButton(
                      padding: EdgeInsets.symmetric(vertical: 15),
                      onPressed: () {
                        var rng = new Random();

                        var kodenya = _kodeController.text;
                        var namanya = _namaController.text;
                        var jenis = _jenisController.text;
                        var kaki = _kakiController.text;
                        var animal = Animal(
                          id: _diedit != null ? _diedit.id : rng.nextInt(1000),
                          nama: namanya, 
                          jenis: jenis, 
                          kode: kodenya,
                          jumlahKaki: int.parse(kaki)
                        );
                        Navigator.pop(context, animal);
                      },
                      child: Text('SIMPAN'),
                      color: Colors.blue, textColor: Colors.white,
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Sekarang kita buat folder lagi dengan nama shared buat file beri nama animal.dart langsung saja di bawah ini untuk menjalankan fungsinya.

import 'package:flutter/material.dart';

class Animal {
  Animal({
    @required this.id,
    @required this.kode,
    @required this.nama,
    @required this.jenis,
    @required this.jumlahKaki,
  });

  final int id;
  final String kode;
  final String nama;
  final String jenis;
  final int jumlahKaki;
}

Itulah tadi yang sudah saya coba dalam tutorial cara membuat tampilan mirip WhatsApp menggunakan flutter tapi hanya beda metode saja, disini praktek tentang nama hewan dengan sederhana, semoga saja bisa kalian kembangkan saja contoh dari kodingan tersebut.

Share this post