Во Flutter вы можете реализовать панель нижнего колонтитула различными методами. Вот несколько методов с примерами кода:

Метод 1: использование виджета BottomNavigationBar

import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomeWidget(),
    ExploreWidget(),
    ProfileWidget(),
  ];
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Footer Bar Example'),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}
class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home'),
    );
  }
}
class ExploreWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Explore'),
    );
  }
}
class ProfileWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Profile'),
    );
  }
}

Метод 2: использование пользовательского виджета

import 'package:flutter/material.dart';
class FooterBar extends StatelessWidget {
  final int currentIndex;
  final ValueChanged<int> onTap;
  FooterBar({required this.currentIndex, required this.onTap});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      decoration: BoxDecoration(
        color: Colors.grey[200],
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3.0,
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconButton(
            onPressed: () => onTap(0),
            icon: Icon(Icons.home),
            color: currentIndex == 0 ? Colors.blue : Colors.black,
          ),
          IconButton(
            onPressed: () => onTap(1),
            icon: Icon(Icons.explore),
            color: currentIndex == 1 ? Colors.blue : Colors.black,
          ),
          IconButton(
            onPressed: () => onTap(2),
            icon: Icon(Icons.person),
            color: currentIndex == 2 ? Colors.blue : Colors.black,
          ),
        ],
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Footer Bar Example'),
      ),
      body: Center(
        child: Text('Page ${_currentIndex + 1}'),
      ),
      bottomNavigationBar: FooterBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
      ),
    );
  }
}

В приведенных выше примерах кода метод 1 демонстрирует использование виджета BottomNavigationBar, предоставленного Flutter, а метод 2 демонстрирует пользовательскую реализацию панели нижнего колонтитула с использованием Containerи виджеты IconButton.