Belajar Pengenalan Widget di Flutter

Pengenalan Widget

Kita telah berkenalan, menginstal, dan belajar fundamental Flutter. Itu entrée alias hidangan pembukanya. 

Nah, sekarang kita akan menyibak ke plat du jour alias menu utamanya. Apa inti dari Flutter? Yap, widget jawabnya! Sebagian besar yang ada pada Flutter adalah widget. 

Jadi, relevan jika kita bilang bahwa “Flutter is all about widget.” Text sendiri adalah widget, Button juga widget. Selain itu widget juga dapat dibangun dari kumpulan beberapa widget. Lantas mengapa widget begitu penting dalam flutter? Penasaran? Mari kita bahas!

World of components

Perlu kita ketahui bahwa konsep Widget pada Flutter itu terinspirasi oleh salah framework JavaScript yang digunakan untuk membangun sebuah website yaitu ReactJS. ReactJS memiliki konsep Component. 

Mari kita analogikan dengan mainan lego! Di lego terdapat block-block kecil yang nantinya kita susun untuk membangun sebuah istana lego. 

Berarti component dalam programming adalah sekumpulan block-block code yang digunakan untuk membangun sebuah aplikasi.

Widget sama halnya dengan component yang merupakan kumpulan block code untuk membangun aplikasi Flutter. Ketika membangun aplikasi Flutter kita harus berpikir layaknya bermain lego. Kita harus bisa membuat dan menyusun widget-widget dengan tepat. Tujuannya, agar aplikasi yang kita buat lebih mudah untuk dikembangkan.

Bagaimana cara menulis widget

Sebetulnya pada pembahasan sebelumnya secara tidak sadar kita telah membuat sebuah widget dan menggunakan widget yang telah disediakan.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Text('Hello world!'),
        ),
      ),
    );
  }
}

Pada kode di atas kita telah membuat sebuah Widget MyApp dan telah menggunakan widget-widget bawaan Flutter di antaranya MaterialApp, Scaffold, Center, dan Text. 

Ketika menggunakan widget, kita tinggal panggil nama widget dan bila ada properti atau parameter pada widget tersebut tinggal kita isikan properti atau parameternya.

Center(
  child: Text('Hello world!'),
)

Kode di atas merupakan contoh pemanggilan widget Center. Widget Center ini digunakan untuk membuat widget yang ada di dalamnya berada di posisi tengah (mirip seperti alignment center). Tinggal ketikkan Center lalu tambahkan properti child di dalamnya.

Perlu diketahui bahwa sebagian besar widget bawaan memiliki pola parent-child, seperti halnya Center yang memiliki child yang artinya di dalam child bisa terdapat widget lagi. Maka penulisan parent child akan seperti di bawah ini.

Center( // parent dari Button
  child: Button( // child dari Center dan parent dari Text
    child: Text(), // child dari Button
  ),
)

Pada contoh di atas widget Center dan Button hanya dapat memiliki satu anak atau bisa disebut child. Ada pula widget yang dapat memiliki banyak anak atau bisa disebut children, seperti Row, Column, ListView, GridView, dan semacamnya.

Row(
  children: <Widget>[
    //di dalam children akan berisi banyak widget
  ]
)

Contoh di atas adalah widget Row yang memiliki children. Di dalam children nantinya kita bisa menambahkan banyak widget. Berbeda dengan child yang diisi langsung dengan sebuah Widget, children akan berisi sebuah list yang di dalamnya diisi dengan banyak widget

Cara Menggunakan Package Dependencies di Flutter

Package Dependencies

Dalam pengembangan suatu aplikasi, kita tidak akan lepas dari package/library (selanjutnya akan disebut package). Package di sini merupakan sebuah kode yang dibuat untuk menyelesaikan suatu masalah. 

Contohnya ketika aplikasi yang kita buat membutuhkan fitur kalender sementara fitur tersebut tidak di-support oleh Flutter. 

Alih-alih membuat fitur kalender dari nol, kita dapat menggunakan package yang telah dibuat oleh developer lain. Waktu pembuatan fitur menjadi lebih singkat! 

Package dependencies merupakan sekumpulan package yang dibutuhkan dalam pengembangan aplikasi. Lalu package-package tersebut akan diatur oleh package manager. 

Setiap bahasa pemrograman memiliki package manager-nya masing-masing, contohnya NodeJS memiliki npm atau yarn, Java dengan maven atau gradle, PHP dengan composer. Begitu pula dengan Flutter yang ditulis dengan bahasa dart memiliki package manager bernama pub.

Kali ini kita akan membahas mengenai package manager pub, bagaimana menggunakan pub, dan di mana mencari package yang dapat digunakan untuk aplikasi kita.

Dart Pub

Seperti yang telah kita singgung sebelumnya Pub merupakan sebuah package manager. Pub memiliki tugas untuk mengatur package apa saja yang dibutuhkan dalam pengembangan aplikasi. 

Pada package manager kita dapat mengatur versi package yang ingin kita gunakan. Pengaturan versi sangat penting karena ketika versi flutter/dart yang digunakan tidak cocok dengan package yang kita butuhkan akan berpengaruh pada jalannya aplikasi yang kita buat. 

Oleh karena itu, kita harus memastikan versi yang kompatibel dengan versi Flutter yang terinstal.

Lalu bagaimana kita menggunakan pub pada project Flutter kita? Untuk mengatur package-package yang akan kita gunakan, cukup buka berkas pubspec.yaml yang ada pada folder project.

Ketika membuka berkas pubspec.yaml kita akan melihat begitu banyak pengaturan tapi tidak perlu khawatir karena yang kita bahas hanya mengenai package dependencies-nya saja.

Coba kita fokus pada kode yang ada pada pubspec.yaml berikut:

dependencies:
  flutter:
    sdk: flutter
 
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
 
dev_dependencies:
  flutter_test:
    sdk: flutter

Kode di atas merupakan package-package yang digunakan pada project Flutter kita. Jika kita perhatikan, terdapat 2 jenis dependency yaitu dependencies dan dev_dependencies. Fungsi dev_dependencies digunakan untuk package-package yang berkaitan ketika proses pengembangan aplikasi Flutter, contohnya seperti flutter_test yang digunakan untuk testing, ada pula untuk class generator. 

Fungsi dependencies digunakan untuk package-package yang langsung berkaitan dengan fitur aplikasi Flutter, contohnya seperti cupertino_icons yang digunakan untuk mendapatkan ikon-ikon cupertino (icon untuk iOS) dan contoh lainnya seperti cloud_firestore yang merupakan package untuk firebase firestore.

Sekarang kita akan fokus pada dependencies. Untuk mendaftarkan package yang dibutuhkan kita cukup menulis seperti di bawah ini pada bagian dependencies:

nama_package: versi

nama_package merupakan nama package yang kita butuhkan, lalu disambung dengan versinya. Penulisan versi bisa langsung seperti contoh 0.1.2, atau kita menambahkan simbol caret (^) seperti ^0.1.2 . Simbol caret (^) artinya: gunakan versi patch terbaru dari versi yang telah ditentukan. 

Jika versi nya ^0.1.2 artinya kita akan gunakan versi minimal 0.1.2 dan maksimal versi terbaru. Karena itu, jika versi package tersebut sekarang sudah update, maka package yang digunakan merupakan versi terbaru.

Catatan: Hanya pada versi patch atau pada angka terakhir yaitu angka 2 jika pada contoh cupertino_icons: ^0.1.2. Atau kita juga bisa gunakan versi minimal dan maksimal seperti contoh ‘>=0.1.2 <2.0.0’ yang artinya kita akan menggunakan versi terbaru yang ada pada saat ini yang masih berada di dalam range tersebut yaitu lebih besar sama dengan 0.1.2 dan lebih kecil dari 2.0.0.

Okay sebagai contoh kita akan menambahkan sebuah package provider yang nantinya akan kita gunakan.

dependencies:
  flutter:
    sdk: flutter
 
  cupertino_icons: ^0.1.2
  provider: ^4.0.1

Yang perlu diperhatikan dalam menulis berkas .yaml adalah pada indentasinya. Indentasi atau penggunaan spasi ini sangat penting karena menunjukkan urutan dan blok kode yaml yang dibaca oleh komputer. 

Sebagai contoh, ketika kita menambahkan package provider, maka kita harus menuliskannya sejajar dengan package lainnya dan juga lebih menjorok ke dalam jika dibandingkan dengan dependencies. 

Ini menunjukkan bahwa package seperti cupertino_icons dan provider merupakan bagian dari dependencies yang akan ditambahkan. 

Dan tiap jaraknya adalah 2 spasi, jika dependencies menempel pada ujung kiri, maka cupertino_icons dan provider berjarak 2 spasi dari ujung kiri.

Setelah menambahkan package yang dibutuhkan, kita dapat melakukan get package tersebut. 

Jika Anda menggunakan visual studio code cukup simpan berkas pubspec.yaml, maka nanti akan secara otomatis mensinkronisasi pubspec tersebut. Atau bisa dengan menekan tombol seperti gambar unduh pada pojok kanan atas paling kiri.

Bila menggunakan Android Studio Anda cukup menekan tombol "Pub get" pada Android Studio seperti berikut:

Atau bisa secara manual menggunakan terminal dengan menjalankan perintah Flutter pub get di dalam project tersebut. Setelah melakukan pub get, maka package tersebut sudah dapat digunakan.

Tempat-tempat mencari package flutter

Flutter memiliki segudang package yang telah dibuat oleh komunitas, lantas di mana kita dapat mencari package-package untuk kita gunakan? Berikut website-website yang dapat Anda gunakan untuk mencari package.

• https://pub.dev
  Website ini merupakan web official untuk Anda mencari package.
• https://flutterawesome.com
  Berisi package-package yang dibuat oleh komunitas, di sini banyak sekali package UI keren yang dapat Anda coba.

Private Packages

Selain menggunakan package yang ada pada pub.dev Anda juga bisa menggunakan package yang tidak dipublikasikan pada pub.dev tersebut dengan cara menggunakan url git package tersebut:

dependencies:
  plugin1:
    git:
      url: git://github.com/flutter/plugin1.git

Atau path direktori package tersebut yang tersimpan secara offline di komputer Anda.

dependencies:
  plugin1:
    path: ../plugin1/

Cara Membuat Hello World App dengan Flutter

Hello World App

Ketika pertama kali membuat project Flutter, kita akan diberikan aplikasi contoh yaitu aplikasi counter. Source code utama Flutter kita ada pada berkas lib/main.dart dan kodenya kurang lebih seperti berikut:

1. import 'package:flutter/material.dart';
2.  
3. void main() {
4.   runApp(MyApp());
5. }
6.  
7. class MyApp extends StatelessWidget {
8.   @override
9.   Widget build(BuildContext context) {
10.     return MaterialApp(
11.       title: 'Flutter Demo',
12.       theme: ThemeData(
13.         primarySwatch: Colors.blue,
14.         visualDensity: VisualDensity.adaptivePlatformDensity,
15.       ),
16.       home: MyHomePage(title: 'Flutter Demo Home Page'),
17.     );
18.   }
19. }
20.  
21. class MyHomePage extends StatefulWidget {
22.   MyHomePage({Key key, this.title}) : super(key: key);
23.  
24.   final String title;
25.  
26.   @override
27.   _MyHomePageState createState() => _MyHomePageState();
28. }
29.  
30. class _MyHomePageState extends State<MyHomePage> {
31.   int _counter = 0;
32.  
33.   void _incrementCounter() {
34.     setState(() {
35.       _counter++;
36.     });
37.   }
38.  
39.   @override
40.   Widget build(BuildContext context) {
41.     return Scaffold(
42.       appBar: AppBar(
43.         title: Text(widget.title),
44.       ),
45.       body: Center(
46.         child: Column(
47.           mainAxisAlignment: MainAxisAlignment.center,
48.           children: <Widget>[
49.             Text(
50.               'You have pushed the button this many times:',
51.             ),
52.             Text(
53.               '$_counter',
54.               style: Theme.of(context).textTheme.headline4,
55.             ),
56.           ],
57.         ),
58.       ),
59.       floatingActionButton: FloatingActionButton(
60.         onPressed: _incrementCounter,
61.         tooltip: 'Increment',
62.         child: Icon(Icons.add),
63.       ),
64.     );
65.   }
66. }

Karena kode di atas hanyalah kode yang di-generate sebagai contoh, maka kita tidak akan menggunakannya.

Jadi, hapus semua isi berkas main.dart tersebut dan tulis kode untuk aplikasi kita sendiri, yaitu aplikasi sederhana untuk menampilkan teks Hello world.

1. import 'package:flutter/material.dart';
2.  
3. void main() => runApp(MyApp());
4.  
5. class MyApp extends StatelessWidget {
6.  
7.   @override
8.   Widget build(BuildContext context) {
9.     return MaterialApp(
10.       title: 'Flutter Demo',
11.       theme: ThemeData(
12.         primarySwatch: Colors.blue,
13.       ),
14.       home: Scaffold(
15.         body: Center(
16.           child: Text("Hello world!"),
17.         ),
18.       ),
19.     );
20.   }
21. }

Mari kita bahas satu per satu kodenya!

import 'package:flutter/material.dart';

Import digunakan untuk memanggil fungsi-fungsi Flutter yang akan kita gunakan. Pastikan kode ini ada pada bagian atas sebelum kode lain dijalankan.

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

main() merupakan kode dasar dari project Flutter kita. Flutter akan menjalankan fungsi main() pertama kali, yang nantinya akan menjalankan runApp() dan memanggil MyApp().

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Text("Hello world!"),
        ),
      ),
    );
  }
}

MyApp di sini merupakan sebuah class yang menampilkan komponen Flutter ke layar atau dikenal dengan Widgets.

Jika aplikasi dijalankan maka akan seperti berikut:

Setiap komponen di dalam Flutter terdiri dari widget. Bahkan aplikasi Flutter itu sendiri merupakan sebuah widget. 

Pada contoh kode di atas kelas MyApp yang merupakan sebuah widget mengembalikan atau menampilkan widget MaterialApp. 

MaterialApp ini adalah widget bawaan Flutter yang akan menjadi fondasi dari aplikasi Anda. Ia umum digunakan supaya aplikasi bisa menerapkan material design. 

Widget ini mengatur beberapa hal, termasuk tema aplikasi, tampilan utama aplikasi, rute untuk navigasi antar halaman, dan lain-lain.

Selanjutnya Scaffold memungkinkan kita mendesain struktur layout dasar yang sesuai dengan material design. Dengan Scaffold Anda dapat mengatur App Bar, Floating Action Button, Drawer, dan lain-lain.

Ibarat rumah, MaterialApp ini adalah sebagai tanah yang umumnya digunakan hanya sekali saja, sedangkan Scaffold ini adalah sebagai tembok atau bangunannya.

Terakhir, harusnya sudah cukup jelas kita menggunakan widget Text untuk menampilkan teks. Pada contoh diatas widget Text dibungkus dengan widget Center yang berfungsi supaya widget di dalamnya (child) tampil pada posisi tengah.

Tips: Documentation is your best friend. 

Flutter memiliki banyak sekali widget dan tentunya akan menjadi tugas yang berat untuk menghafalkan semuanya. 

Namun tenang, Flutter dilengkapi dengan dokumentasi yang cukup lengkap sebagai panduan kita dalam mempelajari dan mengembangkan Flutter. 

Misalnya, penjelasan lebih lengkap tentang widget yang kita gunakan di atas dapat dilihat pada tautan berikut:

• https://api.flutter.dev/flutter/material/MaterialApp-class.html
• https://api.flutter.dev/flutter/material/Scaffold-class.html
• https://api.flutter.dev/flutter/widgets/Center-class.html
• https://api.flutter.dev/flutter/widgets/Text-class.html