Belajar Flutter - Membuat Bottom Navigation Icon Menggunakan Flutter
Jurnalcode.com

Belajar Flutter - Membuat Bottom Navigation Icon Menggunakan Flutter


Jurnalcode : Hallo kita lanjut lagi tutorial mengenai flutter ya .. kali ini saya akan membuat sebuah tutorial yang membahas tentang navigation nah navigation kali ini yang kita bahas adalah Bottom Navigation Icon Menggunakan Flutter.

Bottom Navigation merupakan Material Widget yang ditampilkan di bagian bawah aplikasi untuk memilih di antara Beberapa Menu. Bottom Navigation terdiri dari beberapa item dalam bentuk label teks, ikon, atau keduanya, diletakkan di atas selembar bahan. Ini menyediakan navigasi cepat antara tampilan tingkat atas suatu aplikasi.

Baiklah langsung saja kita praktek kan bagaimana cara membuat Bottom Navigation . Pertama silahkan buka VSCode kemudian edit Main.dart dan isikan code berikut

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Jurnalcode.com';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Halaman Beranda',
      style: optionStyle,
    ),
    Text(
      'Halaman Halaman 2',
      style: optionStyle,
    ),
    Text(
      'Halaman Halaman 3',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Jurnalcode.com'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Beranda'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Halaman 2'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('Halaman 3'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}



Silahkan Dicoba jika ada kendala silahkan komentar dibawah ya .. terimkasih

.

Ayo Komentar