Thursday, July 15, 2021

FLUTTER APP DRAWER THEME | DYNAMIC & STATIC LISTTILE

      , ,    Comment  

Selamat datang di blog ali-mahdali.blogstpot.com, kali ini penulis memposting artikel yang berjudul FLUTTER APP DRAWER THEME | DYNAMIC & STATIC LISTTILE yang mana artikel ini dapat kalian akses melalui alamat : https://ali-mahdali.blogspot.com/2021/07/flutter-app-drawer-theme-dynamic-static.html,
tanpa basa-basi yuk disimak artikelnya dibawah ini. Selamat membaca

kali ini abang akan membagikan skrip membuat thema warna app drawer otomatis, berikut ini penampakannya


cara ganti warnanya seperti gambar berikut ini;


berikut ini skripnya:

import 'package:flutter/material.dart';

class ItemDrawer {
  String title;
  IconData icon;
  bool enable;
  Widget tampilan;
  ItemDrawer(this.title, this.icon, this.enable, this.tampilan);
}

void main() {
  runApp(MaterialApp(
    title: "Navigation Drawer",
    debugShowCheckedModeBanner: false,
    theme: new ThemeData(
      primarySwatch: Colors.red,
    ),
    home: Dashboard(),
  ));
}

class Dashboard extends StatefulWidget {
  final drawerItems = [
    new ItemDrawer("Dashboard", Icons.rss_feed, true, Text('hallow')),
    new ItemDrawer("Pesan", Icons.add, true, Text('tambah')),
    new ItemDrawer("Contoh", Icons.list, false, Text('daftar')),
    new ItemDrawer("Datanya", Icons.list, true, Text('daftar')),
  ];

  @override
  DashboardState createState() {
    return DashboardState();
  }
}

class DashboardState extends State<Dashboard> {
  int _selectedDrawerIndex = 0;
  _getDrawerItemWidget(int pos) {
    return Center(child: widget.drawerItems[pos].tampilan);
  }

  _onSelectItem(int index) {
    setState(() => _selectedDrawerIndex = index);
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    var drawerOptions = <Widget>[];
    for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(customListile(
          judul: d.title,
          ikon: d.icon,
          indexMenu: i,
          aktif: d.enable,
          aksi: () => _onSelectItem(i)));
    }

    drawerOptions.add(customListile(
        judul: 'Tutup',
        ikon: Icons.close,
        aktif: true,
        aksi: () {
          Navigator.of(context).pop();
        }));

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
      ),
      drawer: new Drawer(
        child: new Column(
          children: <Widget>[
            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(
                    'Aplikasi keren',
                    style: TextStyle(
                        color: Theme.of(context).cardColor,
                        fontSize: 20,
                        fontWeight: FontWeight.w900),
                  ),
                  subtitle: Text('Buatan indonesia',
                      style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          fontWeight: FontWeight.w100)),
                )),
            new Padding(
              padding: EdgeInsets.fromLTRB(10, 20, 0, 0),
              child: Column(children: drawerOptions),
            )
          ],
        ),
      ),
      body: _getDrawerItemWidget(_selectedDrawerIndex),
    );
  }

  Widget customListile(
      {String? judul,
      IconData? ikon,
      bool aktif = true,
      int? indexMenu,
      GestureTapCallback? aksi}) {
    return ListTile(
        visualDensity: VisualDensity(horizontal: -1, vertical: -1),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(32), bottomLeft: Radius.circular(32))),
        contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
        selectedTileColor: Theme.of(context).primaryColorLight,
        leading: CircleAvatar(
          backgroundColor: Theme.of(context).primaryColor,
          child: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 30,
            child: Icon(
              ikon!,
              color: Theme.of(context).primaryColorDark,
            ),
          ),
        ),
        title: new Text(judul!),
        enabled: aktif,
        selected: indexMenu != null ? indexMenu == _selectedDrawerIndex : false,
        onTap: aksi);
  }
}









Sebelum melanjutkan membaca artikel ini, berikut adalah artikel yang berkaitan dengan judul artikel FLUTTER APP DRAWER THEME | DYNAMIC & STATIC LISTTILE :
 ok, silahkan lanjut membaca.

Terimakasih atas kunjungan Anda dan Karena telah sudi membaca artikel yang berjudul FLUTTER APP DRAWER THEME | DYNAMIC & STATIC LISTTILE.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 THEME | DYNAMIC & STATIC LISTTILE ini jika memang bermanfaat bagi anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih, Happy Blogging :)


EmoticonEmoticon