Tutorial Flutter : Membuat Widget Appbar

Tema pembahasan tutorial flutter kali ini akan berkenaan bagaimana cara menggunakan salah satu widget pada flutter. Widget yang kita gunakan dalam pembahasan kali ini adalah 'AppBar'.

Widget AppBar pada flutter akan ditampilkan sebagai widget yang berada posisi di atas layar dana memiliki ketinggian tetap seperti yang tampak pada gambar di bawah ini :

Contoh.1 Flutter AppBar

• 1. Create project flutter dengan nama 'showappbar'. Pada kasus ini project tersebut akan disimpan di drive C:\FlutterApss.
  Pilih terminal pada IDE VSCode, kemudian ketikkan command berikut :
  

  PS C:\FlutterApp\flutter create showappbar



• Pada bagian lib>main.dart, gantikan dengan kode program seperti berikut :
  

  import 'dart:html';
  
  import 'package:flutter/material.dart';
  
  void main() => runApp(TampilkanAppBar());
  
  class TampilkanAppBar extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
              appBar: AppBar(
        title: Text("Ini adalah Widget AppBar"),
      )));
    }
  }

• Kemudian jalankan project yang telah dibuat dengan mengetikkan perintah berikut :
  

  PS C:\FlutterApps\showappbar> flutter run

  
  Ketika muncul informasi seperti berikut :
  

  Multiple devices found:
  Chrome (web) • chrome • web-javascript • Google Chrome 110.0.5481.104
  Edge (web)   • edge   • web-javascript • Microsoft Edge 110.0.1587.50
  [1]: Chrome (chrome)
  [2]: Edge (edge)
  Please choose one (To quit, press "q/Q"):

  
  Silahkan pilih [1] jika ingin dijalan via browser chrome. Dalam kasus ini kita pilih [1].
• Hasilnya ditunjukkan oleh gambar di bawah ini