Monday, July 5, 2021

Membuat Navigasi Drawer | Flutter

Selamat datang di blog ali-mahdali.blogstpot.com, kali ini penulis memposting artikel yang berjudul Membuat Navigasi Drawer | Flutter yang mana artikel ini dapat kalian akses melalui alamat : https://ali-mahdali.blogspot.com/2021/07/membuat-navigasi-drawer-flutter.html,
tanpa basa-basi yuk disimak artikelnya dibawah ini. Selamat membaca

Kali ini abang akan membagikan skrip bahasa pemrograman flutter yang berfungsi untuk membuat navigasi halaman atau app drawer, skrip ini memuat  tampilan dinamis, statis data, dan detail data kembali


langsung saja, berikut ini skripnya:

// ignore_for_file: use_key_in_widget_constructors

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Keykey}) : super(keykey);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title'Flutter Demo',
      debugShowCheckedModeBannerfalse,
      themeThemeData(
        primarySwatchColors.teal,
      ),
      homeHomePage(),
    );
  }
}

class DrawerItem {
  String title;
  IconData icon;
  DrawerItem(this.titlethis.icon);
}

class HomePage extends StatefulWidget {
  final drawerItems = [
    DrawerItem("Dashboard"Icons.home),
    DrawerItem("Halaman Data Detail"Icons.money),
  ];

  HomePage({Keykey}) : super(keykey);

  @override
  State<StatefulWidgetcreateState() {
    return HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  bool isLogin = false;

  int _selectedDrawerIndex = 0;
  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return const CounterPage(
          title'Hitung',
        );
      case 1:
        return HalamanDataDetail();

      default:
        return const Text("Error");
    }
  }

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

  @override
  Widget build(BuildContext context) {
    List<WidgetdrawerOptions = [];
    for (var i = 0i < widget.drawerItems.lengthi++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(ListTile(
        leadingIcon(d.icon),
        titleText(d.title),
        selectedi == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    return Scaffold(
      appBarAppBar(
        titleText(widget.drawerItems[_selectedDrawerIndex].title),
      ),
      drawerDrawer(
        childColumn(
          children: <Widget>[
            Container(
                height100,
                colorColors.teal,
                childconst Center(
                  childText(
                    "Aplikasi Keuangan",
                    styleTextStyle(fontSize15colorColors.white),
                    textAlignTextAlign.center,
                  ),
                )),
            Column(childrendrawerOptions)
          ],
        ),
      ),
      body_getDrawerItemWidget(_selectedDrawerIndex),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({Keykeyrequired this.title}) : super(keykey);

  final String title;

  @override
  State<CounterPagecreateState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bodyCenter(
        childColumn(
          mainAxisAlignmentMainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'HALAMAN DINAMIS, TEKAN TOMBOL UNTUK MERUBAH',
            ),
            Text(
              '$_counter',
              styleTheme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButtonFloatingActionButton(
        onPressed_incrementCounter,
        tooltip'Increment',
        childconst Icon(Icons.add),
      ),
    );
  }
}

class HalamanDataDetail extends StatelessWidget {
  final String datanya = 'DATA INI DARI VARIABLE';
  @override
  Widget build(BuildContext context) {
    return Center(
      childColumn(
        mainAxisAlignmentMainAxisAlignment.center,
        children: <Widget>[
          Text(datanya.toString()),
          const Text(
              'Halaman informasi data static tanpa State, data variable\nTekan tombol dibawah untuk informasi detail data'),
          IconButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => DetailPage(
                            kirimDatadatanya,
                          )),
                );
              },
              iconconst Icon(Icons.arrow_circle_up))
        ],
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  const DetailPage({Keykeyrequired this.kirimData}) : super(keykey);

  final String kirimData;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBarAppBar(
          titleconst Text("Halaman Detail"),
        ),
        bodyCenter(
            childColumn(
                mainAxisAlignmentMainAxisAlignment.center,
                children: <Widget>[
              Text('data yang dikirim adalah : \n' + kirimData),
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                childconst Text('Go back!'),
              ),
            ])));
  }
}

skrip ini sudah support flutter terbaru, yakni fitur null safety
Sebelum melanjutkan membaca artikel ini, berikut adalah artikel yang berkaitan dengan judul artikel Membuat Navigasi Drawer | Flutter :
ok, silahkan lanjut membaca.

Terimakasih atas kunjungan Anda dan Karena telah sudi membaca artikel yang berjudul Membuat Navigasi Drawer | Flutter.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 Membuat Navigasi Drawer | Flutter ini jika memang bermanfaat bagi anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih, Happy Blogging :)


EmoticonEmoticon