Flutter Bloc

Bloc(Business Logic Components) merupakan sebuah Design Pattern yang diperkenalkan oleh Paolo Soares dan Cong hui(Google) di DartConf 2018.

Awalnya, pola BLoC disusun untuk memungkinkan penggunaan kembali kode yang sama secara independen dari platform: aplikasi web, aplikasi mobile, back-end. Jadi ya, pola ini dikembangkan dengan tujuan untuk meringankan beban kerja pada pengembang saat mengembangkan aplikasi untuk platform yang berbeda dengan gagasan penggunaan kembali kode.

Untuk mengetahui BLoC secara mendetail, pertama mari kita ketahui tentang Streaming.

Streams

Secara umum, Stream adalah aliran atau suksesi apa pun secara terus-menerus. Namun secara teknis, Stream tidak lain adalah aliran data yang berkelanjutan.

Key terms:

  • Stream, the conveyor belt is called as a stream
  • StreamController, this is what controls the stream
  • StreamTransformer, this is what processes the input data
  • StreamBuilder, it’s a method that takes stream as an input and provides us with a builder which rebuilds every time there is a new value of a stream
  • sink, the property which takes an input
  • stream, the property which gives the output out of the Stream

Jadi sekarang kita punya sedikit gambaran tentang Streams. Kembali ke Flutter, salah satu kendala utama yang ditemui saat pengkodean di Flutter adalah saat berurusan dengan UI, misal Fluttertidak memiliki bahasa perancang perantara untuk UI seperti di Android yang memiliki XML, Di Flutter kita menulis semua kode di satu tempat (secara tradisional). Di situlah BLoC berperan dan membantu menghilangkan masalah ini dengan cara yang efisien.

  • BLoC tidak hanya memecahkan masalah berbagi kode tetapi juga memanfaatkan fungsionalitas Streams untuk mengelola dan menyebarkan perubahan status dalam Flutter.
  • BLoC membantu kita untuk memisahkan Business Logic dari UI. Dalam kata lain, UI components hanya merupakan UI dan bukan merupakan Logic.
  • Jadi, meskipun Flutter tidak memiliki bahasa perantara untuk UI dengan menggunakan BLoC dapat memisahkan kedua hal yang membuat independen satu sama lain.
  • Jika Anda seorang pengembang Android, pikirkan objek BLoC sebagai ViewModel dan StreamController sebagai LiveData.

Gambarannya seperti ini:

  • Input diambil menggunakan properti shink
  • Output disediakan menggunakan properti stream
  • Widget mengirim event ke BLoC melalui shinks
  • BLoC memberi tahu widget melalui streams
  • Sekarang setelah Bussiness Logic dan UI Component dipisahkan, kita dapat mengubah Bussiness Logic aplikasi kapan saja tanpa dampak apa pun pada UI
  • Sebaliknya, kita dapat mengubah UI tanpa berdampak pada Bussines Logic

Why use BLoC?

Sekarang setelah memiliki gambaran tentang Bloc, mungkin ada pertanyaan mengapa kita perlu menggunakannya untuk mengelola state, dimana sudah ada beberapa cara untuk menanganinya, saya akan menjelaskan mengapa BloC lebih efisien.

setState()

Metode setState () memberi tahu framework  bahwa sebuah objek telah berubah.

setState(() 
 { 
   _myState = newValue 
 }
);

berdampak pada UI pengguna di subtree ini, yang menyebabkan kerangka kerja menjadwalkan membangun untuk objek state ini.

Permasalahannya adalah:
– Keseluruhan widget melakukan rebuilt setiap state dirubah.
– Hal ini tidak membantu untuk memisahkan antara UI dan Bussiness Logic.

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