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.
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
JavaScript
Dart
Flutter For React Native Developer
Run Everywhere
Android
Ios
Web
Windows
Linux
Mac
Embedded Device
Smart Display
Made by Flutter
made by Flutter
Flutter Package
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
1. Install Flutter SDK
Silahkan Dowload Flutter SDK
atau cek SDK terbaru disini :
- 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
Silahkan Pilih Editor :
Install Flutter Mac
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
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.
main.dart
main.dart adalah file utama yang akan pertama kali dijalankan
Stateless Widget
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
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
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),
),
),
);
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,
);
Bottom Navigation Bar
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,
),
),
)
),
);
}
}
Column Class
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
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
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"),),
)
],
)
)
meetAp Flutter Basic #1
By Maulana Ilham
meetAp Flutter Basic #1
meetap_flutter_basic
- 1,297