Pintar Android

Setelah kita bisa membuat aplikasi Hello World Flutter di artikel sebelumnya, sekarang kita akan belajar menggunakan widget2 yang ada di Flutter untuk membuat aplikasi dengan tampilan mirip instagram menggunakan Flutter di Visual Studio Code (VSCode). Hasil akhir akan seperti ini:

Mari kita mulai! pertama2, buat project baru via command line:

flutter create like_app

Kemudian buka folder like_app tersebut di VSCode. Seperti di tutorial sebelumnya, buka file lib/main.dart lalu hapus isi file main.dart.

Kemudian isi file main.dart dengan kodingan aplikasi dasar Flutter seperti ini:

import 'package:flutter/material.dart';

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

class AplikasiLikeInstagram extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        body: null,
      ),
    );
  }
}

Jika aplikasi di atas dijalankan di emulator dengan menekan Ctrl+F5 di VSCode, maka tampilannya masih berupa halaman kosong warna putih. Nah, sekarang kita perlu merencanakan widget Flutter apa saja yang akan kita gunakan, mulai dari widget terluar sampai widget anak2nya yang paling dalam. Kita cicil dulu, mulai dari widget terluar sampai beberapa lapis berikutnya. Perhatikan gambar berikut ini:

Kerangka widget ada di sebelah kanan. Widget yang terluar, yang paling cocok adalah ListView, yang di gambar di atas bergaris merah. Kenapa ListView? karena aplikasi mirip Instagram ini bisa menampilkan banyak postingan yang isinya bisa melebihi layar hape.

Di dalam ListView, ada widget Column, yang warna biru di gambar di atas. Widget Column ini bisa menumpuk widget di dalamnya secara vertikal. Widget apa yang akan kita tumpuk? Yang paling gampang adalah widget Row. Jadi kita akan membuat 5 widget Row, yang di gambar di atas berwarna hijau.

Untuk menerapkan ke kodingan, kita bisa membuat class baru yang disebut InstagramCards, seperti ini.

class InstagramCards extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Column(
          children: [
            Row( //row #1
              children: [],
            ),
            Row( //row #2
              children: [],
            ),
            Row( //row #3
              children: [],
            ),
            Row( //row #4
              children: [],
            ),
            Row( //row #5
              children: [],
            ),
          ],
        ),
      ],
    );
  }
}

Row #1 isinya adalah foto profil, nama akun Instagram, & ikon menu di sebelah kanan. Kerangkanya seperti ini:

Sebenarnya row #1 hanya berisi 3 widget. Yaitu Widget Image (warna oranye), Widget Text (warna hijau), & widget IconButton (warna hitam). Kalau menurut kerangka di atas, maka kita bisa membuat Row #1 jadi seperti ini:

Row( //row #1
  children: [
	Image.asset(
	  'images/insta_profpic.jpg',
	  width: 30,
	  fit: BoxFit.contain,
	),
	Text(
	  'meidika_wardana',
	  style: TextStyle(
		fontWeight: FontWeight.bold,
	  ),
	),
	IconButton(
	  icon: Icon(Icons.more_vert),
	  onPressed: () {},
	)
  ],
)

Hanya ada beberapa problem di kodingan di atas, yang membuat tampilan aplikasi nantinya tidak sesuai yang kita inginkan. Problem pertama, kita perlu menambahkan jarak di sekeliling widget Image (margin) sebesar 10 poin. Sehingga kita perlu membungkus widget Image dengan widget Container, & menambahkan atribut margin ke widget Container tersebut. Problem kedua, ikon menu tidak mentok ke kanan. Jadi kita perlu membuat supaya widget Text memenuhi Row #1 & mendesak widget IconButton ke paling kanan. Untuk ini, kita perlu membungkus widget Text dengan widget Expanded. Setelah penyesuaian, maka kodingan Row #1 jadi seperti berikut ini.

Row( 
  // row #1
  children: [
	Container(
	  child: Image.asset(
		'images/insta_profpic.jpg',
		width: 30,
		fit: BoxFit.contain,
	  ),
	  margin: EdgeInsets.all(10),
	),
	Expanded(
	  child: Text(
		'meidika_wardana',
		style: TextStyle(
		  fontWeight: FontWeight.bold,
		),
	  ),
	),
	IconButton(
	  icon: Icon(Icons.more_vert),
	  onPressed: () {},
	)
  ],
)

Oh ya. Di kodingan di atas, kita menampilkan gambar dari file images/insta_profpic.jpg. Jadi kita perlu menambahkan folder images di folder project kita,  lalu menaruh file insta_profpic.jpg di dalamnya. Download file insta_profpic.jpg dari sini. Posisi file insta_profpic.jpg akan seperti ini:

Kemudian kita perlu mendaftarkan gambar tersebut ke file pubspec.yaml. Buka file pubspec.yaml (panah biru di gambar di atas), kemudian cari bagian

# assets:

di sekitar baris 42.

Hapus tanda # sebelum tulisan tersebut, lalu dibawahnya copy paste baris

# - images/a_dot_burr.jpeg

, ganti menjadi

# - images/insta_profpic.jpg

, & hapus tanda #. He3.. agak ribet ya? Karena kita harus sangat berhati2 mengubah file pubspec.yaml ini. Jika ada kesalahan penulisan misal kekurangan spasi, maka file gambar akan gagal ditampilkan di aplikasi.

Tekan Ctrl+S untuk menyimpan file pubspec.yaml, lalu kita bisa mencoba menjalankan aplikasi ini. Kita perlu memanggil class InstagramCards ke AplikasiLikeInstagram seperti ini:

class AplikasiLikeInstagram extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        body: InstagramCards(),
      ),
    );
  }
}

Nah, sekarang tekan Shift+F5 untuk stop aplikasi kalau sedang jalan di emulator. Lalu tekan Ctrl+F5 untuk menjalankan lagi app. Tampilannya seharusnya akan jadi seperti ini:

Row #1 Selesai 😀 . Kalau ada problem ketika menjalankan aplikasi, coba cek lagi kodingan Anda. Bisa dibandingkan dengan kodingan s/d Row #1 selesai yang sudah saya buat gist nya di sini. Kalau sudah beres, sekarang kita lanjut ke Row #2.

Row #2 tampilannya seperti ini:

Coba tebak. Widget apa saja yang perlu kita pakai untuk Row #2 ini? … Ya. Kita cuma perlu pakai 1 widget yaitu widget Image. Hanya saja kita perlu membungkus widget Image tersebut di dalam widget Expanded supaya gambar tersebut bisa memenuhi lebar 1 baris di tampilan layar hape. Kodingan Row #2 seperti ini:

Row( //row #2
  children: <Widget>[
	Expanded(
	  child: Image.asset('images/insta_pic.jpg'),
	)
  ],
),

Jangan lupa download file insta_pic.jpg di sini, copy ke folder images, lalu tambahkan images/insta_pic.jpg di pubspec.yaml, seperti gambar di bawah ini.

• 

Jika kita menekan Ctrl+F5 lagi, maka seharusnya tampilan di emulator seperti ini:

Sudah mulai klihatan, hasilnya ya? Selanjutnya, kita bisa isi konten untuk row #3. Dasarnya, di row #3 kita hanya perlu membuat 4 widget, keempat-empatnya adalah widget IconButton. Kita pakai widget IconButton karena nantinya kita perlu supaya widget tersebut bisa ditekan seperti tombol & sekaligus menampilkan gambar ikon. Kerangkanya seperti berikut ini.

4 widget IconButton, di sebelah kanan digambarkan jadi kotak warna hijau. Di IconButton yang paling kanan, ada sedikit perbedaan. Karena kita perlu supaya posisi widget tersebut ada di ujung kanan, maka kita perlu membungkus widget tersebut dengan widget Expanded. Juga kita perlu mengatur supaya posisi widget tersebut rata kanan di dalam widget Expanded. Kodingan row #3 jadinya seperti ini:

Row( 
	//row #3
	children: <Widget>[
	  IconButton(
		icon: Image.asset(
		  'images/ic_love.png',
		  fit: BoxFit.contain,
		),
		onPressed: () {},
	  ),
	  IconButton(
		icon: Image.asset(
		  'images/ic_comment.png',
		  fit: BoxFit.contain,
		),
		onPressed: () {},
	  ),
	  IconButton(
		icon: Image.asset(
		  'images/ic_send.png',
		  fit: BoxFit.contain,
		),
		onPressed: () {},
	  ),
	  Expanded(
		child: IconButton(
		  icon: Image.asset(
			'images/ic_save.png',
			fit: BoxFit.contain,
		  ),
		  onPressed: () {},
		  padding: EdgeInsets.only(right: 10),
		  alignment: Alignment.centerRight,
		),
	  ),
	],
  ),

Kita perlu menambahkan 4 gambar lagi untuk setiap IconButton. Download keempat gambar tersebut di sini, lalu ekstrak ke folder images di project kita. Lalu tambahkan ke-4 gambar tersebut ke pubspec.yaml seperti sebelum2nya. Lebih jelasnya bisa dilihat di gambar berikut ini.

Coba dijalankan lagi ke emulator. Hasilnya seharusnya akan sperti ini:

Kalau Anda mengalami problem sampai disini, Anda bisa mendownload gist yg isinya kodingan s/d row #3 selesai di sini.

Untuk row #4, kita cukup menampilkan 1 widget, yaitu widget Text

Karena posisinya yang agak menjorok ke kanan, kita perlu membungkus widget Text dengan widget Container, lalu memberi padding ke widget Container. Paddingnya cukup 10 poin. Jadi kodingan untuk row #4 sebagai berikut:

Row(
  //row #4
  children: <Widget>[
	Container(
	  child: Text(
		'1 like',
		style: TextStyle(fontWeight: FontWeight.bold),
	  ),
	  padding: EdgeInsets.only(left: 10),
	),
  ],
),

Untuk row #5, kita akan menggunakan widget yang cukup unik yaitu RichText. Kita memerlukan widget RichText karena kita perlu menampilkan tulisan yang bercetak tebal & tulisan yg biasa dalam 1 paragraf teks yang sama. Di dalam widget RichText, kita perlu menampilkan teks pakai widget TextSpan. bukan widget Text. Jadi kita memasang widget RichText, yang didalamnya kita isi dengan widget TextSpan bold & widget TextSpan non-bold / biasa. Kerangkanya seperti ini:

Kotak warna hijau adalah widget RichText. Kotak warna hitam adalah widget TextSpan di dalam widget RichText yg berisi teks bercetak tebal. Sedangkan sisa isi widget RichText adalah TextSpan berisi teks biasa / tidak bercetak tebal. Terakhir, kita perlu membungkus widget RichText dengan widget Container yang berwarna kuning di gambar di atas. widget Container ini bertugas memberi padding di sekitar widget RichText, dan membatasi lebar widget RichText supaya tidak melebihi ukuran layar. Kodingannya seperti ini:

Row(
  //row #5
  children: <Widget>[
	Container(
	  child: RichText(
		text: new TextSpan(
		  style: new TextStyle(
			fontSize: 14.0,
			color: Colors.black,
		  ),
		  children: <TextSpan>[
			TextSpan(
				text: 'meidika_wardana ',
				style: new TextStyle(fontWeight: FontWeight.bold)),
			TextSpan(
				text:
					'Lagi lucu2nya nih ... he3. Semoga jadi anak yang berbakti ke ortu :D'),
		  ],
		),
	  ),
	  padding: EdgeInsets.only(left: 10, top: 5, bottom: 10),
	  width: MediaQuery.of(context).size.width * 0.8,
	)
  ],
),

Setelah row #5 selesai, selesailah aplikasi sederhana kita, yang menampilkan tampilan mirip instagram menggunakan flutter di Visual Studio Code. Kodingan kita sampai dengan sekarang, bisa didownload di https://github.com/meidikawardana/like_app . Aplikasi kita ini akan kita kembangkan sedikit lagi, supaya kita bisa belajar mengenai StatefulWidget. Karena artikel kali ini cukup panjang, jadi kita akan sambung di artikel berikutnya 😀

Sampai di sini artikel mengenai membuat tampilan mirip instagram menggunakan flutter, semoga bermanfaat dan jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ