Flutter — анимированная нижняя панель навигации

Опубликовано: 9 Января, 2023

Виджет «Анимированная нижняя панель» предоставляет дополнительные ссылки для перехода между различными представлениями. Когда элемент нажат, обратный вызов onItemSelected вызывается с индексом нажатого элемента. В зависимости от количества элементов могут быть разные способы отображения этих элементов. Расположение элементов определяется значениями перечисления или списка BottomNavigationBarType .

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».

Шаг 2. Добавьте зависимость в файл pubspec.yaml .

Вы можете добавить зависимость из bash или скопировать и вставить плагин.

Из Bash: запустите эту команду

flutter pub add animated_bottom_navigation_bar

Это добавит следующий код в файл pubspec.yaml .

dependencies:
    animated_bottom_navigation_bar: ^1.0.1

Note:  when you are adding the dependency, version of plugin may changed.

Импортируйте пакет в основной файл.

import "package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart";

Шаг 3. Использование анимированной панели навигации

В теле шаблона используйте виджет AnimatedNavigationBar и задайте ему такие свойства, как значки, активный индекс, цвет фона, радиус границы и т. д.

Dart




MaterialApp( //material app with debugshowcheckedmodebanner false
     debugShowCheckedModeBanner: false,
     home: Scaffold(  //scaffold
       body: Container(),
       floatingActionButton: FloatingActionButton(
        
           child: Icon(Icons.home_max_outlined),
           onPressed: () {}),
       floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
       bottomNavigationBar: AnimatedBottomNavigationBar( //navigation bar
         icons: iconList, //list of icons
         activeIndex: _bottomNavIndex,
         gapLocation: GapLocation.center,
         notchSmoothness: NotchSmoothness.verySmoothEdge,
         onTap: (index) => setState(() => _bottomNavIndex = index),
         backgroundColor: Colors.blue,
         
       ),
     ),
   );

Шаг 4: Создание списка иконок

Наконец, создайте список значков, требуемых свойством icon анимированной панели навигации.

Dart




List<IconData> iconList = [ //list of icons that required by animated navigation bar.
   Icons.abc_sharp,
   Icons.access_time,
   Icons.holiday_village,
   Icons.account_tree_rounded
 ];

Пример кода

Dart




import "package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart";
import "package:flutter/material.dart";
//main app that calls the runApp.
void main() {
  runApp(AnimatedBottomBar());
}
 
class AnimatedBottomBar extends StatefulWidget {
  AnimatedBottomBar({Key? key}) : super(key: key);
 
  @override
  State<AnimatedBottomBar> createState() => _AnimatedBottomBarState();
}
 
class _AnimatedBottomBarState extends State<AnimatedBottomBar> {
  List<IconData> iconList = [ //list of icons that required by animated navigation bar.
    Icons.abc_sharp,
    Icons.access_time,
    Icons.holiday_village,
    Icons.account_tree_rounded
  ];
  int _bottomNavIndex = 0; //default index of the tabs
  @override
  Widget build(BuildContext context) {
    return MaterialApp( //material app with debugshowcheckedmodebanner false
      debugShowCheckedModeBanner: false,
      home: Scaffold(  //scaffold
        body: Container(),
        floatingActionButton: FloatingActionButton(
         
            child: Icon(Icons.home_max_outlined),
            onPressed: () {}),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: AnimatedBottomNavigationBar( //navigation bar
          icons: iconList,
          activeIndex: _bottomNavIndex,
          gapLocation: GapLocation.center,
          notchSmoothness: NotchSmoothness.verySmoothEdge,
          onTap: (index) => setState(() => _bottomNavIndex = index),
          backgroundColor: Colors.blue,
          
        ),
      ),
    );
  }
}

Объяснение кода:

  • main — это основной метод, который запускает runApp и вызывает наш класс AnimatedBottomBar .
  • MaterialApp позволяет нам создавать каркас.
  • В нижней панели у нас есть AnimatedBottomNavigationBar, который позволяет нам создать анимированную нижнюю панель.
  • AnimatedBottomNavigationBar принимает некоторые свойства, такие как список значков, activeIndex, gaploaction, цвет фона, ontap.
  • Список иконок является обязательным свойством, поэтому мы создали список иконок iconList .

Выходной пользовательский интерфейс

Выход