Hulunews.net-Flutter sudah menganut WORA(write once read any where). Artinya kita sudah
menulis sekali tapi dapat dilakukan piliha Windows, IOs, Android, juga WEB.
- Instalasi Flutter SDK
- download flutter dan pilih sistem operasi yang Anda gunakan. (± 800 mb)
- ekstrak file .zip yang telah di download ke d:.
Agar simple, salin folder flutter di dalam flutter_windows_3.3.8-stable/flutter ke d:
menjadi d:flutter. - tambahkan path pada system environment dengan cara ketik “environment” pada kolom
pencarian di Windows. Lalu, masuk ke pengaturan Edit the system environment
variables. Tambahkan variable berikut :
D:\flutter\bin - restart system.
- Menguji kesiapan flutter.
Di dalam flutter yang telah kita download, sudah disertakan sebuah folder yang berisi sample
program. (examples)
- buka Windows PowerShell. Arahkan kursor ke D:\flutter\examples\api\lib\widgets\form
Lalu ketikkan flutter run lib/widgets/form/form.0.dart pada promp :
PS D:\flutter\examples\api\lib\widgets\form> flutter run lib/widgets/form/form.0.dart
Hasilnya sbb: (jika pilihannya Chrome)
- Install Plugin Flutter & Dart di VS Code
Pertama-tama, bukalah aplikasi Visual Studio Code. Kemudian, klik menu Extensions yang
terdapat pada sidebar aplikasi.
Ketiklah ‘flutter’ pada kolom pencarian Extensions dan pilih yang paling atas seperti pada
gambar di bawah. Lalu, klik Install dan tunggu beberapa saat.
Secara default, proses instalasi extensions flutter akan otomatis menginstall plugin Dart juga.
Nah, jika flutter sudah terinstall, ketik ‘Dart’ pada kolom pencarian extensions. Jika tampilan
Visual Studio Code Anda seperti gambar di bawah ini, artinya Dart sudah terinstall dengan baik. - Setup di Visual Studio Code
Langkah setup yang dilakukan, meliputi : - Menggunakan flutter pada channel stable
- Melakukan upgrade flutter
- Memastikan browser yang digunakan mendukung
Menggunakan Flutter pada Channel Stable
Untuk melakukan set up Flutter di Visual Studio Code, Anda perlu membuka terminal. Arahkan
kursor pada menu Terminal > New Terminal.
flutter channel stable
Melakukan Upgrade Flutter
Menjalankan channel stable akan menggantikan versi flutter saat ini dengan versi stabil, proses
ini akan memakan waktu yang cukup lama jika koneksi Anda lambat.
Selanjutnya, Anda perlu melakukan upgrade untuk mendapatkan versi stable yang terbaru
dengan cara menjalankan perintah berikut ini :
flutter upgrade
Jika sudah ada flutter versi terbaru, perintah di atas akan melakukan upgrade seperti gambar di
bawah ini. Anda harus menunggu beberapa saat sampai proses upgrade selesai.
Namun, jika Anda sudah menggunakan versi yang terbaru, sistem akan langsung menampilkan
informasi versi flutter dan dart yang Anda gunakan saat ini.
Memastikan Browser yang Digunakan Mendukung
Dalam proses pengembangan aplikasi web, flutter tentu memerlukan web browser
menjalankan aplikasinya. Untuk mengecek apakah web browser Anda sudah terhubung dengan
flutter, Anda dapat menjalankan perintah :
flutter devices
Nah, perintah di atas akan memberikan output web browser apa saja yang terhubung dengan
flutter di komputer Anda, seperti ini :
Pastikan langkah-langkah di atas dilakukan dengan benar agar tidak terjadi error. Setelah itu,
saatnya menjalankan aplikasi Flutter.
- Menjalankan Aplikasi Web
Anda dapat membuat project flutter web pertama Anda dengan menjalankan perintah sebagai
berikut :
flutter create my_app
Jika project baru telah berhasil dibuat, Anda akan mendapatkan pesan
gambar berikut ini
Agar aplikasi web dapat dijalankan, Anda harus masuk ke direktori project yang baru dibuat
dengan menggunakan perintah :
cd my_app
Saat pertama kali membuat project baru, folder project Anda akan diisi oleh folder
file yang dibutuhkan dalam peng
Anda dapat melakukan test apakah aplikasi Anda berjalan atau tidak dengan cara menjalankan
aplikasi pertama Anda menggunakan perintah berikut ini.
flutter run -d chrome
Perintah tersebut akan menjalankan aplikasi menggunakan Google Chrome sebagai web
browser. Tunggu beberapa saat sampai Chrome terbuka dan muncul tampilan seperti ini.
Nah, jika aplikasi default flutter web sudah berhasil dijalankan.
- Membuat Halaman Web dengan Flutter
Pada panduan ini, kami membuat
contoh. Nantinya hasilnya akan seperti ini :
Berikut ini langkah membuatnya:
Langkah 1 – Membuat Folder Assets
Folder Assets berfungsi untuk menyimpan assets yang akan
aplikasi web.
Untuk latihan Assets berikut untuk membuat landing page ini adalah assets berupa gambar dan
font.
Oleh karena itu, agar terlihat rapi, buatlah folder
direktori project. Kemudian, isi folder image dengan gambar yang akan Anda gunakan untuk
membuat project ini.
Sedangkan pada folder font, isilah dengan font yang Anda pakai. Jika tidak memakai font
tambahan biarkan font default saja.
Perintah tersebut akan menjalankan aplikasi menggunakan Google Chrome sebagai web
browser. Tunggu beberapa saat sampai Chrome terbuka dan muncul tampilan seperti ini.
web sudah berhasil dijalankan.
. Membuat Halaman Web dengan Flutter
membuat halaman landing page menggunakan flutter web sebagai
contoh. Nantinya hasilnya akan seperti ini :
Berikut ini langkah membuatnya:
Membuat Folder Assets
Folder Assets berfungsi untuk menyimpan assets yang akan Anda gunakan dalam membuat
untuk membuat landing page ini adalah assets berupa gambar dan
Oleh karena itu, agar terlihat rapi, buatlah folder baru di bawah asset /image dan
. Kemudian, isi folder image dengan gambar yang akan Anda gunakan untuk
Sedangkan pada folder font, isilah dengan font yang Anda pakai. Jika tidak memakai font
font default saja.
nakan Google Chrome sebagai web
browser. Tunggu beberapa saat sampai Chrome terbuka dan muncul tampilan seperti ini.
halaman landing page menggunakan flutter web sebagai
Anda gunakan dalam membuat
untuk membuat landing page ini adalah assets berupa gambar dan
dan /font di dalam
. Kemudian, isi folder image dengan gambar yang akan Anda gunakan untuk
Sedangkan pada folder font, isilah dengan font yang Anda pakai. Jika tidak memakai font
Buka file pubspec.yaml kemudian tambahkan package dan assets berikut ini :
Jangan lupa untuk menyimpan perubahan pada file.
Langkah 2 – Membuat Struktur Project
Pada tahap ini, buatlah folder lib dan file :
File LandingPage.dart akan berisi kode untuk bagian utama landing page. Salin kode di bawah
ini.
import ‘package:flutter/material.dart’; class LandingPage extends StatelessWidget { List pageChildren(double width) { return [ Container( width: width, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( “Unlimited Web Hosting \nIndonesia”, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 40.0, color: Colors.white), ), Padding( padding: const EdgeInsets.symmetric(vertical: 20.0), child: Text( “Layanan web hosting Indonesia terbaik dengan fitur hosting terlengkap dan dukungan support 24 jam untuk kemudahan Anda meraih kesuksesan online!”, style: TextStyle(fontSize: 16.0, color: Colors.white), ), ), MaterialButton( color: Colors.red, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(20.0))), onPressed: () {}, child: Padding( padding: const EdgeInsets.symmetric( vertical: 20.0, horizontal: 40.0), child: Text( “PILIH SEKARANG”, style: TextStyle(color: Colors.white), ), ), ) ], ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 20.0), child: Image.asset( “assets/images/lp_image.png”, width: width, ), ) ]; } @override Widget build(BuildContext context) { return LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth > 800) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: pageChildren(constraints.biggest.width / 2), ); } else { return Column( children: pageChildren(constraints.biggest.width), ); } }, ); } }
File Navbar.dart akan berisi kode untuk bagian navigation bar dari landing page. Silahkan salin
kode berikut ini.
import ‘package:flutter/material.dart’; class Navbar extends StatelessWidget { @override Widget build(BuildContext context) { return LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth > 1200) { return DesktopNavbar(); } else if (constraints.maxWidth > 800 && constraints.maxWidth < 1200) { return DesktopNavbar(); } else { return MobileNavbar(); } }, ); } } class DesktopNavbar extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 40), child: Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( “NIAGAHOSTER”, style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white, fontSize: 30), ), Row( children: [ Text( “HOSTING”, style: TextStyle(color: Colors.white), ), SizedBox( width: 30, ), Text( “CLOUD VPS”, style: TextStyle(color: Colors.white), ), SizedBox( width: 30, ), Text( “DOMAIN”, style: TextStyle(color: Colors.white), ), SizedBox( width: 30, ), Text( “BUAT WEBSITE”, style: TextStyle(color: Colors.white), ), SizedBox( width: 30, ), MaterialButton( color: Colors.pink, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(20.0))), onPressed: () {}, child: Text( “LOGIN”, style: TextStyle(color: Colors.white), ), ) ], ) ], ), ), ); } }
File main.dart berisi kode material app dan widget yang digunakan, import file LandingPage.dart dan
Navbar.dart yang sudah dibuat sebelumnya.
import ‘package:flutter/material.dart’; import ‘package:flutter_webpage/LandingPage/LandingPage.dart’; import ‘package:flutter_webpage/Navbar/Navbar.dart’; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ‘Flutter Demo Landing Page’, theme: ThemeData(primarySwatch: Colors.blue, fontFamily: “Montserrat”), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [ Color.fromRGBO(50, 20, 195, 1.0), Color.fromRGBO(36, 11, 54, 1.0) ]), ), child: SingleChildScrollView( child: Column( children: [ Navbar(), Padding( padding: const EdgeInsets.symmetric( vertical: 20.0, horizontal: 40.0), child: LandingPage(), ) ], ), ), ), ); } }
Nah, setelah struktur project dipastikan sudah dibuat dengan baik, sekarang coba jalankan
perintah flutter run -d chrome untuk melihat tampilan dari landing page yang telah Anda buat.
Langkah 3 – Build & Deploy Flutter Web App
Jika Anda ingin meng-upload aplikasi flutter web ke hosting, Anda perlu menjalankan perintah
berikut ini untuk melakukan build project :
flutter build web
Jika Anda sudah siap untuk men-deploy aplikasi web, upload semua folder dan file yang ada
pada folder build/web ke layanan hosting Anda.
- Material UI yang Baik
- Bersifat Cross Platform.
- Fast Development .
- Lebih Efisien .
- Community yang Berkembang
Penulis: Edwin Anwar