Tuesday, February 1, 2022

Flutter Custom Bottom Navigation Bar With Popup

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

 





import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      debugShowCheckedModeBanner: false,
      home: AplikasiNavBar(),
    );
  }
}

class AplikasiNavBar extends StatefulWidget {
  @override
  _AplikasiNavBarState createState() => _AplikasiNavBarState();
}

class _AplikasiNavBarState extends State<AplikasiNavBar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Bottom Navigasi"),
        ),
        body: const Center(
          child: Text("Tab Index yang aktif", style: TextStyle(fontSize: 16)),
        ),
        bottomNavigationBar: BottomAppBar(
            child: Container(
          height: 50,
          margin: const EdgeInsets.only(left: 20.0, right: 20.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              TextButton(
                onPressed: () {
                  print("home");
                },
                child: customText("home"),
              ),
              PopupMenuButton(
                child:  customText("dosen"),
                onSelected: (value) {
                  print(value);
                },
                itemBuilder: (context) => [
                  const PopupMenuItem(
                    child: Text("youtube"),
                    value: "yutub",
                  ),
                  const PopupMenuItem(
                    child: Text("blogger"),
                    value: "blogger",
                  ),
                ],
              ),
              TextButton(
                onPressed: () {
                  print("mahasiswa");
                },
                child: customText("mahasiswa"),
              ),
              PopupMenuButton(
                child: customText("lain-lain"),
                onSelected: (value) {
                  print(value);
                },
                itemBuilder: (context) => [
                  const PopupMenuItem(
                    child: ListTile(title:Text("bing"), leading: Icon(Icons.vibration )),
                    value: "bing",
                  ),
                  PopupMenuItem(
                    child: PopupMenuButton(
                      child:  const ListTile(title:Text("lainnya"), leading: Icon(Icons.account_box_outlined)),
                      onSelected: (value) {
                        print(value);
                      },
                      itemBuilder: (context) => [
                        const PopupMenuItem(
                          child:  ListTile(title:Text("yutub"), leading: Icon(Icons.video_library_outlined)),
                          value: "yutub",
                        ),
                        const PopupMenuItem(
                          child: Text("blogger"),
                          value: "blogger",
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        )));
  }

  Widget customText(String kata,{bool isbool=true,double ukuran=18,Color? warna=Colors.teal}) {
    return Text(kata,
        style: TextStyle(
            color: warna!=null? Theme.of(context).primaryColor:warna,
            fontWeight: isbool? FontWeight.bold : FontWeight.normal,
            fontSize: ukuran));
  }
}

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

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


EmoticonEmoticon