Flutter Web : Tutorial Membuat Web Dengan Flutter

Artikel kali ini kita akan membahas tentang bagaimana cara mengimplementasikan web pada flutter. sebagaimana yang telah kita ketahui bahwa flutter salah satu framework yang menyediakan fasilitas untuk membuat aplikasi berbasis web dengan menggunakan satu code yaitu Dart. yang perlu di persiapkan adalah menginstall flutter di komputer.

Set up

Jalankan perintah ini di terminal atau command line kita dan ubah ke channel master , lalu mengaktifkan dukungan web yang disediakan oleh flutter SDK :

$ flutter channel

Flutter Channel Stable to Flutter Channel Master

tampilan default flutter channel akan mengarahkan ke channel stable, sekarang kita ubah ke flutter channel master dengan menggunakan perintah :

$ flutter channel master

Flutter Upgrade

setelah itu kita akan mengupgrade flutter dengan menggunakan perintah flutter upgrade

$ flutter upgrade

Flutter config –enable-web

langkah berikut mengaktifkan dukungan web pada flutter, dengan menggunakan perintah :

flutter config --enable-web

Flutter devices

langkah berikutnya kita akan cek dengan menggunakan perintah flutter devices

Membuat Project Flutter Web

untuk membuat project baru pada flutter web, tidak jauh berbeda dengan membuat project flutter pada mobile. disini saya akan menggunakan IDE Visual Code Studio untuk test flutter web apakah berjalan dengan sempurna atau tidak. dan mengubah code bawaan dari flutter, menjadi seperti ini :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('flutter web'),
      ),
      body: new Center(
        child: new Text(
          'Assallamualaikum Web Flutter',
          style: new TextStyle(
            fontSize: 20.0,
          ),
        ),
      ),
    );
  }
}

RUN

langkah berikutnya adalah menjalankan aplikasi dengan menggunakan perintah :

flutter run -d chrome

Output :

Sumber :

https://flutter.dev/web
https://flutter.dev/docs/get-started/web

#Jabar Bermasker–JabarBerbagiMotivasiKreatif
#JabarBermaskerChallenge
#JabarBermaskerChallenge_Blog/Artikel
#KeepCenghar
#JabarSemangatBDR
#JabarBahagiaBDR
#sahabatikomdik