Cara Install Extensions dan membuat Project Flutter di VS Code

Halo semuanya! Berjumpa dengan Miniblog dari Inzaghi's Blog! Flutter merupakan Framework untuk Aplikasi Mobile yang menggunakan Bahasa Dart. Kali ini kita akan memberikan Tutorial Cara Install Plugin dan membuat Project Flutter di VS Code.

Sumber : Geeksforgeeks.org dan Bosctechlabs.com

1. Install Extension di VS Code

Pertama, bukalah Visual Studio Code terlebih dahulu. Dan ketiklah "flutter" untuk menginstal Flutter, kemudian klik "Install".

Jika sudah, maka lakukan Instalasi Extension Dart di VS Code dengan mengetik "dart", dan klik "Install".

Sekarang kita telah berhasil menambahkan Flutter dan Dart ke kode Visual studio, sekarang mari kita periksa apakah flutter sudah diinstal atau belum. Untuk ini kita akan membuka terminal baru di Visual Studio Code dan mengetikkan berikut ini di Command Line VS Code :

flutter --version

Jika semuanya baik-baik saja maka biasanya akan menampilkan versi flutter yang di-Install.

2. Setup Emulator di VS Code

Pertama, bukalah VS Code klik pada bagian Extensions. Ketiklah "emulator" dan carilah Ekstensi Android iOS Emulator, dan klik "Install".

Kemudian, klik pada bagian "Settings" dan ketiklah "emulator" untuk mengatur Emulator di VS Code.

3. Membuat Project Flutter di VS Code

Pertama, bukalah Visual Studio Code terlebih dahulu, kemudian bukalah Terminal di VS Code.

Kemudian, ketilah Perintah berikut ini :

flutter create [NamaProject]
cd [NamaProject]

Misalnya :

flutter create my_app
cd my_app

Kemudian, marilah kita buka Program Dart yang beralamatkan "lib/main.dart". Kemudan, ubahlah sedikit demi sedikit agar menjadi seperti ini :

Kode Program (main.dart) :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Hello World!\n'
              'You have pushed the button this many times:',
              textAlign: TextAlign.center,
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Untuk Kode Program-nya, sedikit hampir sama seperti pada Contoh di atas yang menggunakan Android Studio, hanya saja sedikit diubah. Jika ingin menjalankan Program Flutter sederhana, ketiklah Perintah berikut ini jika tidak memasukkan Method ke dalam Program Dart :

flutter run lib/main.dart

Sebenarnya, cukup menuliskan Perintah ini saja :

flutter run

Lalu Pilih Perangkat/Device yang Anda miliki. Misalnya saya pilih "Chrome", maka ketiklah "2".

Tunggulah beberapa saat sampai programnya jalan, jika sudah maka akan seperti ini hasilnya :

Mohon maaf apabila ada kesalahan sedikitpun pada Tutorial ini.

Terima Kasih 😀😊😘👌👍 :)