Flutter底部指示器插件bottom_indicator_bar_svg的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter底部指示器插件bottom_indicator_bar_svg的使用

bottom_indicator_bar_svg

一个带有指示器的Flutter底部标签栏，类似于Facebook应用的底部标签栏。

Forked Mods

  • 允许SVG图标资产作为图标
  • 可以为导航项添加标签
  • 全部归功于原始仓库的作者 Juan Jose Carracedo

ezgif-2-f7cff4c02f

Getting Started

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

dependencies:
  ...
  bottom_indicator_bar_svg: latest_version

Basic Usage

class HomePage extends StatefulWidget {
  [@override](/user/override)
  State createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<BottomIndicatorNavigationBarItem> items = [
    BottomIndicatorNavigationBarItem(icon: Icons.home, label: Text('Home')),
    BottomIndicatorNavigationBarItem(icon: Icons.search, label: 'Search'),
    BottomIndicatorNavigationBarItem(icon: 'assets/svgIcon.svg', label: 'Svg', iconSize: 28),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Indicator Bottom Bar"),
        backgroundColor: Colors.black87,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [],
        ),
      ),
      bottomNavigationBar: BottomIndicatorBar(
        onTap: (index) => {}, // 点击回调
        items: items,
        iconSize: 30.0,
        indicatorHeight: 5, // 设置为0以隐藏指示条
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        indicatorColor: Colors.blue,
        backgroundColor: Colors.black87,
      ),
    );
  }
}

完整示例

以下是一个完整的示例，展示了如何使用bottom_indicator_bar_svg插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Titled Bar',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  State createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<BottomIndicatorNavigationBarItem> items = [
    BottomIndicatorNavigationBarItem(icon: Icons.home, label: Text('Home')),
    BottomIndicatorNavigationBarItem(icon: Icons.search, label: 'Search'),
    BottomIndicatorNavigationBarItem(icon: 'assets/svgIcon.svg', label: 'Svg'),
    BottomIndicatorNavigationBarItem(
        icon: 'assets/inactiveIcon.svg',
        activeIcon: 'assets/activeIcon.svg',
        label: 'Account',
        iconSize: 28),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Indicator Bottom Bar"),
        backgroundColor: Colors.black87,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [], // 这里可以添加一些示例内容
        ),
      ),
      bottomNavigationBar: BottomIndicatorBar(
        onTap: (index) => print("Selected Index: $index"), // 点击回调
        items: items,
        iconSize: 30.0,
        barHeight: 70.0,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        indicatorColor: Colors.blue,
        backgroundColor: Colors.black87,
        indicatorHeight: 5,
      ),
    );
  }
}

更多关于Flutter底部指示器插件bottom_indicator_bar_svg的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部指示器插件bottom_indicator_bar_svg的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用bottom_indicator_bar_svg插件的示例代码。这个插件允许你使用SVG图标作为底部导航栏的指示器。首先，你需要确保你的pubspec.yaml文件中已经添加了这个依赖：

dependencies:
  flutter:
    sdk: flutter
  bottom_indicator_bar_svg: ^最新版本号 # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，我们来看一个完整的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Indicator Bar SVG Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomIndicatorBarDemo(),
    );
  }
}

class BottomIndicatorBarDemo extends StatefulWidget {
  @override
  _BottomIndicatorBarDemoState createState() => _BottomIndicatorBarDemoState();
}

class _BottomIndicatorBarDemoState extends State<BottomIndicatorBarDemo> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;

  final List<String> _pages = [
    'Home',
    'Search',
    'Profile',
    'Settings',
  ];

  final List<String> _svgAssets = [
    'assets/home.svg', // 请确保这些SVG文件在你的assets文件夹中
    'assets/search.svg',
    'assets/profile.svg',
    'assets/settings.svg',
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Indicator Bar SVG Demo'),
      ),
      body: Center(
        child: Text(_pages[_selectedIndex]),
      ),
      bottomNavigationBar: BottomIndicatorBarSvg(
        items: List.generate(
          _pages.length,
          (index) => BottomNavigationBarItem(
            icon: SvgPicture.asset(
              _svgAssets[index],
              color: _selectedIndex == index ? Colors.blue : Colors.grey,
            ),
            title: Text(
              _pages[index],
              style: TextStyle(color: _selectedIndex == index ? Colors.blue : Colors.grey),
            ),
          ),
        ),
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        backgroundColor: Colors.white,
        selectedColor: Colors.blue,
        unselectedColor: Colors.grey,
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它有一个底部导航栏。底部导航栏的图标是从SVG文件加载的。我们使用了SvgPicture.asset来加载SVG图标，并根据当前选中的页面更改图标的颜色。

注意：

  1. 确保你的SVG文件已经放在assets文件夹中，并且在pubspec.yaml文件中声明了这些资源。
  2. 替换_svgAssets列表中的SVG文件路径为你的实际路径。

这样，你就可以在你的Flutter应用中使用bottom_indicator_bar_svg插件来实现带有SVG图标的底部导航栏了。

回到顶部