Flutter底部导航栏美化插件shadow_ui_bottom_navbar的使用

Flutter底部导航栏美化插件shadow_ui_bottom_navbar的使用

✨shadow_ui_bottom_navbar

一个带有阴影效果的水平滚动导航栏插件，适用于每个菜单项。

Demo:

Usage

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  shadow_ui_bottom_navbar: ^0.0.3

导入包

在需要使用的文件中导入：

import 'package:shadow_ui_bottom_navbar/shadow_ui_bottom_navbar.dart';

使用方法

以下是完整的代码示例：

import 'package:flutter/material.dart';
import 'package:shadow_ui_bottom_navbar/shadow_ui_bottom_navbar.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  Example({Key? key}) : super(key: key);

  [@override](/user/override)
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  // 定义页面集合
  List<Widget> _widgets = [
    Container(
      color: Colors.redAccent,
    ),
    Container(
      color: Colors.blueAccent,
    ),
    Container(
      color: Colors.greenAccent,
    ),
    Container(
      color: Colors.purpleAccent,
    ),
    Container(
      color: Colors.pinkAccent,
    ),
  ];

  // 定义图标集合
  List<IconData> icons = [
    Icons.home,
    Icons.mail,
    Icons.notifications,
    Icons.settings,
    Icons.play_arrow
  ];

  // 定义标题集合
  List titles = ["Home", "Inbox", "Notifications", "Settings", "Play"];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Shadow_ui_bottom(
      // 背景色
      bgcolor: Colors.black,
      // 页面集合
      widgets: _widgets,
      // 激活图标的颜色
      activeicon: Colors.green,
      // 激活图标的阴影颜色
      activeshadowcolor: Colors.lightGreen,
      // 图标集合
      icon: icons,
      // 标题集合
      title: titles,
    );
  }
}

更多关于Flutter底部导航栏美化插件shadow_ui_bottom_navbar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部导航栏美化插件shadow_ui_bottom_navbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


shadow_ui_bottom_navbar 是一个用于美化 Flutter 应用底部导航栏的插件。它提供了丰富的自定义选项，允许开发者轻松地创建具有阴影、渐变、圆角等效果的底部导航栏。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 shadow_ui_bottom_navbar 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  shadow_ui_bottom_navbar: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本用法

以下是一个简单的示例，展示如何使用 shadow_ui_bottom_navbar 创建一个具有阴影效果的底部导航栏。

import 'package:flutter/material.dart';
import 'package:shadow_ui_bottom_navbar/shadow_ui_bottom_navbar.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: ShadowUiBottomNavBar(
        selectedIndex: _selectedIndex,
        onItemSelected: _onItemTapped,
        items: [
          ShadowUiBottomNavBarItem(
            icon: Icons.home,
            label: 'Home',
          ),
          ShadowUiBottomNavBarItem(
            icon: Icons.search,
            label: 'Search',
          ),
          ShadowUiBottomNavBarItem(
            icon: Icons.person,
            label: 'Profile',
          ),
        ],
        shadowColor: Colors.black.withOpacity(0.3),
        elevation: 10.0,
        backgroundColor: Colors.white,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
      ),
    );
  }
}

参数说明

  • selectedIndex: 当前选中的导航栏项的索引。
  • onItemSelected: 当用户点击导航栏项时触发的回调函数。
  • items: 导航栏项的列表，每个项包含一个图标和标签。
  • shadowColor: 导航栏的阴影颜色。
  • elevation: 导航栏的阴影高度。
  • backgroundColor: 导航栏的背景颜色。
  • selectedItemColor: 选中项的颜色。
  • unselectedItemColor: 未选中项的颜色。

自定义选项

shadow_ui_bottom_navbar 提供了许多自定义选项，例如：

  • borderRadius: 导航栏的圆角半径。
  • gradient: 导航栏的背景渐变。
  • iconSize: 导航栏图标的大小。
  • labelStyle: 导航栏标签的文本样式。

示例：添加圆角和渐变

bottomNavigationBar: ShadowUiBottomNavBar(
  selectedIndex: _selectedIndex,
  onItemSelected: _onItemTapped,
  items: [
    ShadowUiBottomNavBarItem(
      icon: Icons.home,
      label: 'Home',
    ),
    ShadowUiBottomNavBarItem(
      icon: Icons.search,
      label: 'Search',
    ),
    ShadowUiBottomNavBarItem(
      icon: Icons.person,
      label: 'Profile',
    ),
  ],
  shadowColor: Colors.black.withOpacity(0.3),
  elevation: 10.0,
  backgroundColor: Colors.white,
  selectedItemColor: Colors.blue,
  unselectedItemColor: Colors.grey,
  borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)),
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
),
回到顶部