Tutorial Belajar Flutter

Tutorial Belajar Flutter

Flutter adalah SDK aplikasi Mobile dari Google yang digunakan untuk membangun aplikasi native iOS, Android, Desktop (Windows, Linux, macOS), dan Web dari satu source code. Saat membangun aplikasi dengan Flutter, semuanya berkaitan dengan Widgets, yaitu sebuah blok yang digunakan untuk membangun aplikasi Flutter. Widget merupakan elemen struktural yang dilengkapi dengan banyak fungsi khusus untuk material design, dan widget baru dapat digunakan dengan cara menyusun widget yang sudah ada. Proses menggabungkan widget disebut komposisi. Antarmuka pengguna aplikasi terdiri dari banyak widget sederhana yang memiliki tugasnya masing-masing. Itulah sebabnya mengapa pengembang Flutter cenderung memandang aplikasi Flutter mereka sebagai pohon widget.

Flutter adalah framework  open source untuk membuat aplikasi mobile berkualitas tinggi dan performa tinggi pada sistem operasi mobile seperti Android dan iOS. Framework ini menyediakan SDK yang sederhana, efisien, dan mudah dipahami untuk membuat aplikasi mobile menggunakan bahasa pemrograman Dart milik Google. Tutorial ini membahas dasar-dasar framework Flutter, proses instalasi SDK Flutter, cara menyiapkan Android Studio untuk mengembangkan aplikasi berbasis Flutter, desain struktur Flutter, serta cara mengembangkan berbagai jenis aplikasi seluler menggunakan framework Flutter.

Audiens #

Sasaran tutorial ini adalah para profesional yang ingin membangun karir di bidang mobile development. Tutorial ini bertujuan untuk membuat Anda nyaman memulai belajar dengan menggunakan framework Flutter dan dapat memahami berbagai fungsinya.

Prasyarat #

Tutorial ini disusun dengan mengasumsikan bahwa pembaca sudah memahami Kerangka Kerja atau biasa disebut dengan Framework dan memiliki pengetahuan yang memadai tentang Pemrograman Berorientasi Objek, dasar-dasar struktur Android, dan pemrograman Dart. Jika Anda masih pemula dalam salah satu konsep ini, kami menyarankan Anda untuk mempelajari tutorial terkait terlebih dahulu sebelum memulai belajar Flutter.

Tipe-tipe Widgets #

  • Stateless Widgets
  • Stateful Widgets

Flutter, Dart, dan teknologi yang setara

Flutter React Native
Dirilis pertama kali pada tahun 2017 Dirilis pertama kali pada tahun 2015
Berdasarkan bahasa pemrograman Dart Berdasarkan React Js
Mengontrol setiap piksel di layar Kontrol melalui komponen native mobile
Cross-Platform ( Mobile, Web, Desktop ) Cross-Platform ( Mobile, React Native Web )
Developed by Google Developed by Facebook
Versi terbaru 3.7.7 Versi terbaru 0.71
Kinerja aplikasi lebih tinggi. Flutter dapat menghasilkan animasi dengan kecepatan 60 fps atau 120 fps. Flutter sendiri dapat menggambar dan mengontrol setiap piksel di layar. High. Dibutuhkan JavaScript bridge untuk berinteraksi dengan komponen asli.
Flutter adalah kerangka kerja yang paling cepat berkembang untuk pengembangan lintas platform. Dukungan komunitas untuk flutter sangat luar biasa, dengan lebih dari 11100 bintang di Github, 15000 fork, dan lebih dari 41000 masalah yang diselesaikan, Flutter memimpin industri ini. Dukungan komunitas untuk React Native juga baik, namun pertumbuhannya tidak secepat Flutter. Saat ini memiliki lebih dari 9300 bintang di Github, 20000 forking, dan lebih dari 19700 isu yang telah diselesaikan.

 

// Untuk mengimport paket-paket penting, dibutuhkan koneksi.
// Flutter dan Dart
import 'package:flutter/material.dart';

// Fungsi Main
void main() {
// Memberikan perintah kepada runApp() untuk menjalankan aplikasi.

/* Tujuan dari fungsi runApp() adalah untuk menampilkan widget
yang diberikan di layar. */
  runApp(const MyApp());
}

// Widget digunakan untuk membuat antarmuka pengguna (UI) pada kerangka kerja (framework) flutter.

/* StatelessWidget adalah sebuah widget yang tidak mempertahankan
keadaan (state) dari widget tersebut. */

/* "MyApp" adalah sebuah class yang diturunkan dari class "StatelessWidget"
dan mengubah isi dari metode "build" */
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// Widget ini merupakan akar dari aplikasi Anda..
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Judul dari aplikasi
      title: 'Hello World Demo Application',
      // Tema dari widget
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      // UI dari aplikasi
      home: const MyHomePage(title: 'Home page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      // Untuk set aplikasi menjadi di tengah
      body: const Center(
          child: Text(
            'Welcome to Nextgen Tutorial!',
          )),
    );
  }
}

Output

Dan, hal yang menjadi poin penjualan terbesar dari Flutter adalah:

  1. High-Performance App: Aplikasi yang dikembangkan menggunakan Flutter sangat ekspresif dan memiliki antarmuka pengguna yang fleksibel. Pengembangan yang cepat berkat fitur hot reloading membuat aplikasi menjadi hidup dan ekspresif dengan memberikan fitur-fitur yang diinginkan untuk end user experience yang mirip dengan aplikasi asli.
  2. Expressive and Flexible UI: Flutter memungkinkan pengembang untuk membangun aplikasi yang indah dengan mudah menggunakan widget material pre-build. Meskipun banyak widget telah ada, tetapi Flutter memungkinkan penggunaan widget yang fleksibel.
  3. Fast Development & Hot Reloading: Hot Reloading mengacu pada penyisipan versi baru dari file yang diedit saat runtime sambil menjalankan aplikasi.

Kelebihan dan Kekurangan dari Flutter #

Kelebihan:

  • Flutter menggunakan satu source code tunggal, yaitu Dart, untuk kedua platform, Android dan iOS, yang merupakan bahasa yang sederhana dan menjamin keamanan tipe data. 
  • Baik bahasa Flutter maupun komunitasnya sedang berkembang dengan pesat dan merilis fitur, widget, serta add-on baru secara teratur.
  • Flutter memiliki set widget-nya sendiri, daripada menggunakan widget yang disediakan oleh sistem operasi host. Hal ini berarti pengguna dapat memberikan model pengenalan gestur sendiri dan memiliki kontrol yang lebih besar atas rendering yang akurat atau penyesuaian widget.
  • Hot-reloading menjadi game changer dalam produktivitas proses development. Ini memberikan efek yang hidup pada aplikasi yang sedang dikembangkan, sehingga membuat seluruh siklus pengembangan lebih menarik bagi pengembang UI / UX yang menggunakan Flutter.
  • Flutter tidak terikat pada ROM sehubungan dengan sistem widget. Jadi, meningkatkan portabilitasnya pada berbagai versi Android dan dengan demikian, mengurangi ketergantungannya pada platform host.
  • Dart dan Flutter menyatu secara erat untuk mengoptimalkan Virtual Machine (VM) dart untuk ponsel yang khusus dibutuhkan oleh Flutter.
  • Flutter merupakan pemain terkemuka dalam bidang pengembangan aplikasi lintas platform dengan dukungan komunitas yang luar biasa.

Kekurangan:

  • Sebenarnya, tidak ada kekurangan pada Flutter karena tidak ada kerangka kerja lain yang seefektif dan sekompleks Flutter. Meskipun jika harus mencantumkannya, akan berkaitan dengan bahasa pemrograman Dart karena ketika mengonversi dart ke JavaScript ada beberapa bug yang harus diperbaiki, dart tidak memiliki kerangka kerja untuk backend, dan sebagainya.

Tinggalkan Balasan

Keranjang Belanja0
Keranjang belanja kosong ...
0