Sempena 10 tahun dah terjebak dalam pembangunan apps Android, makanya kita upgrade kepada evolusi Android terkini . Google Flutter menyediakan pembangunan apps mobile multiplatform.
Muatturun dari Flutter.io
Flutter boleh download dari flutter.io, selepas download flutter SDK extract dalam root atau C:
![Download flutter SDK and extract in root or C](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/Download-flutter-SDK-and-extract-in-root-or-C.png)
Download flutter SDK and extract in root or C
Seterusnya set path ke flutter/bin dalam environment variable.
![System properties - environment variables - path](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/System-properties-environment-variables-path.png)
System properties – environment variables – path
![System properties - environment variables - path - add new path - flutter-bin](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/System-properties-environment-variables-path-add-new-path-flutter-bin.png)
System properties – environment variables – path – add new path – flutter-bin
Pasang Android Studio + Android SDK
Muatturun installer dari developer.android.com
![Download Android Studio from developer.android](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/Download-Android-Studio-from-developer.android.png)
Download Android Studio from developer.android
Selepas berjaya muat turun (700++MB) teruskan install. Installer tadi cuma mengandungi IDE iaitu IntelliJ. Selepas install selesai anda akan diminta download AndroidSDK dan emulator.
SDK Manager
![Android Studio SDK manager to download Android platforms](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/Android-Studio-SDK-manager-to-download-Android-platforms-1024x852.png)
Android Studio SDK manager to download Android platforms
AVD Manager
![Android Studio AVD manager](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/Android-Studio-AVD-manager-1024x753.png)
Android Studio AVD manager
Flutter Doctor
![Flutter doctor all OK](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/flutter-doctor-all-OK.png)
Flutter doctor all OK
Tool periksa kesediaan Flutter
Bila dah selesai install flutter dan AndroidSDK – run Flutter Doctor
Jika ada masalah dengan license, run dalam cmd
1 |
flutter doctor --android-licenses |
Dart
Programming language similar to C.
![DartLang.org](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/dart-logo-for-shares.png)
DartLang.org
Visual Studio Code
Kod laju tanpa Android Studio. Install the Flutter plugin in VSCode.
![Flutter Visual Studio Code plugins](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/flutter-vscode-plugins-1024x770.png)
Flutter Visual Studio Code plugins
Projek baru Flutter dalam VSCode
![VSCode View - Command Palette - Flutter-NewProject](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/VSCode-View-Command-Palette-Flutter-NewProject-1024x779.png)
VSCode View – Command Palette – Flutter-NewProject
Cuba kod ini dalam main.dart
import 'package:flutter/material.dart'; void main () => runApp (MyApp()); class MyApp extends StatelessWidget{ @override Widget build (BuildContext context){ return MaterialApp( title: 'Hello Word Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World, Flutter'), ), ), ); }//end Widget }//end class
Output
![Hellowold flutter demo apps](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/Hellowordl-flutter-demo-apps-512x1024.jpeg)
Hellowold flutter demo apps
Tambah Container baru dalam main.dart
Output
Tambahan fail class baharu, contoh mersing.dart
import 'package:flutter/material.dart'; class Mersing extends StatelessWidget{ @override Widget build(BuildContext context){ return new Container( margin: const EdgeInsets.all(10.0), padding: EdgeInsets.all(10.0), decoration: new BoxDecoration(border: new Border.all(color: Colors.redAccent)), child: new Column( children: <Widget>[ //new FlutterLogo(size: 300.0), new Text('Flutter @PoliMersing'), new Text('http://www.pmj.edu.my/'), ] ), ); } }
Sekiranya perlu buat panggilan kepada class Mersing, include di atas dan panggil method Mersing(). Caranya seperti imej di bawah
![VSCode call Flutter method from class inclusion](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/VSCode-call-Flutter-method-from-class-inclusion-1024x761.png)
VSCode call Flutter method from class inclusion
Kod penuh main.dart
import 'package:flutter/material.dart'; import 'mersing.dart';//include dart file void main () => runApp (MyApp()); class MyApp extends StatelessWidget{ @override Widget build (BuildContext context){ return MaterialApp( title: 'Hello Word Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: new Container( margin: const EdgeInsets.all(15.0), padding: EdgeInsets.all(32.0), decoration: new BoxDecoration(border: new Border.all(color: Colors.blueGrey)), child: new Column( children: <Widget>[ new FlutterLogo(size: 300.0), new Text('FSTM KUIS'), new Text('http://fstm.kuis.edu.my'), new Text('http://wasap.my/60129034614'), new RaisedButton( child: const Text('Connect our FB'), color: Theme.of(context).accentColor, elevation: 4.0, splashColor: Colors.blueAccent, onPressed: () { // Perform some action }, ), const Icon(Icons.sentiment_very_satisfied), new Row( children: <Widget>[ Mersing(), Mersing(), ], ) ], ), ), ), ); }//end Widget }//end class
SliverAppBar
Dokumentasi di https://docs.flutter.io/flutter/material/SliverAppBar-class.html
![SliverAppBar demo](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/sliverappbar-demo-495x1024.gif)
SliverAppBar demo
FlutterStudio.app
Web app bantu design antaramuka Flutter
![FlutterStudio.app](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/FlutterStudio.app_-1024x672.png)
FlutterStudio.app
Kod lengkap di GitHub
github.com/khirulnizam/AndroidFlutterCaspian
![Flutter training Politeknik Mersing](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/01/Flutter-training-Politeknik-Mersing-1024x768.jpeg)
Flutter training Politeknik Mersing Jan 2019
Catatan oleh:
KHIRULNIZAM ABD RAHMAN, Pensyarah Jabatan Sains Komputer, FSTM KUIS.
Beliau merupakan seorang trainer dalam bidang pengaturcaraan server dan antaramuka web (web front-end & backend) semenjak tahun 2000. Disamping itu juga amat berminat dalam pembangunan applikasi mobile Android, JSON, LARAVEL dan PHP-MySQL.
Antara kursus yang beliau kendalikan;
Blog peribadi beliau di khirulnizam.com . Beliau boleh dihubungi melalui email khirulnizam@gmail.com , atau Whatsapp: http://wasap.my/60129034614