Flutter adalah framework dengan bahasa pemrograman Dart yang dikembangkan Google. Meskipun awalnya hanya digunakan untuk membuat aplikasi mobile (Android dan iOS), framework ini sudah mendukung pengembangan aplikasi berbasis web.
Lalu, bagaimana cara membuat halaman web dengan Flutter ya?
Nah, Anda sudah menemukan artikel yang tepat nih! Kali ini akan membahas tentang tutorial membuat aplikasi web dengan Flutter. Panduan ini tentunya cocok bagi Anda yang baru mengenal Flutter Web dan ingin mempelajarinya lebih dalam.
Cara Membuat Web dengan Flutter
Sebelum memulai tutorial membuat halaman web dengan flutter, pastikan Anda sudah menginstall Visual Studio Code sebagai IDE pada komputer Anda.
Jika Visual Studio Code sudah terinstall, Anda dapat langsung membuat aplikasi web yang Anda inginkan. Yuk, langsung saja pelajari langkah-langkahnya!
1. Instalasi Flutter SDK
Pertama, pergi ke halaman download flutter dan pilih sistem operasi yang Anda gunakan. Pada tutorial kali ini, kami menggunakan Windows.
Kemudian, klik tombol installer .zip seperti pada gambar di bawah ini untuk mendownload file.
Kedua, ekstrak file .zip yang telah di download. Lalu pindahkan hasil ekstraksi ke drive C. Jangan letakan di dalam folder C:\Program Files\, karena akan menimbulkan masalah terkait dengan hak akses.
Ketiga, tambahkan path pada system environment dengan cara ketik “environment” pada kolom pencarian di Windows. Lalu, masuk ke pengaturan Edit the system environment variables.
Selanjutnya, klik tab Advanced dan pilih Environment Variables.
Pilih bagian Path, kemudian klik tombol Edit.
Klik tombol New untuk menambahkan path. Arahkan path ke folder bin yang terdapat pada folder flutter. Jangan lupa klik OK untuk menyimpan perubahan.
Kelima, lakukanlah restart system.
2. 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.
Namun, jika Dart belum terinstall, klik tombol Install dan tunggu proses instalasinya.
3. Setup di Visual Studio Code
Anda perlu melakukan setup di Visual Studio Code agar flutter dapat dijalankan. 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.
Aplikasi yang dibuat menggunakan Flutter 2.x secara otomatis telah mendukung pengembangan aplikasi web pada channel stable. Oleh karena itu, silahkan jalankan perintah berikut ini pada terminal VS Code Anda :
flutter channel stable
Nah, nanti outputnya akan seperti ini :
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 untuk 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.
4. Menjalankan Aplikasi Web
Anda dapat membuat project flutter web pertama Anda dengan menjalankan perintah sebagai berikut :
flutter create app_pertama
Pada perintah diatas, app_pertama merupakan nama project baru yang dibuat. Anda dapat menggantinya sesuai dengan nama project Anda sendiri, ya.
Jika project baru telah berhasil dibuat, Anda akan mendapatkan pesan All done! seperti pada gambar berikut ini.
Agar aplikasi web dapat dijalankan, Anda harus masuk ke direktori project yang baru dibuat dengan menggunakan perintah :
cd app_pertama
Saat pertama kali membuat project baru, folder project Anda akan diisi oleh folder-folder dan file yang dibutuhkan dalam pengembangan aplikasi web dengan flutter. Berikut ini merupakan struktur project flutter web :
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, sekarang ayo coba membuat halaman web pertamamu!
5. Membuat Halaman Web dengan Flutter
Pada panduan ini, kami membuat halaman landing page menggunakan flutter web sebagai contoh. Nantinya hasilnya akan seperti ini :
Berikut ini langkah membuatnya:
Langkah 1 – Membuat Folder Assets
Folder Assets berfungsi untuk menyimpan assets yang akan Anda gunakan dalam membuat aplikasi web. Assets yang kami gunakan untuk membuat landing page ini adalah assets berupa gambar dan font.
Oleh karena itu, agar terlihat rapi, buatlah folder baru assets/image dan assets/font di dalam 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 juga tidak apa-apa kok memakai font default saja. Nah, struktur foldernya akan seperti ini :
Selanjutnya, silahkan buka file pubspec.yaml kemudian tambahkan package dan assets berikut ini :
name: flutter_webpage
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- assets/images/lp_image.png
fonts:
- family: Montserrat
fonts:
- asset: assets/fonts/Montserrat-Bold.ttf
- asset: assets/fonts/Montserrat-Regular.ttf
Jangan lupa tekan tombol Ctrl + S pada keyboard Anda untuk menyimpan perubahan pada file.
Langkah 2 – Membuat Struktur Project
Pada tahap ini, silahkan buatlah folder dan file di dalam folder lib dengan struktur seperti pada gambar di bawah ini :
File LandingPage.dart akan berisi kode untuk bagian utama landing page. Anda dapat menyalin dan menggunakan kode di bawah ini.
import 'package:flutter/material.dart';
class LandingPage extends StatelessWidget {
List<Widget> pageChildren(double width) {
return <Widget>[
Container(
width: width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
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: <Widget>[
Text(
"NIAGAHOSTER",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 30),
),
Row(
children: <Widget>[
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, jangan lupa untuk 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: <Widget>[
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
Perintah tersebut akan membuat folder baru bernama build seperti pada gambar di bawah ini.
Jika Anda sudah siap untuk men-deploy aplikasi web, upload semua folder dan file yang ada pada folder build/web ke layanan hosting Anda.
Kenapa Menggunakan Flutter?
Flutter adalah framework yang kini banyak digunakan, termasuk oleh nama besar seperti Google, Alibaba, BMW, dan Tencent.
Anda juga bisa menggunakan Flutter untuk mengembangkan aplikasi yang diinginkan berkat beberapa keunggulan yang dimilikinya, antara lain :
- Memiliki Material UI yang Baik: Tersedia widget cantik yang dapat disesuaikan dengan mudah, tampilan desainnya pun sangat bagus. Anda akan lebih mudah untuk membuat aplikasi dengan tampilan lebih menarik,
- Bersifat Cross Platform : Ibaratnya, dengan sekali coding, Anda dapat membuat aplikasi yang dapat berjalan di berbagai platform menggunakan Flutter.
- Mendukung Fast Development : Menawarkan usability yang baik serta kecepatan penulisan kode dalam proses pengembangan. Selain itu, fitur hot reload memungkinkan Anda untuk melihat langsung efek perubahan yang terjadi dari perubahan kode tanpa melakukan compile ulang.
- Lebih Efisien : Dengan kecepatan dan kemudahan yang ditawarkan, pengembangan aplikasi menggunakan Flutter lebih murah dan hemat tenaga. Ini tentu cukup bermanfaat bagi bisnis yang ingin membuat aplikasi dengan dana terbatas.
- Memiliki Community yang Berkembang : Semakin populer, komunitas Flutter juga semakin berkembang pesat. Ini akan memudahkan Anda untuk berdiskusi lebih jauh tentang perkembangan framework ini.
No comments:
Post a Comment