Flutter Basic

Week #1

Toko Kopi Haqiqi Cilebut, 31 Agustus 2019

Flutter itu ?

Flutter adalah Mobile App SDK (Software Development Kit) untuk membuat aplikasi Android dan iOS dari satu codebase dengan performa tinggi. Artinya kita hanya perlu mempelajari Flutter untuk membangun aplikasi mobile untuk beberapa platform.

The goal is to enable developers to deliver high-performance apps that feel natural on different platforms. We embrace differences in scrolling behaviors, typography, icons, and more.

https://www.flexaspect.com/technologies/flutter.html

Flutter Menggunakan Dart Language

Bukan Java, Kotlin, Maupun Javascript

Dart???

Dart merupakan bahasa pemrograman yang dikembangkan oleh Google untuk banyak platform. Dart dapat digunakan untuk membuat aplikasi mobile, desktop, web, dan dapat digunakan untuk backend. Pengembangan bahasa pemrograman dart sudah dimulai sejak 2013 dengan releasenya dart 1.0, kemudian untuk versi dart 2.0 direlease pada tahun 2018. Bahkan kini Google memberikan dukungan penuh untuk Flutter, banyak fitur yang dikenalkan pada acara Google I/O 2019.

Keunggulan Dart

Dart memungkinkan pengembangan user interface sesuai dengan yang user inginkan, artinya dengan menggunakan dart dapat melakukan costum untuk UI sesuai dengan keinginan, serta penulisan syntax kode yang sangat mudah dipelajari.

Optimasi UI

Pengembangan yang produktif

Dengan menggunakan dart proses development menjadi lebih produktif, faktor yang paling utama adalah adanya fitur hot reload, dimana ketika kalian melakukan perubahan pada kode maka kalian sangat cepat untuk melihat perubahannya. Kelebihannya lagi dengan menggunakan dart sebagai codebase kalian dapat build untuk banyak platform, hal ini tentu mempengaruhi waktu development.

Perfoma cepat untuk semua platform

Berbeda dengan aplikasi hybrid, penggunaan dart pada Flutter membuat peforma aplikasi cepat bahkan sama dengan native. Karena Flutter memiliki engine untuk compile kode manjadi native, contohnya penggunaan dart untuk web maka kode akan di compile menjadi javascript.

Flutter vs React

https://www.quora.com/What-is-the-best-flutter-or-react-native

https://dzone.com/articles/flutter-vs-react-native-how-to-choose-the-best-hyb

https://www.altexsoft.com/blog/engineering/pros-and-cons-of-flutter-app-development/

https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

JavaScript

Dart

https://medium.com/aisy-rozsidhy/sharing-flutter-saingan-terberat-react-native-667d9409ac77

Flutter For React Native Developer

https://flutter.dev/docs/get-started/flutter-for/react-native-devs

Run Everywhere

Android

Ios

Web

Windows

Linux

Mac

Embedded Device

Smart Display

Made by Flutter

https://itsallwidgets.com/

made by Flutter

https://flutter.dev/showcase

Flutter Package

https://pub.dev/flutter

Flutter Comunity

Github

StackOverFlow

Medium

Youtube

Referensi belajar flutter agar tidak sesat

Google telah meliris teknologi terbarunya yaitu Flutter App akhir tahun 2018 lalu. Flutter adalah Mobile UI Framework yang dibuat oleh Google untuk dapat membangun aplikasi native iOS dan Android UI lebih mudah dan cepat dengan sekali koding. Flutter framework yang disediakan free dan open source untuk para developer dan organisasi didunia.

Namun bagaimana saya memulai untuk mempejari membuat aplikasi tersebut? situs ini yang dapat membantu anda mendapatkan informasi terkait flutter apps.

FragmentedCast

Yang Ini Penting untuk diketahui, Sebelum anda memulai membuat aplikali Flutter. Anda harus menyimak video ini terlebih dahulu untuk mendapatkan gambaran dan membantu anda memahami bagaimana Flutter hadir dan kemampuan apa saja yang dapat dilakukannya.

https://fragmentedpodcast.com/episodes/118/
https://fragmentedpodcast.com/episodes/119/

Flutter Docs

Membaca dokumen resmi sangat bagus untuk memperdalam pengetahuan. Biasanya meliputi contoh yang dapat dipahami untuk kasus yang sederhana. Hal baiknya, pada dokumetasi resmi Flutter juga mencakup dokumentasi untuk Android, iOS, React Native dan Pengembangan web, jadi anda dapat dengan mudah menghubungkan flutter dengan pengetahuan dalam mengembangkan aplikasi yang anda miliki saat ini.

https://flutter.io/flutter-for-android/
https://flutter.io/flutter-for-ios/
https://flutter.io/flutter-for-react-native/
https://flutter.io/web-analogs/

Google CodeLabs

Tutorial step by step untuk membangun aplikasi Flutter yang mengagumkan? Siapa yang tidak mengingikannya? Bagi anda pemula, jangan lewatkan bagian ini.

https://codelabs.developers.google.com/?cat=Flutter

Install Flutter

Pilih OS yang kamu gunakan :

Install Flutter Windows

https://flutter.dev/docs/get-started/install/windows

1. Install Flutter SDK

Silahkan Dowload Flutter SDK

atau cek SDK terbaru disini :

https://flutter.dev/docs/development/tools/sdk/releases

Extraks File zip pada direktori C:\app\Flutter atau D:\app\Flutter

Jangan Install di C:\Program Files

Letakan File Flutter_console.bat disamping Folder Flutter, dan jalankan

2. Update PATH

Klik Windows run, ketik env, dan pilih

di System variables, pilih variable Path kemudian klik tombol EDIT

klik NEW, dan tambahkan D:\app\Flutter\bin

khusus untuk menjalankan flutter dekstop tambahkan user variables, klik NEW

Tambahkan Variable ENABLE_FLUTTER_DESKTOP dengan value : true

Update PATH

3. Run Flutter Doctor

Flutter Doctor berfungsi untuk mengecek apakah pc kamu sudah layak untuk menjalankan Flutter.

masuk ke Folder D:/app/Flutter, klik kanan dan masuk ke Terminal / Commad Prompt, Ketikan Flutter Doctor

Flutter akan jalan minimal terpenuhi :

Flutter Channel Master (Checklist Hijau) Wajib
Android Studio (Checklist Hijau) wajib untuk Gradle
Connected Device (Device Android / Emulator)

Visual Studio 2017/2019 (optional) ( untuk Flutter Dekstop)
VS Code ( optional ) Pengganti Android Studio
Intelij Idea (optional) Pengganti Android Studio

Optional Install

Masalah & Solusi

Android License Unknown
Jika terdapat error android not licenses, solusinya jalankan flutter doctor --android-licenses pada terminal/cmd. Kemudian ikutin petunjuknya. ( Enter “y” terus sampe selesai)
Some android Licenses not accepted
Sama seperti diatas jalankan flutter doctor --android-licenses pada terminal/cmd
No Devices Connected
Flutter belum terhubung dengan smartphone. Sambungkan smartphone menggunakan kabel USB, pastikan telah mengaktifkan USB Debugging pada Developer Option

jika muncul seperti ini, berarti pc kamu belum terinstall Android SDK, kamu bisa Install manual, atau lebih mudahnya Install Android Studio saja yang sudah Full Paket dengan Android SDK

klik untuk Install Android Studio

Klik untuk Install VS Code

Install Flutter Linux

https://flutter.dev/docs/get-started/install/linux

Silahkan Pilih Editor :

Install Flutter Mac

https://flutter.dev/docs/get-started/install/macos

Silahkan Pilih Editor :

Install Android Studio

Install di Win10

Install di Win7

Install di Linux

Install di Mac

Install Flutter dan Dart Plugin

Buka Android Studio, klik File > Setting > Plugins, pilih Browse Repository

Install Plugin Dart dan Flutter dengan cara klik Install

Jika muncul kotak dialog, install Dart Plugin, klik yes, dan restart Android Studio

Membuat Project Baru

Running Project

Fitur Hot Reload

https://flutter.dev/docs/development/tools/hot-reload

Install VS Code

Install di Win10

Install di Linux

Install Flutter Extension

Buka VSCode, Klik Icon Extension

Cara Extension Flutter dan Dart dan Install

Jika sudah selesai, Restart VScode

VSCode Extension

Membuat Project Baru

Running Project

flutter run

Ketikan Perintah :

Stateless Widget

Merupakan widget yang di-build hanya dengan konfigurasi yang telah diinisiasi sejak awal. Jadi Stateless Widget adalah Widget yang tidak akan pernah berubah.

Misalnya Kita membuat aplikasi berisi Text dengan angka 10. Kemudian aplikasi kita tidak punya fungsi untuk merubah angka tersebut. Maka yang digunakan di sini adalah Stateless Widget.

https://medium.com/meduru-course/memahami-perbedaan-stateless-vs-stateful-widget-flutter-e8ea12e46ac

main.dart

main.dart adalah file utama yang akan pertama kali dijalankan

Stateless Widget

import 'package:flutter/material.dart';

void main(){
  runApp(
    new MaterialApp(
      home: new Widget1(),
    )
  );
}

class Widget1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Text("meetAp Flutter Basic"),
    );
  }
}

Posisi Text diatas tak terlihat

https://api.flutter.dev/flutter/widgets/Center-class.html

Center Class

import 'package:flutter/material.dart';

memanggil widget2 yang ada pada material.dart

silahkan lihat isi file material.dart
Flutter menyusun widget2 menjadi sebuah aplikasi

// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/// Flutter widgets implementing Material Design.
///
/// To use, import `package:flutter/material.dart`.
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=DL0Ix1lnC4w}
///
/// See also:
///
///  * [flutter.dev/widgets](https://flutter.dev/widgets/)
///    for a catalog of commonly-used Flutter widgets.
///  * [material.io/design](https://material.io/design/)
///    for an introduction to Material Design.
library material;

export 'src/material/about.dart';
export 'src/material/animated_icons.dart';
export 'src/material/app.dart';
export 'src/material/app_bar.dart';
export 'src/material/app_bar_theme.dart';
export 'src/material/arc.dart';
export 'src/material/back_button.dart';
export 'src/material/bottom_app_bar.dart';
export 'src/material/bottom_app_bar_theme.dart';
export 'src/material/bottom_navigation_bar.dart';
export 'src/material/bottom_sheet.dart';
export 'src/material/bottom_sheet_theme.dart';
export 'src/material/button.dart';
export 'src/material/button_bar.dart';
export 'src/material/button_theme.dart';
export 'src/material/card.dart';
export 'src/material/card_theme.dart';
export 'src/material/checkbox.dart';
export 'src/material/checkbox_list_tile.dart';
export 'src/material/chip.dart';
export 'src/material/chip_theme.dart';
export 'src/material/circle_avatar.dart';
export 'src/material/color_scheme.dart';
export 'src/material/colors.dart';
export 'src/material/constants.dart';
export 'src/material/data_table.dart';
export 'src/material/data_table_source.dart';
export 'src/material/date_picker.dart';
export 'src/material/debug.dart';
export 'src/material/dialog.dart';
export 'src/material/dialog_theme.dart';
export 'src/material/divider.dart';
export 'src/material/drawer.dart';
export 'src/material/drawer_header.dart';
export 'src/material/dropdown.dart';
export 'src/material/expand_icon.dart';
export 'src/material/expansion_panel.dart';
export 'src/material/expansion_tile.dart';
export 'src/material/feedback.dart';
export 'src/material/flat_button.dart';
export 'src/material/flexible_space_bar.dart';
export 'src/material/floating_action_button.dart';
export 'src/material/floating_action_button_location.dart';
export 'src/material/floating_action_button_theme.dart';
export 'src/material/flutter_logo.dart';
export 'src/material/grid_tile.dart';
export 'src/material/grid_tile_bar.dart';
export 'src/material/icon_button.dart';
export 'src/material/icons.dart';
export 'src/material/ink_decoration.dart';
export 'src/material/ink_highlight.dart';
export 'src/material/ink_ripple.dart';
export 'src/material/ink_splash.dart';
export 'src/material/ink_well.dart';
export 'src/material/input_border.dart';
export 'src/material/input_decorator.dart';
export 'src/material/list_tile.dart';
export 'src/material/material.dart';
export 'src/material/material_button.dart';
export 'src/material/material_localizations.dart';
export 'src/material/material_state.dart';
export 'src/material/mergeable_material.dart';
export 'src/material/outline_button.dart';
export 'src/material/page.dart';
export 'src/material/page_transitions_theme.dart';
export 'src/material/paginated_data_table.dart';
export 'src/material/popup_menu.dart';
export 'src/material/progress_indicator.dart';
export 'src/material/radio.dart';
export 'src/material/radio_list_tile.dart';
export 'src/material/raised_button.dart';
export 'src/material/range_slider.dart';
export 'src/material/refresh_indicator.dart';
export 'src/material/reorderable_list.dart';
export 'src/material/scaffold.dart';
export 'src/material/scrollbar.dart';
export 'src/material/search.dart';
export 'src/material/shadows.dart';
export 'src/material/slider.dart';
export 'src/material/slider_theme.dart';
export 'src/material/snack_bar.dart';
export 'src/material/snack_bar_theme.dart';
export 'src/material/stepper.dart';
export 'src/material/switch.dart';
export 'src/material/switch_list_tile.dart';
export 'src/material/tab_bar_theme.dart';
export 'src/material/tab_controller.dart';
export 'src/material/tab_indicator.dart';
export 'src/material/tabs.dart';
export 'src/material/text_field.dart';
export 'src/material/text_form_field.dart';
export 'src/material/text_selection.dart';
export 'src/material/text_theme.dart';
export 'src/material/theme.dart';
export 'src/material/theme_data.dart';
export 'src/material/time.dart';
export 'src/material/time_picker.dart';
export 'src/material/toggleable.dart';
export 'src/material/tooltip.dart';
export 'src/material/typography.dart';
export 'src/material/user_accounts_drawer_header.dart';
export 'widgets.dart';

void main(){
  runApp(new MaterialApp(
    home: new Welcome(),
  ));
}

Perintah diatas merupakan fungsi main yang merupakan halaman utama, kemudian memanggil class MaterialApp dari File material.dart

Home merupakan launcher yang akan menjalankan widget Welcome()

Nah .... widget Welcome inilah yang nanti disebut sebagai Stateless Widget

class Welcome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body:
        new Center(
          child: new Text("meetAp Flutter Basic"),
        )
    );
  }
}

widget Welcome merupakan Stateless Widget yang akan mengirimkan return ke fungsi main pada bagian Home.

Setiap Stateless Widget wajib memilikinbuild untuk membentuk widget,

body tempat menampilkan widget, tepatnya pada posisi layar seperti tag <body></body> pada HTML

new Text merupakan widget Text, yang akan menampilkan karakter pada aplikasi kita

Scaffold Class

https://api.flutter.dev/flutter/material/Scaffold-class.html

Struktur Layout dari Material Desain

    new Scaffold(
      appBar: new AppBar(
        title: new Text("FLutter App #1"),
      ),
      body: new Center(
        child: new Text("meetAp Flutter Basic"),
      ),
    );

Color Class

Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        title: new Text("FLutter App #1"),
        backgroundColor: Colors.red,
      ),
      body: new Center(
        child: new Text(
            "meetAp Flutter Basic",
             style: TextStyle(color: Colors.white),
        ),
      ),
    );

https://api.flutter.dev/flutter/material/Colors-class.html

Color palettes

Scaffold(
      backgroundColor: Colors.yellow[200],
      appBar: new AppBar(
        title: new Text("FLutter App #1"),
        backgroundColor: Color(0xFFFF7043),
      ),
      body: new Center(
        child: new Text(
            "meetAp Flutter Basic",
             style: TextStyle(color: Colors.redAccent[400]),
        ),
      ),
    );

Floating Action Button

Scaffold(
      backgroundColor: Colors.yellow[200],
      appBar: new AppBar(
        title: new Text("FLutter App #1"),
        backgroundColor: Color(0xFFFF7043),
      ),
      body: new Center(
        child: new Text(
            "meetAp Flutter Basic",
             style: TextStyle(color: Colors.redAccent[400]),
        ),
      ),

      floatingActionButton: FloatingActionButton(
          onPressed: null,
        tooltip: 'Camera',
        child: Icon(Icons.camera),
        backgroundColor: Colors.blue[400],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

Bottom Navigation Bar

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

Scaffold(
      backgroundColor: Colors.yellow[200],
      appBar: new AppBar(
        title: new Text("FLutter App #1"),
        backgroundColor: Color(0xFFFF7043),
      ),
      body: new Center(
        child: new Text(
            "meetAp Flutter Basic",
             style: TextStyle(color: Colors.redAccent[400]),
        ),
      ),

      floatingActionButton: FloatingActionButton(
          onPressed: null,
        tooltip: 'Camera',
        child: Icon(Icons.camera),
        backgroundColor: Colors.blue[400],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.people),title: Text('Profil'),
            ),
          ],
        backgroundColor: Colors.deepOrange,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.black,
      ),
    );

Review

Memecah Code

Buat file : hal1.dart pada folder Lib

class hal1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        title: new Text('Photograph'),
        backgroundColor: Colors.blue[300],

      ),
      body: new Center(
        child: new Text(
          'Aplikasi Photograph',
          style: TextStyle(color: Colors.white),
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: null,
        tooltip: 'Camera Shoot',
        child: Icon(Icons.camera),
        backgroundColor: Colors.blue,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar: BottomNavigationBar(
        items: const<BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.people),
              title: Text('Profil')
          ),
        ],
        backgroundColor: Colors.blue,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.black,
      ),

    );
  }

}

Copy Class Stateless Widget dari main.dart

Tambahkan material.dart

import 'package:flutter/material.dart';

import 'package:flutter_p1/hal1.dart';

Import halaman hal1.dart ke main.dart

sehingga code lengkap main.dart

sehingga code lengkap hal1.dart

import 'package:flutter/material.dart';
import 'package:flutter_p1/hal1.dart';

void main(){
  runApp(
    new MaterialApp(
      home: new hal1(),
    )
  );
}

import 'package:flutter/material.dart';

class hal1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        title: new Text('Photograph'),
        backgroundColor: Colors.blue[300],

      ),
      body: new Center(
        child: new Text(
          'Aplikasi Photograph',
          style: TextStyle(color: Colors.white),
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: null,
        tooltip: 'Camera Shoot',
        child: Icon(Icons.camera),
        backgroundColor: Colors.blue,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar: BottomNavigationBar(
        items: const<BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.people),
              title: Text('Profil')
          ),
        ],
        backgroundColor: Colors.blue,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.black,
      ),

    );
  }

}

Review

Bonus Flutter Dekstop

Flutter Dekstop

Container & Icon Class

import 'package:flutter/material.dart';

class hal_icon extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Halaman Icon'),
        backgroundColor: Colors.blue[300],
      ),
      body: new Center(
        child: Container(
          color: Colors.blue[900],
          width: 400.0,
          height: 400.0,
          child: new Center(
            child: new Icon(
              Icons.android,
              color: Colors.white,
              size: 80.0,
            ),
          ),
        )
      ),


    );
  }

}

https://api.flutter.dev/flutter/widgets/Icon-class.html

https://api.flutter.dev/flutter/widgets/Container-class.html

Column Class

https://api.flutter.dev/flutter/widgets/Column-class.html

      body: new Center(
        child: new Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(40.0),
              width: 100.0,height: 100.0,color: Colors.orange,
              child: new Center(child: new Icon(Icons.camera,color: Colors.white,size: 80.0,),),
            ),
            Container(
              margin: EdgeInsets.all(10.0),
              width: 100.0,height: 100.0,color: Colors.yellowAccent,
              child: new Center(child: new Icon(Icons.image,color: Colors.white,size: 80.0,),),
            ),
            Container(
              margin: EdgeInsets.all(10.0),
              width: 100.0,height: 100.0,color: Colors.redAccent,
              child: new Center(child: new Icon(Icons.favorite,color: Colors.white,size: 80.0,),),
            )
          ],
        ),
      )

Row Class

https://api.flutter.dev/flutter/widgets/Row-class.html

      body: new Center(
        child: new Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(5.0),
              width: 100.0,height: 100.0,color: Colors.orange,
              child: new Center(child: new Icon(Icons.camera,color: Colors.white,size: 80.0,),),
            ),
            Container(
              margin: EdgeInsets.all(5.0),
              width: 100.0,height: 100.0,color: Colors.blueAccent,
              child: new Center(child: new Icon(Icons.image,color: Colors.white,size: 80.0,),),
            ),
            Container(
              margin: EdgeInsets.all(5.0),
              width: 100.0,height: 100.0,color: Colors.redAccent,
              child: new Center(child: new Icon(Icons.favorite,color: Colors.white,size: 80.0,),),
            )
          ],
        )
      )

Image Class

https://api.flutter.dev/flutter/widgets/Image-class.html

      body: new Center(
        child: new Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(5.0),
              width: 100.0,height: 100.0,color: Colors.orange,
              child: new Center(child: new Image.network("https://zulkifli15.files.wordpress.com/2017/02/java1.gif?w=247&h=247&crop=1&zoom=2"),),
            ),
            Container(
              margin: EdgeInsets.all(5.0),
              width: 100.0,height: 100.0,color: Colors.blueAccent,
              child: new Center(child: new Image.network("https://nethminirominaofficial.files.wordpress.com/2018/02/newsletter_promo.png"),),
            ),
            Container(
              margin: EdgeInsets.all(5.0),
              width: 100.0,height: 100.0,color: Colors.redAccent,
              child: new Center(child: new Image.network("https://www.didierboelens.com/images/hummingbird_logo.png"),),
            )
          ],
        )
      )