Flutter-#6 Firebase

Persiapan

  1. Buat Firebase Project pada Firebase Console

Konfigurasi IOS

  1. Masuk ke Firebase Console
  2. Tambahkan Firebase ke aplikasi iOS
  3. Download lalu Buka XCode kembali, copy file GoogleService-Info.plist yang baru didownload ke folder Runner/Runner
  4. Buka XCode Klik Project pilih Tab SignIn & Capabilities=>All, sesuaikan Bundle Identifier(com.yourcompany.yourproject) & Team(Id Apple Developer anda)
  5. Tambahkan URL scheme untuk reversed client ID, buka file GoogleService-Info.plist cari key REVERSED_CLIENT_ID, copy lalu tambahkan ke Tab Info URL Schemes
  6. Dari Direktori Project Flutter anda, buka file pubspec.yaml, tambahkan baris berikut :
  7. Untuk menambahkan plugins yang ingin digunakan, disini saya akan menggunakan layanan auth dan firestore

Konfigurasi Android

  1. Masuk ke Firebase Console
  2. Tambahkan Firebase ke aplikasi Android, disini anda harus mengisi sertifikat penandatanganan debug SHA-1
  3. Untuk mendapatkan sertifikat SHA-1 Buka Android Studio, Open Project MyFlutter/android, biarkan Android Studio membuild Project anda
  4. Download google-services.json lalu copy ke MyFlutter/android/app
  5. Untuk mengenable Firebase service tambahkan kode berikut pada file MyFlutter/android/build.gradle
  6. In your module (app-level) Gradle file (usually android/app/build.gradle), add the following line to the bottom of the file.
  7. Tambahkan Id Aplikasi pada field Android package name, buka file MyFlutter/android/app/build.gradle (com.yourcompany.yourproject) sesuaikan dengan aplikasi anda.
  8. Ubah nama package pada semua AndroidManifest.xml di folder android sesuaikan dengan nama project anda (com.yourcompany.yourproject)
  9. Pastikan tidak ada device/emulator yg sedang berjalan
  10. Pada direktori utama project flutter, tambahkan baris berikut pada pubspec.yaml (sesuaikan dengan penggunaan anda)
  11. Jalankan perintah flutter packages get melalui console.
  12. AndroidX Migration
  13. Enable multidex https://developer.android.com/studio/build/multidex

Flutter Workarounds Common Issue https://github.com/flutter/flutter/wiki/Workarounds-for-common-issues#generated-project-files-outdated

Firestore Issue
https://github.com/flutter/flutter/issues/20486

Flutter-#4 Custom Icon

Penjelasan

Custom Icon akan diconvert menjadi ttf font file, yang nantinya akan diupload ke dalam project. File .dart yang di generate akan membuat kita dapat menggunakan Icon(CustomIcons.idr) misalnya.

Persiapan

  1. Persiapkan file svg yang akan di generate
  2. Buka browser lalu masuk ke alamat FlutterIcon.com
  3. Upload file SVG
  4. Klik pada icons yang telah diupload,
  5. Ubah nama class misal saya menggunakan nama CustomIcons.
  6. Klik Download lalu extract files
  7. config.json akan menyimpan settingan kita, jadi saat anda mengunjungi website kembali, drag and drop file config.json ke website maka settingan anda akan kembali seperti sebelumnya.
  8. Copy file CustomIcons.ttf ke dalam project anda
  9. Copy file custom_icons_icons.dart ke dalam project anda (presentation/custom_icons_icons.dart)
  10. Buka file custom_icons_icons.dart. Ikuti instruksi yang nantinya akan ditambahkan ke pubspec.yml letakan dibawah baris flutter: uses-material-design
  11. Jalankan perintah flutter run untuk memastikan project sudah terinisialisasi dengan baik
  12. Gunakan Icon anda

sumber :

Flutter-#3 Widget

Penjelasan

Widget merupakan Tempat meletakan informasi atau sebuah variable yang nantinya akan digunakan oleh Element Atau bisa diibaratkan seperti HTML Tag dan DOM. Ketika sebuah widget pertama kalinya di buat maka akan menyiapakan sebuah element. Element ini yang nantinya yang akan di tambahkan ke widget tree. Ketika sebuah widget di build ulang, dan jika ada perbedaan key dan runtimeType dengan widget pada build sebelumnya, maka element akan menyesuaikan dan akan melakukan update di widget tree. Yang paling penting adalah element tidak bisa di rebuild, dan hanya bisa di update saja.

Stateless Widget

Merupakan widget yang di-build hanya dengan konfigurasi yang telah diinisiasi sejak awal dan tidak memiliki state. Jadi Stateless Widget adalah Widget yang tidak memerlukan perubahan secara realtime.

Stateful Widget

Statefull Widget adalah widget yang memiliki state atau bisa mengupdate element / rebuild rebuild dirinya sendiri sesuai dengan perubahan state yang terjadi secara realtime.

Flutter-#2 Membuat Splashscreen

Persiapan

  1. Buat Project Flutter
  2. Download logo Flutter yang nantinya digunakan untuk splashscreen

Struktur Direktori

Menambahkan Depedensi

Tambahkan baris berikut pada file pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  splashscreen:

flutter:
  uses-material-design: true
  assets:
    - images/flutterwithlogo.png

Edit file main.dart

import 'package:flutter/material.dart';
import 'package:hello_world/homePage.dart';
import 'package:splashscreen/splashscreen.dart';
void main(){
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 14,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome In SplashScreen',
      style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 20.0,
          color: Colors.white
        )
      ),
      image: new Image.asset('images/splash_logo.png'),
      backgroundColor: Colors.blueAccent,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 100.0,
      onClick: ()=>print("Flutter Egypt"),
      loaderColor: Colors.red
    );
  }
}

Buat file homePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
      title: new Text("Home"),
      automaticallyImplyLeading: false
      ),
      body: new Center(
        child: new Text("Welcome",
          style: new TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 30.0
          ),
        ),
      ),
    );
  }
}

Jalankan Aplikasi

Splashscreen
Home

Flutter-#1 Perkenalan, Installasi & Membuat Aplikasi Hello World

Apa itu Flutter?

Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS.

Sama seperti react nativeframework ini dapat digunakan untuk membuat atau mengembangkan aplikasi mobile yang dapat berjalan pada device iOS dan Android. Flutter merupakan penantang baru bagi React Native(Facebook) dan Xamarin(Microsoft) walaupun React masih menduduki peringkat pertama di segment ini.

Ketiga platform tersebut bisa dilihat kepopuleran dan trendnya di google trend. Mari coba cek selama setahun terakhir, seperti apakah gerangan?

Installasi

Untuk installasi silakan ke page resmi flutter

Editor

Flutter menyediakan dua pilihan :

  1. Android Studio
  2. Visual Code

Membuat proyek hello_world

Disini saya akan menggunakan Visual Code karena lebih ringan. Panduannya ada di page resmi flutter

Setelah menjalankan Flutter New Project, tunggu sampai proses selesai.

Lihat status bar VS Code (di bawah aplikasi). Karena saya menggunakan MacOS yang sudah terinstall XCode & Android Studio sebelumnya, maka VS Code mendeteksi simulator yang sudah ada pada kedua program tersebut.

klik status bar

Klik iPhone X(ios Emulator) maka simulator tersebut akan terbuka.

ios emulator

Jalankan Proyek Aplikasi, masuk ke menu Debug=>Start Debugging. Tunggu sampai proses selesai.

Aplikasi berjalan di emulator