day11.md

Day 11 (Flutter Excelr)

Bottom Navigation bar

• BottomNavigationBar()
• BottomNavigationBarItem()

Bottom Navigation bar

// inside Scaffold

bottomNavigationBar: BottomNavigationBar(
    items: const [
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "home",
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: "List Screen",
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.refresh),
            label: "Random nos",
        ),
    ],
)

Working code

import 'package:flutter/material.dart';
import 'package:myapp/alert_screen.dart';
import 'package:myapp/text_input_display.dart';

class LandingScreen extends StatefulWidget {
  const LandingScreen({super.key});

  @override
  State<LandingScreen> createState() => _LandingScreenState();
}

class _LandingScreenState extends State<LandingScreen> {
  var myCurrentIndex = 0;
  var screens = [
    const LandingScreen(),
    const AlertScreen(),
    const InputScreen()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screens[myCurrentIndex],
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.amberAccent,
        iconSize: 30,
        currentIndex: myCurrentIndex, // makes icon active onTap
        onTap: (index) { // imp
          setState(() {
            myCurrentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.warning),
            label: "Alert",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.input),
            label: "Input",
          ),
        ],
      ),
    );
  }
}

Day 12 Flutter