Tutorial

Tutorial Membuat Aplikasi Web dengan Flutter [Pemula]

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 :

  1. Menggunakan flutter pada channel stable
  2. Melakukan upgrade flutter
  3. 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.

Baca Juga : Cara Upload Website ke Hosting

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 : 

  1. 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,
  2. Bersifat Cross Platform : Ibaratnya, dengan sekali coding, Anda dapat membuat aplikasi yang dapat berjalan di berbagai platform menggunakan Flutter.
  3. 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.
  4. 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.
  5. Memiliki Community yang Berkembang : Semakin populer, komunitas Flutter juga semakin berkembang pesat. Ini akan memudahkan Anda untuk berdiskusi lebih jauh tentang perkembangan framework ini.

Sudah Siap Membuat Flutter Web Pertama Anda?

Demikianlah panduan membuat aplikasi dengan Flutter Web. Meskipun langkah yang perlu dilakukan cukup banyak, tapi cukup mudah dipraktikkan oleh pemula, kok. 

Setelah berhasil membuat Flutter di web, jangan lupa untuk mengonlinekannya agar bisa dilihat lebih banyak orang, ya. Aplikasi tersebut tentu bisa menjadi portofolio yang baik bagi Anda sebagai seorang developer, bukan?

Oh iya, Anda tidak mau kan web yang sudah dibangun dengan baik mengalami kendala tidak bisa diakses? Oleh karena itu, gunakanlah layanan hosting yang bisa diandalkan dari Niagahoster

Kenapa begitu?

Bukan hanya agar performa flutter web Anda optimal berkat dukungan kecepatan LiteSpeed server, tapi juga untuk memastikan keamanannya berkat fitur Imunify360  yang mencegah serangan malware. Dengan begitu, Anda tidak perlu khawatir lagi dengan performanya.

Semoga tutorial ini bermanfaat bagi Anda, ya. Jika ada kesulitan jangan ragu untuk berdiskusi di kolom komentar.

Nida Regita F

SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Share
Published by
Nida Regita F

Recent Posts

Apa Itu Bisnis Online? Pengertian, Jenis, dan Manfaat [Terlengkap]

Bisnis online adalah jenis bisnis yang kian hari kian diminati. Bukan hanya karena menawarkan cuan besar, menjalankan bisnis online juga…

9 hours ago

Memperbaiki Error “Sorry, This File Type Is Not Permitted For Security Reasons.”

Apakah Anda mengalami error dengan pesan notifikasi sorry this file type is not permitted for security reasons saat mengupload file?…

1 day ago

7+ Kasus Hacking yang Menggemparkan Indonesia dan Penyebabnya

Tidak perlu repot-repot ke luar negeri atau nonton film untuk mencari tahu bagaimana hacker beraksi. Indonesia sendiri ternyata adalah magnet…

2 days ago

Apa Itu Agile? Pengertian, Prinsip, Metode, dan Kelebihan [Terlengkap]

Agile adalah sebuah metode pengembangan software yang kian populer. Metode ini semakin banyak digunakan karena bisa membantu developer menciptakan software…

3 days ago

Cara Remote Database MySQL di cPanel (Terupdate)

Dalam mengelola database, Anda ternyata juga bisa melakukan remote database MySQL, lho! Hal ini memungkinkan Anda untuk mengakses database walau…

4 days ago

21+ Usaha Jasa yang Menjanjikan Profit Berlipat

Bagi Anda yang ingin memulai bisnis, membuka sebuah usaha jasa bisa jadi pilihan yang tepat. Terutama jika Anda memiliki keahlian…

5 days ago