Filled Icons for the Open Tab

Part of the Lists and Screens section of Coddy's Flutter journey. Lesson 24 of 33.

Look at the tab bars of the apps on your phone: the open tab often has a filled icon and the others an outline. It shows where you are at a glance.

A NavigationDestination takes two icons: icon: for when the tab is not selected, and selectedIcon: for when it is.

NavigationDestination(
  icon: Icon(Icons.home_outlined),
  selectedIcon: Icon(Icons.home),
  label: 'Home',
)

Many Material icons come in both styles: Icons.home and Icons.home_outlined, Icons.favorite and Icons.favorite_border, Icons.settings and Icons.settings_outlined.

Challenge

Easy

Every tab shows a filled icon, open or not. Give each tab an outlined icon:, and the filled one as its selectedIcon:.

Home: Icons.home_outlined and Icons.home
Favorites: Icons.favorite_border and Icons.favorite
Settings: Icons.settings_outlined and Icons.settings

Try it yourself

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int index = 0;
  final List<Widget> pages = const [
    Center(child: Text('Home page')),
    Center(child: Text('Favorites page')),
    Center(child: Text('Settings page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My App')),
      body: pages[index],
      bottomNavigationBar: NavigationBar(
        selectedIndex: index,
        onDestinationSelected: (int i) {
          setState(() {
            index = i;
          });
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.favorite), label: 'Favorites'),
          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}