Блог

Мне нужно создать панель навигации, значки которой будут выглядеть так, когда они активны:

Но мой выглядит так:

Обычно я использую bottom_navy_bar. Итак, вот код для этого:

       BottomNavyBarItem(
        icon: _currentIndex == 0
            ? _buildActiveIcon(
                'assets/icons/navigation/home_white_icon.png')
            : _buildInactiveIcon("assets/icons/navigation/home_icon.png"),
        activeColor: Colors.black,
        inactiveColor: CustomColors.white,
        title: Text(
          "Home",
        ),
      ),
 

Код для активного и неактивного значка:

   Widget _buildInactiveIcon(String assetUrl) {
    return Container(
      height: 30,
      width: 30,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(60),
        color: CustomColors.white,
      ),
      child: Center(
        child: ImageIcon(
          AssetImage(
            assetUrl,
          ),
          color: CustomColors.black,
        ),
      ),
    );
  }

  Widget _buildActiveIcon(String assetUrl) {
    return Container(
      height: 30,
      width: 30,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(60),
        color: Colors.black,
      ),
      child: Center(
        child: ImageIcon(
          AssetImage(
            assetUrl,
          ),
          color: Colors.white,
        ),
      ),
    );
  }
 

Так можно ли это сделать с помощью любого пакета или мне нужно создать какую-то пользовательскую панель навигации?

Это ваше решение:

1. Снимок экрана на всю страницу
2. BottomNavigationBarItem

Код BottomNavigatonBarItem:-

BottomNavigationBarItem( значок: контейнер (ширина: 140, высота: 35, оформление: const BoxDecoration( цвет: Color(0xffA3C2D4), borderRadius: borderRadius.all(Радиус.круговой (20))), дочерний элемент: Стек ( дочерние элементы: [ Контейнер(ширина: 35, высота: 35, оформление:const BoxDecoration( цвет: Colors.black, форма: BoxShape.circle), дочерний элемент: значок ( значки.уведомления, цвет: Colors.white, ), ), const Center( дочерний элемент: заполнение ( заполнение: только EdgeInsets.(слева: 20.0), дочерний элемент: текст ( «Уведомление»,стиль: TextStyle (цвет: Colors.black), ), )) ], ), ), метка: «, ),

Полный код:-

 import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text(
          "Screen 1",
          style: TextStyle(fontSize: 28),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        selectedItemColor: Colors.amber[800],
        onTap: (v) {},
        elevation: 0.0,
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Container(
              width: 140,
              height: 35,
              decoration: const BoxDecoration(
                  color: Color(0xffA3C2D4),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Stack(
                children: [
                  Container(
                    width: 35,
                    height: 35,
                    decoration: const BoxDecoration(
                        color: Colors.black, shape: BoxShape.circle),
                    child: const Icon(
                      Icons.home,
                      color: Colors.white,
                    ),
                  ),
                  const Center(
                      child: Padding(
                    padding: EdgeInsets.only(left: 20.0),
                    child: Text(
                      "Home",
                      style: TextStyle(color: Colors.black),
                    ),
                  ))
                ],
              ),
            ),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Container(
              width: 140,
              height: 35,
              decoration: const BoxDecoration(
                  color: Color(0xffA3C2D4),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Stack(
                children: [
                  Container(
                    width: 35,
                    height: 35,
                    decoration: const BoxDecoration(
                        color: Colors.black, shape: BoxShape.circle),
                    child: const Icon(
                      Icons.notifications,
                      color: Colors.white,
                    ),
                  ),
                  const Center(
                      child: Padding(
                    padding: EdgeInsets.only(left: 20.0),
                    child: Text(
                      "Notification",
                      style: TextStyle(color: Colors.black),
                    ),
                  ))
                ],
              ),
            ),
            label: '',
          ),
        ],
      ),
    );
  }
}
 

Проверьте также пакет Salomon_bottom_navigation

Вы можете использовать persistent_bottom_nav_bar