APP BAR (MOBILE PROGRAMMING)

- September 17, 2021

APP BAR (Mobile Programming)

   Assalamualaikum Wr Wb, Kembali lagi di blog saya. Pada kesempatan kali ini saya akan membahas tentang cara membuat APP BAR pada Android. Sebelum kita masuk ke dalam pembahasan teman-teman harus tahu tentang App Bar terlebih dahulu. Apakah yang di maksud dengan App Bar? App Bar adalah Elemen navigasi konsisten yang menjadi standar aplikasi android modren. Setelah itu pastikan kamu sudah terhubung dengan jaringan dan memiliki koneksi jaringan yang stabil serta hubungkan Hp kamu dengan laptop dan akttifkan Usb Debuggingnya.
Adapun langkah-langkah dalam pembuatan App Bar sebagai berikut:

1. Buka Aplikasi Visual Studio Code

   2. Setelah kita buka aplikasi Visual Studionya maka akan muncul jendela tampilan baru. Kemudian kita klik pada View > Command Pallete > Flutter : New Aplication Project > Ok.

   3. Selanjutnya, setelah kita tekan Ok maka kita akan di arahkan pada folder tempat penyimpanan, kemudian kita pilih sesuai dengan keinginan kita dimana kita akan menyimpan file yang kita buat tadi.

   4. Setelah itu kita akan membuat nama aplikasi kita, Namanya bisa kita bikin sesuai dengan keinginan kita.

   5. Kemudian kita klik di main.dart setelah itu kita akan menghapus semua Sourcode yang ada disana sehingga nantiknya tampilanya akan menjadi kosong seperti ini.

   6. Setelah itu, kita masukan Sourcode yang baru, berikut ini merupakan Sourcodenya.

import 'package:flutter/material.dart';

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

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Row is a horizontal, linear layout.
      child: Row(
        // <Widget> is the type of items in the list.
        children: [
          const IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child
          // to fill the available space.
          Expanded(
            child: title,
          ),
          const IconButton(
            icon: Icon(Icons.search),
            // tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece
    // of paper on which the UI appears.
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              'Welcome To My Application',
              style: Theme.of(context) //
                  .primaryTextTheme
                  .headline6,
            ),
          ),
          const Expanded(
            child: Center(
              child: Text('Hello sayang abang!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      title: 'Daron', // used by the OS task switcher
      home: SafeArea(
        child: MyScaffold(),
      ),
    ),
  );
}

   7. Kemudian kita masuk kedalam Widger_test_dart kita komentari semua Sourcode yang ada disana.

   8. Kita kembali lagi ke bagian Main.dart, setelah itu kita Run\Debugging kan > Kita tunggu sebentar > maka nantiknya tampilanya itu akan berubah menjadi seperti ini.

Mungkin hanya itu yang dapat saya sampaikan pada blog kali ini, Terima kasih:)
Asssalamualaikum Wr.Wb

Komentar