Tuesday, February 1, 2022

Flutter Bottom Navigation Bar Cupertino APP

Selamat datang di blog ali-mahdali.blogstpot.com, kali ini penulis memposting artikel yang berjudul Flutter Bottom Navigation Bar Cupertino APP yang mana artikel ini dapat kalian akses melalui alamat : https://ali-mahdali.blogspot.com/2022/02/flutter-bottom-navigation-bar-cupertino.html,
tanpa basa-basi yuk disimak artikelnya dibawah ini. Selamat membaca





import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      title: 'PPS IAI AL-QOLAM',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void _show(BuildContext ctx, {String judul = "pilihan"}) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => CupertinoActionSheet(
              title: customText("Menu $judul"),
              message: Text('Silahkan pilih menu $judul dibawah ini!'),
              actions: [
                CupertinoActionSheetAction(
                    onPressed: () {
                      _close(ctx);
                      _showSub(ctx,judul: "sub pertama");
                    },
                    child: const Text('Pilihan 1')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Pilihan 2')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Pilihan 3')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Pilihan 4')),
              ],
              cancelButton: CupertinoActionSheetAction(
                onPressed: () => _close(ctx),
                child: const Text('Tutup'),
              ),
            ));
  }

  void _showSub(BuildContext ctx, {String judul = "pilihan"}) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => CupertinoActionSheet(
              title: customText("Menu $judul"),
              message: Text('Silahkan pilih menu $judul dibawah ini!'),
              actions: [
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #1')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #2')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #3')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #4')),
              ],
              cancelButton: CupertinoActionSheetAction(
                onPressed: () => _close(ctx),
                child: const Text('Tutup'),
              ),
            ));
  }

  void _close(BuildContext ctx) {
    Navigator.of(ctx).pop();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          backgroundColor: CupertinoColors.darkBackgroundGray,
          activeColor: CupertinoColors.activeBlue,
          inactiveColor: CupertinoColors.activeBlue,
          items: [
            BottomNavigationBarItem(
              icon: CupertinoButton(
                  child: customText("Home", isbool: false, ukuran: 16),
                  onPressed: () {
                    print("home");
                  }),
            ),
            BottomNavigationBarItem(
              icon: CupertinoButton(
                child: customText("Dosen", isbool: false, ukuran: 16),
                onPressed: () => _show(context, judul: "dosen"),
              ),
            ),
          ],
        ),
        tabBuilder: (context, index) {
          return CupertinoPageScaffold(
              backgroundColor: CupertinoColors.lightBackgroundGray,
              navigationBar: const CupertinoNavigationBar(
                brightness: Brightness.light,
                middle: Text('PPS IAI AL-QOLAM'),
              ),
              child: Center(
                child: Column(
                  children: [
                    CupertinoButton(
                      child: const Text('Open Action Sheet'),
                      onPressed: () => _show(context),
                    ),
                  ],
                ),
              ));
        });
  }

  Widget customText(String kata,
      {bool isbool = true,
      double ukuran = 18,
      Color? warna = CupertinoColors.darkBackgroundGray}) {
    return Text(kata,
        style: TextStyle(
            color: warna != null ? CupertinoColors.lightBackgroundGray : warna,
            fontWeight: isbool ? FontWeight.bold : FontWeight.w100,
            fontSize: ukuran));
  }
}

Sebelum melanjutkan membaca artikel ini, berikut adalah artikel yang berkaitan dengan judul artikel Flutter Bottom Navigation Bar Cupertino APP :
ok, silahkan lanjut membaca.

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


EmoticonEmoticon