Membuat Tampilan Mirip Instagram Menggunakan Flutter di Visual Studio Code

membuat tampilan mirip instagram menggunakan flutter

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:

gambar 1 - hasil akhir aplikasi tampilan mirip instagram

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:

gambar 2 - widget terluar app flutter.png

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:

gambar 3 - kerangka row #1

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:

gambar 5 - row pertama selesai

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:

gambar 6 - tampilan row kedua

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.

gambar  9 - kerangka row #3

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.

gambar 10 - gambar2 untuk row #3

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:

gambar 13 kerangka row #5

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

Membuat Aplikasi Hello World Menggunakan Flutter di Visual Studio Code

Membuat aplikasi hello world menggunakan flutter

Di artikel kali ini, kita akan menginstall dan menyiapkan Visual Studio Code  (VSCode) untuk koding Flutter, kemudian kita akan membuat aplikasi Hello World menggunakan Flutter. Untuk bisa mengikuti artikel ini, Anda harus menginstall SDK Flutter lebih dulu di laptop. Di artikel2 sebelumnya, saya sudah menulis bagaimana kita bisa menginstall SDK Flutter dengan Android Studio maupun tanpa Android Studio. Oh ya, dalam artikel kali ini kita akan menggunakan OS Windows 10.

Download Visual Studio Code

Baiklah, mari kita mulai. Download VSCode di https://code.visualstudio.com/download . Untuk yang memakai OS (Operating System) Windows, bisa download yang versi Windows. Install seperti Anda menginstall aplikasi2 lain. Tinggal klik Next2 aja 😀

Gambar 1 - Download VSCode sesuai sistem operasi Anda

Install Ekstensi Flutter di Visual Studio Code

Setelah VSCode terinstall, kita perlu menginstall ekstensi Flutter supaya kita bisa koding Flutter di VSCode. Buka VSCode, kemudian klik ikon Extensions di kiri tengah. Lalu ketik: flutter . Lebih jelasnya, lihat gambar berikut ini:

 

Klik di baris Flutter, lalu klik tombol Install warna hijau:

Gambar 3 - klik di baris Flutter, lalu klik Install untuk menginstall Flutter

Membuat Project Flutter

Dengan ekstensi Flutter yang barusan kita install saja, kita sudah bisa koding Flutter di VSCode. Mari kita coba. Buka Terminal di VSCode. Caranya, klik View -> Terminal. Seperti gambar berikut ini.

Gambar 4 - Buka Terminal di Visual Studio Code

Terminal / Command Line akan terbuka. Kemudian ketik beberapa perintah berikut ini:

mkdir C:\flutterApps

Ini untuk membuat folder flutterApps di drive C: . Folder flutterApps akan menjadi folder untuk semua project Flutter kita ke depannya.

cd C:\flutterApps

Perintah ini untuk masuk ke folder flutterApps melalui command line.

flutter create hello_world_project

Nah.. akhirnya dengan perintah ini, kita membuat project Flutter. Nama project contoh ini adalah hello_world_project. Anda bisa menamakannya sesuka Anda, hanya saja ada aturan penamaannya, yaitu harus menggunakan huruf kecil dan garis bawah (underscore) seperti di contoh.

Setelah perintah flutter create, akan ada banyak baris di command line. Kalau project nya sukses dibikin, maka di command line baris2 terakhirnya seperti berikut ini:

Gambar 6 - Project Flutter berhasil dibuat

Kalau ada tulisan “All done!” seperti di panah kuning, maka sudah pasti project berhasil dibikin. Dan seperti dijelaskan di panah merah, kode aplikasi kita ada di dalam folder C:\flutterApps\hello_world_project\lib\main.dart.

Membuat Aplikasi Hello World Menggunakan Flutter

Sekarang kita bisa membuka folder hello_world_project tersebut di VSCode. Klik File -> Open Folder… -> lalu buka folder hello_world_project

Gambar 7 - Buka folder project Flutter yang baru dibuat

Setelah folder project dibuka, klik folder lib lalu klik file main.dart.

Gambar 8 - Buka file main.dart

Kemudian hapus seluruh isi file tersebut, karena kita akan menulis koding dari nol. Supaya kita mengerti bagaimana caranya membuat aplikasi dari nol.

Baris pertama yang kita ketik adalah,

import 'package:flutter/material.dart';

Kemudian kita membuat fungsi utama dart yang menjalankan sebuah aplikasi Flutter. Tambahkan baris berikut ini:

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

AplikasiHelloWorld adalah aplikasi Flutter, yang harus kita buatkan kodingannya. Buat class AplikasiHelloWorld seperti berikut ini:

class AplikasiHelloWorld extends StatelessWidget {
   //isi class
}

Di kodingan diatas, class AplikasiHelloWorld meng-extend StatelessWidget. Artinya, class AplikasiHelloWorld adalah turunan dari class StatelessWidget. Sehingga kita bisa menggunakan semua fitur yang disediakan oleh class StatelessWidget.

Sampai di sini, class AplikasiHelloWorld masih error, yang ditandakan ada garis bawah keriting warna merah seperti gambar berikut ini.

Gambar 9 - Koding aplikasi Flutter dari 0

Kita bisa mendapatkan penjelasan kenapa error, dengan mengarahkan kursor mouse ke bagian yang berwarna merah tersebut.

Gambar 10 - Penjelasan error Flutter

Secara sederhana, artinya kita perlu membuat fungsi di dalam class AplikasiHelloWorld yang diperlukan supaya kodingan tersebut bisa jalan.

Di kodingan, ganti //isi class dengan kodingan sebagai berikut:

@override
Widget build(BuildContext context) {
   // TODO: implement build
   return null;
}

Ini artinya kita membuat fungsi build untuk membangun aplikasi kita menggunakan Flutter.

Selanjutnya kita akan menampilkan teks bertuliskan Hello World! di aplikasi kita. caranya, ganti // TODO: implement build return null; dengan kodingan berikut ini.

return MaterialApp(
   title: 'Aplikasi Hello World',
   theme: ThemeData(
      primarySwatch: Colors.green,
   ),
   home: Text('Hello World!'),
);

Ini artinya, aplikasi kita menampilkan sebuah Widget MaterialApp dengan parameter title (judul) ‘Aplikasi Hello World’, theme (tema) warna green (hijau), dan home (layar) dengan Widget Text bertuliskan ‘Hello World!’.

Menjalankan Aplikasi Flutter Di Emulator

Kita bisa mencoba menjalankan aplikasi kita. Simpan file main.dart dengan menekan tombol Ctrl+S di VSCode, lalu nyalakan emulator Genymotion atau Emulator bawaan Android Studio (Emulator AVD). Kemudian kembali ke VSCode, lalu tekan tombol Ctrl+F5. Setelah menunggu beberapa saat, maka emulator akan menampilkan aplikasi kita seperti ini:

Gambar 11 - Tampilan aplikasi Hello World Flutter

Membuat Tampilan Menjadi Lebih Baik Dengan Widget Scaffold

Kalau kita perhatikan, maka dari beberapa parameter tadi yang kelihatan di emulator hanyalah teks Hello World! saja. Parameter lainnya seperti theme & title tidak berpengaruh. Supaya parameter theme bisa berpengaruh, kita perlu mengisi parameter home dengan Widget Scaffold. Jadi kita perlu mengganti

home: Text('Hello World!'),

dengan kodingan berikut ini:

      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),

Ini artinya, kita mengisi parameter home (layar) dengan Widget Scaffold, yang mempunyai appBar (bar aplikasi) yang bertuliskan ‘Hello World App’. Widget Scaffold juga mempunyai body (konten) yang di contoh ini kita isi dengan Widget Text bertuliskan ‘Hello World!’.

Kalau tadi Anda belum keluar dari aplikasi di emulator & belum menekan Ctrl+S, kita bisa memanfaatkan fitur hot reload supaya apa yang kita tulis barusan dapat langsung tampil di emulator, cukup dengan menekan Ctrl+S lagi. Hasilnya akan seperti ini:

Gambar 12 - Tampilan aplikasi Hello World Flutter dengan Widget Scaffold

Masih ingat dengan theme green (hijau) yang kita set di MaterialApp tadi? Theme tersebut membuat tulisan Hello World App yang di bagian atas menjadi berlatar belakang hijau seperti di gambar barusan.

Kodingan Lengkap Aplikasi Hello World Flutter

Berikut ini kodingan lengkap aplikasi Hello World Flutter yang sudah kita buat:

import 'package:flutter/material.dart';

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

class AplikasiHelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Hello World',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Menginstall Ekstensi Prettier

Sampai di sini, kodingan kita sudah ada lebih dari 20 baris. Pastinya Anda sudah merasa cukup kesulitan mengatur indentasi, kurung buka kurung tutup dan format lainnya di kodingan, kan?

Nah, supaya kita lebih mudah memformat kodingan, kita perlu menginstall ekstensi Prettier di VSCode. Caranya, klik ikon Extensions di kiri tengah, lalu ketik: prettier . Klik “Prettier – Code Formatter”, lalu klik Install untuk menginstall ekstensi tersebut ke VSCode.

Gambar 13 - Install Prettier Code Formatter Di Visual Studio Code

Mengaktifkan formatOnSave

Setelah kita install ekstensi tersebut, belum ada pengaruh apa2 yang terlihat di kodingan kita. Supaya terasa pengaruhnya, kita perlu mengaktifkan settingan formatOnSave di VSCode supaya kodingan kita otomatis diformat ketika kita menyimpan file di VSCode. Ya, ketika kita menekan Ctrl+S.

Untuk mengaktifkan formatOnSave, Klik File -> Preferences -> Settings -> ketik: formatOnsave -> lalu centang seperti pada gambar berikut.

Gambar 14 - Mengaktifkan formatOnSave di Visual Studio Code

Kita bisa mencoba membuat kodingan kita menjadi berantakan, contohnya seperti di gambar berikut ini:

Gambar 15 - Membuat kodingan Flutter jadi berantakan

Berantakan sekali.. saya sendiri bisa stress kalau harus memformat kodingan di atas, apalagi kalau sedang dikejar deadline he3.. . Tapi dengan ekstensi Prettier & settingan formatOnSave, maka kita cukup menekan Ctrl+S, maka kita menyimpan sekaligus memformat file tersebut. Bisa dicoba, jika sekarang kita menekan Ctrl+S, format kodingan kita akan menjadi bagus:

Gambar 16 - Format kodingan setelah menekan Ctrl dan S

Terakhir, kita bisa menyimpulkan bagaimana kodingan kita ditampilkan di emulator seperti ini:

Gambar 17 - Perbandingan kodingan dengan tampilan aplikasi Flutter

Panah merah: tampilan warna hijau dari theme yang kita set dengan green

Panah kuning: tampilan appBar, dengan teks sesuai yang kita koding di aplikasi

Panah biru: layar utama aplikasi, yaitu body Widget Scaffold, adalah teks dengan tulisan Hello World! .

Sampai di sini artikel kita kali ini, 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

Menginstall Flutter Tanpa Android Studio Di Windows

Menginstall Flutter Tanpa Android Studio

Kali ini, pintar-android.com akan membahas bagaimana caranya menginstall flutter tanpa Android Studio di Windows 10. Kita tidak akan menginstall Android Studio sama sekali, supaya teman2 yang memakai laptop kentang / ber-spek (maaf) rendah bisa mencoba koding menggunakan Flutter. Untuk yang ingin mencoba menginstall Flutter menggunakan Android Studio, bisa cek lagi artikel pintar-android.com sebelumnya di link https://pintar-android.com/wordpress/2019/08/cara-menginstall-flutter-di-windows-menggunakan-android-studio/ .

Mari kita mulai! Di Windows 10, buka drive C: di Windows Explorer, lalu buat folder dengan nama “Android” di drive C: tersebut sehingga alamat foldernya menjadi C:\Android . Folder ini akan kita pakai sebagai folder utama kita sepanjang artikel ini.

Menginstall OpenJDK8

Selanjutnya download OpenJDK dari link https://github.com/AdoptOpenJDK/openjdk8-binaries/releases/download/jdk8u222-b10/OpenJDK8U-jdk_x64_windows_hotspot_8u222b10.zip . Ukuran file-nya sekitar 99MB. File ini adalah yang terbaru ketika artikel ini ditulis. Untuk file yang lebih baru, bisa dicek di https://github.com/AdoptOpenJDK/openjdk8-binaries/releases . Jangan lupa, nama file-nya selalu diawali dengan “OpenJDK8U-jdk_x64_windows_hotspot” lalu bertipe file .zip.

Kalau sudah selesai didownload, ekstrak file tersebut lalu buka folder hasil ekstrakannya. di dalamnya ada folder dengan nama semacam “jdk8u222-b10”. Ubah nama folder tersebut menjadi “openjdk” lalu pindahkan folder tersebut ke dalam folder C:\Android yang sudah kita buat sebelumnya sehingga alamatnya menjadi C:\Android\openjdk .

Menginstall Flutter SDK

Download Flutter SDK terbaru di https://flutter.dev/docs/development/tools/sdk/releases . ketika artikel ini ditulis, file SDK terbaru adalah https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.7.8+hotfix.4-stable.zip . kalau sudah selesai didownload, ekstrak file tersebut lalu pindahkan folder hasil ekstrakan ke dalam folder Android sehingga alamatnya menjadi C:\Android\flutter .

Menginstall Command Tools untuk Android

Download Command Tools Android di https://developer.android.com/studio/#command-tools . Pilih yang untuk Windows. Saat artikel ini ditulis, filenya adalah https://dl.google.com/android/repository/sdk-tools-windows-4333796.zip . Setelah selesai didownload, ekstrak lalu pindahkan folder “tools” hasil ekstrakan ke dalam folder Android. Kemudian ubah nama folder “tools” menjadi “sdk” sehingga alamatnya menjadi C:\Android\sdk .

Menyetting beberapa Environment Variables

Kita perlu menyetting beberapa Environment Variables di Windows supaya tools-tools yang sudah kita download bisa kita panggil darimanapun kita mau melalui Command Prompt. Buka Command Prompt, lalu copy-paste:

setx JAVA_HOME "C:\Android\openjdk"

Kemudian tekan Enter di keyboard untuk menjalankan perintah tersebut. Hasilnya seperti ini:Gambar 1 - set environment variables di Windows untuk flutter

Berikutnya jalankan perintah ini satu per satu di Command Prompt:

setx ANDROID_HOME "C:\Android"
setx ANDROID_SDK_ROOT "C:\Android\sdk"
setx path "%path%;"C:\Android\sdk;C:\Android\sdk\bin;C:\Android\flutter\bin"

Setelah itu, tutup command prompt lalu buka lagi supaya settingan2 tersebut tersimpan dan bisa dijalankan di Windows.

Karena Flutter memerlukan SDK Android supaya bisa jalan, kita perlu mendownload SDK Android dengan menjalankan beberapa perintah berikut ini di command prompt, satu per satu:

sdkmanager "platform-tools"
sdkmanager "build-tools;28.0.3"
sdkmanager "platforms;android-28"

Jika muncul pertanyaan “Accept? y/N” di Command Prompt, ketik: y lalu Enter di keyboard supaya Android SDK bisa diinstall sampai selesai. Berikut ini contoh ketika mendownload platform-tools.

mendownload platform-tools android

Mengkonfigurasi Flutter

Ketikkan perintah berikut ini di command prompt, supaya flutter mengenali SDK Android yang sudah kita download tadi.

flutter config --android-sdk C:\Android\

Menginstall Emulator

Untuk menjalankan aplikasi flutter, kita perlu menginstall emulator. untuk mendownload image emulator, jalankan perintah berikut ini di Command Prompt:

sdkmanager "system-images;android-28;default;x86_64"

jika ditanya license Accept y/N, maka ketik: y .

Jalankan 1 perintah lagi untuk mendownload tools emulator android:

sdkmanager emulator

Membuat 1 emulator baru

Buat emulator dengan nama “google_pixel” dengan menjalankan perintah ini di Command Prompt:

avdmanager -s create avd -n google_pixel -k "system-images;android-28;default;x86_64"

Jika ada pertanyaan, ketik: no . Ini Penting, karena sebelum2nya kita selalu menjawab: y (Yes).

Menjalankan emulator

Untuk menjalankan emulator, jalankan perintah:

flutter emulators –launch google_pixel

Seperti ini lah penampakannya jika berhasil menjalankan emulator avd dengan perintah barusan:

menjalankan emulator avd

Mengecek apakah Flutter terinstall dengan baik

Kita bisa mengecek apakah Flutter terinstall dengan baik, dengan menjalankan perintah sbb:

flutter doctor -v

Seharusnya akan muncul tampilan mirip seperti ini:

menjalankan flutter doctorJika ada centangan yang berwarna merah, berarti ada error. Dan harus dibetulkan sampai semua centangan untuk Flutter, Android toolchain, & Connected Device berwarna hijau. Jika ketiga tools tersebut berwarna hijau, artinya instalasi Flutter berhasil dan Flutter siap digunakan di Windows 10.

Demikian artikel pintar-android.com kali ini tentang flutter. Semoga membantu teman2 yang tidak bisa menggunakan Android Studio karena spek komputer yang tidak memungkinkan. Artikel ini sebagian besar terinspirasi dari https://medium.com/@quicky316/install-flutter-sdk-on-windows-without-android-studio-102fdf567ce4 , dengan modifikasi dan penyederhanaan sehingga lebih mudah dimengerti.

Di artikel2 selanjutnya akan kita bahas bagaimana mulai koding flutter di Visual Studio Code tanpa Android Studio. 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 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

Cara Memilih Library / Pustaka Android Untuk Aplikasi Kita

Berikut ini adalah hal-hal yang bisa dipertimbangkan untuk memilih library  (pustaka) untuk aplikasi android yang kita buat.

  1. Siapa yg bikin? lebih baik kalau komunitas yang bikin, daripada hanya 1 orang yg bikin library tersebut. Karena maintenance nya biasanya lebih bagus kalau komunitas yang bikin.
  2. Jumlah issue (problem). Yang mana yg lebih stabil / paling sedikit issue nya? Bisa dilihat di reponya (biasanya github)
  3. Fitur. Library yang mana yang paling cocok fiturnya dengan aplikasi yang kita bikin?
  4. Lisensi mana yang paling oke buat aplikasi kita?
  5. Googling: [nama library][spasi]versus. Buat nyari library2 yg mirip. Siapa tau ada yg mirip & lebih baik.
  6. Dokumentasi. pilih library yang dokumentasinya lebih lengkap supaya lebih mudah dipakai.



Sumber: Udacity – Advanced Android, Library: Choose a Library (untuk poin 1 s/d 5)

 

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

kalau sudah beli, bisa dilihat di hape pake app google books, bisa dilihat di browser (misal chrome) di books.google.com -> My Library .

bayarnya bs pake pulsa