Thumbnail - Pengalaman Menggunakan Flutter Selama Sebulan

Pengalaman Menggunakan Flutter Selama Sebulan

Kang Admin Avatar

Oleh i kadek adi gunawan

Pada

Kali ini saya akan membagikan pengalaman yang saya dapatkan selama membuat aplikasi android menggunakan flutter selama sebulan ini. Termasuk hal-hal saya temukan dan masalah yang dihadapi ketika menggunakan flutter dan tidak akan membahas cara install dan setupnya karena sudah tersedia di website flutter. Jika kalian ingin bertanya atau memperbaiki tulisan saya ini jika ada yang salah bisa langsung email ke [email protected].

Alasan Memilih Flutter

Flutter memiliki konsep yang sama dengan react native dan nativescript dimana dalam satu sumber kode (single codebase) bisa di gunakan di IOS dan Android, tetapi perbedaan yang mendasar dari yang lainnya flutter adalah tercompile ke native ARM code , dimana lebih cepat ketimbang beriteraksi menggunakan Javascript bridge. Selain hal itu ada beberapa hal lainnya seperti berikut:

  • Cukup dengan flutter, tidak perlu CSS, XML, dll
  • Project dan Struktur Template Simple dan mudah dipahami
  • Bahasa Dart yang friendly, mirip-mirip typescript
  • Bebas memilih arsitecture yang akan digunakan bisa BLoC, MVP, RxVMS, Scoped Model
  • Terhindar dari NullPointException seperti di java menggunakan ?.
  • Prosess Compile dan Run project yang cepat
  • Fitur Hot Reload yang meningkatkan produktivitas

Mengenal Widget

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 kalinnya di buat maka akan menyiampakn 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

Stateless Widget adalah widget yang tidak memiliki state atau tidak bisa mengupdate element / rebuild dirinya sendiri. Contohnya Text, Row, Column, Button, dan lainnya. Kita bisa memanipulasi widget ini dengan meletakannya sebagai komponent di dalam Statefull widget. Kapan kita harus menggunakan atau memakainya, saya rasa widget ini baik digunakan sebagai komponen dari widget lainnya.

import 'package:flutter/material.dart';

class Mading extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Container(
      width: 200.0,
      height: 200.0,
          child: Column(
          childern: <Widget>[
              Image.assets('assets/image',
                  fit: Boxfit.cover)
              Text('judul mading'),
          ]
      )
    );
  }
}

Statefull Widget

Statefull Widget adalah widget yang memiliki state atau bisa mengupadate element / rebuild rebuild dirinya sendiri sesuai dengan perubahan state yang terjadi. Contohnya StreamBuilder, FutureBuilder. Penggunaan statefull biasanya digunakan sebagai parent data.

import 'package:flutter/material.dart';

class ExpandableText extends StatefulWidget {
  final bool expanded;
  final String text;

  const ExpandableText({Key key, this.expanded, this.text}) : super(key: key);
  @override
  _ExpandableTextState createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool _isExpanded;

  @override
    void initState() {
      super.initState();
      _isExpanded = widget.expanded ?? false;
    }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: InkWell(
        highlightColor: Theme.of(context).primaryColor.withAlpha(100),
        onTap: (){
          setState(() {
            _isExpanded = !_isExpanded;
          });
        },
        child: Text(
            widget.text,
            maxLines: !_isExpanded ? 3 : null,
            overflow: TextOverflow.fade,
            style: TextStyle(
              fontSize: 14.0,
              height: 1.50,
            ),
          ),
        ),
    );
  }
}

Jika InkWell di tekan maka widget akan ter rebuild karena state telah berubah akibat fungsi setState dan akan mengupdate element pada widget ExpandableText ini.

Asynchronous Future & Stream

Asynchronous adalah dimana kode kita bisa melanjutkan sebuah blok kode tanpa perlu menuggu kode diatas atau sebelumnya selesai di eksekusi. Pada dart terdapat Class yang digunakan dalam asynchronous ini yaitu Future dan Stream. Perbedaan antara Future dengan Stream adalah Future hanya menghasilkan sebuah value sedankan Stream kita bisa memasukan banyak value untuk diprosess oleh Stream ini. Contoh penggunaan future adalah menampilkan gambar dari internet, membuka dan menulis file, penggunaan sensor, dan lainnya. Sedangkan penggunaan Stream adalah websocket client, menyimpan gambar dari internet ke disk.

Future

Jika kalian bisa menggunakan javascript pasti tidak asing dengan Promise, Future ini mirip dengan Promise di javascript. Jika fungsi di dalam future telah berhasil di prosess akan mentrigger callback yang nanti di masukan ke dalam method then di object Future tadi.

Future.delayed(Duration(minutes: 5), (){
  return "5 menit lagi ah aha";
}).then(print);

Untuk menggunakan future di widget tidak sulit karen framework ini menyediakan FutureBuild yang merupakan StatefullWidget jadi kita tidak perlu susah-susah mengatur state dari futurenya.

  Future displayText = Future.delayed(Duration(minutes: 5), (){
    return "5 menit lagi ah aha";
  });
  FutureBuilder(
    future: displayText,
    builder: (context, snapshot){
      if(snapshot.hasData){
        return Text(snapshot.data);
      }
      return Text('loading...');
    },
  );

Stream

Berbeda dengan Future kita bisa memasukan lebih dari satu value selama stream belum di tutup /close. Stream bisa dicontrol dengan menggunakan StreamController dimana di dalam stream ini kamu bisa menambahkan value menggunakan Sink.add.

StreamController controller = StreamController();
controller.stream.listen((angka){
  print(angka);
});
controller.sink.add(12);
controller.close();

BuildContext Ibaratkan Seperti Peta

Jika kalian perhatikan di setiap fungsi build / pada state terdapat argument context yang merupakan class BuildContext. Dengan object context ini kita bisa menggunakannya nanti untuk membagun widget turunan dan atau lainnya. Misalnya ingin mengetahui ukuran dari layar smartphone bisa menggunakan MediaQuery.of(context).size atau mengakses tema Theme.of(context). Menggunakan context untuk mengambil object agak sedikit triky karena akan mencari Theme terdekat dari widget, misalkan ada tema untuk aplikasi dan tema untuk sebagian page/halaman jika widget berada di bawah treenya page maka Theme.of(context) ini sama dengan theme object di page/halaman. Selain itu kita tidak bisa mengakses context dari widget secara langsung di dalam fungsi build, kita mesti menggunakan Builder untuk mengakses context dari widget;

// SALAH
@override
Widget build(context){
  showDialog(
    context: context,
    builder: (context){
      return Dialog(child: Text('foo'));
    }
  );
  return Scaffold(
    body: Text('bar'),
  );
}
// --------
// BENAR
@override
Widget build(context){
  return
  Scaffold(
    body: Builder(
        builder: (context){
          showDialog(
            context: context,
          builder: (context){
            return Dialog(child: Text('foo'));
          }
          );
          return Text('bar');
        }
      )
  )
}

fungsi build layaknya callback yang akan terpanggil jika widget ini telah tertanam di widget tree / terbuild. dan akan menambahkan text bar.

Kesimpulan

Saya masih menggunakan flutter saat ini dan saya ingin membuat project lainnya, meski flutter belum sepopuler react native. Bagi teman - teman yang memiliki pertanyaan atau menemukan masalah dalam tulisan ini silakan komentar di bagian bawah, atau bisa email saya memlalu email yang telah saya cantumkan di awal paragrap.

Comment:

Belum ada satupun komentar, tulis komentar pertama kamu sekarang