Showing posts with label Flutter. Show all posts
Showing posts with label Flutter. Show all posts

Tuesday, February 1, 2022

Flutter Bottom Navigation Bar Cupertino APP

      Comment  




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));
  }
}

Flutter Custom Bottom Navigation Bar With Popup

      Comment  

 





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));
  }
}

Thursday, July 15, 2021

FLUTTER APP DRAWER THEME | DYNAMIC & STATIC LISTTILE

      Comment  

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);
  }
}









Wednesday, July 14, 2021

MEMBUAT WIDGET SEARCHBLE LISTVIEW | FLUTTER

      Comment  

kali ini abang akan memberikan script membuat widget listview yang langsung bisa di filter menggunakan fitur ValueListenableBuilder, berikut ini penampakannya:




berikut ini scriptnya:

Widget searchableUsersWidget() {
  List<Map> users = [
    {'name': 'James', 'tel': '9010'},
    {'name': 'Michael', 'tel': '9011'},
    {'name': 'Jane', 'tel': '9013'},
  ];
  ValueNotifier<List<Map>> filtered = ValueNotifier<List<Map>>([]);
  TextEditingController searchController = TextEditingController();
  FocusNode searchFocus = FocusNode();
  bool searching = false;
  return ValueListenableBuilder<List>(
      valueListenable: filtered,
      builder: (context, value, _) {
        return Container(
          margin: const EdgeInsets.only(top: 10),
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(20)),
            boxShadow: [
              BoxShadow(
                color: Colors.white.withOpacity(0.5),
                spreadRadius: 4,
                blurRadius: 6,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          child: Column(
            children: [
              Container(
                margin: const EdgeInsets.all(8),
                child: Card(
                  child: ListTile(
                    leading: const Icon(Icons.search),
                    title: TextField(
                      controller: searchController,
                      decoration: const InputDecoration(
                          hintText: 'Search', border: InputBorder.none),
                      onChanged: (text) {
                        if (text.isNotEmpty) {
                          searching = true;
                          filtered.value = [];
                          for (var user in users) {
                            if (user['name']
                                    .toString()
                                    .toLowerCase()
                                    .contains(text.toLowerCase()) ||
                                user['tel'].toString().contains(text)) {
                              filtered.value.add(user);
                            }
                          }
                        } else {
                          searching = false;
                          filtered.value = [];
                        }
                      },
                    ),
                    trailing: IconButton(
                      icon: const Icon(Icons.cancel),
                      onPressed: () {
                        searchController.clear();
                        searching = false;
                        filtered.value = [];
                        if (searchFocus.hasFocus) searchFocus.unfocus();
                      },
                    ),
                  ),
                ),
              ),
              Expanded(
                child: ListView.builder(
                    itemCount: searching ? filtered.value.length : users.length,
                    itemBuilder: (context, index) {
                      final item =
                          searching ? filtered.value[index] : users[index];
                      return ListTile(
                        title: Text(item['name']),
                        subtitle: Text(item['tel']),
                        onTap: () {},
                      );
                    }),
              ),
            ],
          ),
        );
      });
}

Saturday, July 10, 2021

MEMBUAT HALAMAN TAMPIL DETAIL | FLUTTER

      Comment  

kali ini abang akan memberikan scrip halaman master detail di bahasa pemrograman flutter, langsung saja, berikut ini tampilannya

ini script nya:

import 'package:flutter/material.dart';

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: const Neraca(),
    );
  }
}

class Neraca extends StatelessWidget {
  final String datanya = 'DATA INI DARI VARIABLE';

  const Neraca({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Halaman Detail"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.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(
                                kirimData: datanya,
                              )),
                    );
                  },
                  icon: const Icon(Icons.arrow_circle_up))
            ],
          ),
        ));
  }
}

class DetailPage extends StatelessWidget {
  const DetailPage({Key? key, required this.kirimData}) : super(key: key);

  final String kirimData;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Halaman Detail"),
        ),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
              Text('data yang dikirim adalah : \n' + kirimData),
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text('Go back!'),
              ),
            ])));
  }
}

Thursday, July 8, 2021

FLUTTER | APP DRAWER DYNAMIC NAVIGATION

      1 comment  

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),
    );
  }
}