Selamat datang di blog ali-mahdali.blogstpot.com, kali ini penulis memposting artikel yang berjudul FLUTTER | APP DRAWER DYNAMIC NAVIGATION yang mana artikel ini dapat kalian akses melalui alamat : https://ali-mahdali.blogspot.com/2021/07/flutter-app-drawer-dynamic-navigation.html,
tanpa basa-basi yuk disimak artikelnya dibawah ini. Selamat membaca
kali ini abang akan membagikan skrip membuat app drawer secara dinamis, langsung saja berikut ini tampilan gambarnya
ini skripnya
import 'package:flutter/material.dart';
class DrawerItem {
String title;
IconData icon;
bool enable;
Widget conten;
DrawerItem(this.title, this.icon, this.enable, this.conten);
}
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',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
final List<DrawerItem> drawerItems = [];
HomePage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return HomePageState();
}
}
class HomePageState extends State<HomePage> {
int _selectedDrawerIndex = 0;
_getDrawerItemWidget(int pos) {
return widget.drawerItems[pos].conten;
}
_onSelectItem(int index) {
setState(() => _selectedDrawerIndex = index);
Navigator.of(context).pop();
}
_rebuildMenu(bool mode) {
widget.drawerItems.clear();
widget.drawerItems.add(DrawerItem(
"Dashboard",
Icons.dashboard_rounded,
true,
const Center(
child: Text('Selamat Datang'),
)));
widget.drawerItems.add(DrawerItem(
"List",
Icons.list_alt_rounded,
true,
const Center(
child: Card(
child: Text('data'),
),
)));
widget.drawerItems.add(DrawerItem(
"Disable",
Icons.disabled_by_default,
false,
const Center(
child: Card(
child: null,
),
)));
widget.drawerItems.add(DrawerItem(
"Berita",
Icons.radio,
true,
const Center(
child: Card(
child: Text('Berita'),
),
)));
widget.drawerItems.add(DrawerItem(
"Pesan",
Icons.message,
true,
Center(
child: Card(
child: ElevatedButton(
onPressed: () => _pesan(
title: 'Konfirmasi',
subtitle: 'Apakah anda akan kembali ke halaman utama?',
icon: Icons.access_alarm_outlined,
klik: null),
child: const Text('Pop Up'),
),
),
)));
}
void _pesan(
{String? title,
String? subtitle,
IconData? icon,
GestureDetector? klik}) {
showDialog(
context: context,
builder: (context) => AlertDialog(
content: SizedBox(
height: 170,
width: 70,
child: Column(
children: <Widget>[
Icon(
icon,
size: 50,
),
const Padding(padding: EdgeInsets.all(5)),
const Divider(color: Colors.black),
Text(
title.toString(),
textAlign: TextAlign.justify,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const Divider(color: Colors.black),
const Padding(padding: EdgeInsets.all(5)),
Text(
subtitle.toString(),
textAlign: TextAlign.justify,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
),
)
],
)),
actions: <Widget>[
ElevatedButton.icon(
icon: const Icon(Icons.check_circle_rounded),
label: const Text('Ok'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
Navigator.of(context).pop();
klik;
},
),
ElevatedButton.icon(
icon: const Icon(Icons.highlight_off_outlined),
label: const Text('Batal'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
);
}
Widget _appBar(String judul, String subJudul) {
String isiJudul = judul.toString();
String isiSubJudul = subJudul.toString();
//Image isiGambar = FlutterLogo();
return Container(
alignment: Alignment.centerLeft,
height: 100,
color: Theme.of(context).primaryColor,
child: ListTile(
leading: SizedBox(
height: 50.0,
width: 50.0,
child: CircleAvatar(
radius: 40,
backgroundColor: Theme.of(context).primaryColorLight,
child: const CircleAvatar(
radius: 20,
child: FlutterLogo(), //gambar app
),
)),
title: Text(
isiJudul.toString(),
style: TextStyle(
color: Theme.of(context).cardColor,
fontSize: 20,
fontWeight: FontWeight.w900),
),
subtitle: Text(isiSubJudul.toString(),
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w100)),
));
}
List<Widget> createMenu() {
List<Widget> drawerOptions = [];
bool isSelected = false;
for (var i = 0; i < widget.drawerItems.length; i++) {
var d = widget.drawerItems[i];
if (_selectedDrawerIndex == i) {
isSelected = true;
} else {
isSelected = false;
}
drawerOptions.add(daftarMenu(
judul: d.title,
ikon: d.icon,
terpilih: isSelected,
enable: d.enable,
fungsi: () => _onSelectItem(i)));
}
return drawerOptions;
}
Widget daftarMenu(
{String? judul,
bool enable = false,
IconData? ikon,
GestureTapCallback? fungsi,
bool terpilih = false}) {
return Ink(
color:
terpilih ? Theme.of(context).primaryColorLight : Colors.transparent,
child: ListTile(
leading: Icon(
ikon,
color: Theme.of(context).primaryColorDark,
),
title: Text(
judul.toString(),
style: TextStyle(
color: Theme.of(context).primaryColorDark,
fontWeight: terpilih ? FontWeight.bold : FontWeight.w100),
),
trailing: Icon(
Icons.arrow_right_rounded,
color: Theme.of(context).primaryColorDark,
),
selected: terpilih,
enabled: enable,
onTap: fungsi));
}
@override
Widget build(BuildContext context) {
if (widget.drawerItems.isEmpty) {
setState(() {
_rebuildMenu(true);
});
}
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(color: Theme.of(context).cardColor),
title: Row(children: <Widget>[
Text(
widget.drawerItems[_selectedDrawerIndex].title,
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Theme.of(context).cardColor),
)
]),
),
drawer: Drawer(
child: Column(
children: <Widget>[
_appBar('Menu App', 'Tampilan menu keren'),
Column(children: createMenu()),
],
),
),
body: _getDrawerItemWidget(_selectedDrawerIndex),
);
}
}
Terimakasih atas kunjungan Anda dan Karena telah sudi membaca artikel yang berjudul FLUTTER | APP DRAWER DYNAMIC NAVIGATION.Tak Lengkap Rasanya Jika Kunjungan Anda di Blog ini Tanpa Meninggalkan Komentar, untuk Itu Silahkan Berikan Kritik dan saran Pada Kotak Komentar di bawah. Anda boleh menyebarluaskan atau mengcopy artikel FLUTTER | APP DRAWER DYNAMIC NAVIGATION ini jika memang bermanfaat bagi anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih, Happy Blogging :)
Jammin' Jars 2 online slot at JCMH - Mecca - JTM Hub
ReplyDeleteThe Jammin' 상주 출장안마 Jars 2 video slot is a 7 reel, 구미 출장안마 7 row video slot. The 군포 출장샵 96.51% RTP is 96.53% 남원 출장샵 which is just above the 밀양 출장마사지 96.51% of the original game! It has a high volatility