App Bar Dan Menu pada program Hallo Dunia!!!!
Membuat App Bar dan Menu Pada Mobile Programming (Hallo Dunia)
Hallo Sobat Coderrs!!!
Kembali lagi kita bahas perkembangan dari progrram sebelumnya mengenai program Hallo Dunia sebelumnya yang pada kesempatan kali ini kita akan mengembangkan nya membuat menu App dan Menu Bar.
Langsung saja kita masuk ke Pembahasannya
langkah pertama adalah membuka sourcecode sebelumnya tentang Hallo Dunia dan kita perbaharui source code nya dengan source code seperti dibawah ini.
SourceCode Menu App dan Bar
import 'package:flutter/material.dart';
class AplikasiKu extends StatelessWidget {
const AplikasiKu({required this.title, Key? key}) : super(key: key);
final Widget title;
Widget build(BuildContext context) {
return Container(
height: 56.0,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(color: Colors.red[500]), //menampilkan box yang
//digunakan dibelakang tombol dan teks menu
child: Row(
children: [
const IconButton( //source untuk Ikon
icon: Icon(Icons.menu), //menampilkan tombol Icon Menu
tooltip: 'Menu Navigasi',
onPressed: null,
),
Expanded(
child: title,
),
],
),
);
}
}
class MyScaffold extends StatelessWidget {
const MyScaffold({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
AplikasiKu(
title: Text( //source untuk menginputkan text ke app bar
'Menu',
style: Theme.of(context).primaryTextTheme.headline6,
),
),
const Expanded(
child: Center( //posisi teks saat tampil
child: Text('Hallo Dunia'), //teks yang akan ditampilkan di smartphone
),
),
],
),
);
}
}
void main() {
runApp( //source yang digunakan untuk menampilkan hasil dari aplikasi yang dibuat
const MaterialApp(
title: 'AplikasiKu',
home: SafeArea(
child: MyScaffold(),
),
),
);
}
sebelum melakukan Debug and Run pada Smarthphone atau Device yang digunakan masuk ke menu Developer atau opsi Pengemmbang kemudian aktifkan dan pilih opsi USB Debugging aktifkan juga dan izinkan akses seperti gambar berikut ini
kemudian pilih device yang akan digunakan untuk mengeluarkan Output/Hasil dari SourceCode yang dibuat. Kemudian pilih Menu Debug and Run dan tunggu hasil dari program yang sedang berjalan sampai menampil di smarthphone atau Android Emulator masuk ke aplikasi yanng dibuat.
Cukup sekian pembahasan kali ini wasssalamualaikum Wr.Wb
Komentar
Posting Komentar