Flutter底部导航栏插件insta_style_bottom_navigation_bar的使用

Flutter底部导航栏插件insta_style_bottom_navigation_bar的使用

安装

  1. 如果还没有创建juneflow项目，请根据此指南创建。
  2. 在juneflow项目的根目录打开终端，输入以下命令：
    june add insta_style_bottom_navigation_bar
  3. 启动项目，输入以下命令：
    flutter run lib/app/_/_/interaction/view.blueprint/page/insta_style_bottom_navigation_bar/_/view.dart -d chrome

截图

截图

使用示例

以下是一个完整的示例，展示了如何在Flutter应用中使用insta_style_bottom_navigation_bar插件。

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

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

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

class BottomNavExample extends StatefulWidget {
  [@override](/user/override)
  _BottomNavExampleState createState() => _BottomNavExampleState();
}

class _BottomNavExampleState extends State<BottomNavExample> {
  int _currentIndex = 0;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Insta Style Bottom Navigation Bar'),
      ),
      body: Center(
        child: Text('当前页面：${_currentIndex == 0 ? "首页" : _currentIndex == 1 ? "发现" : "我的"}'),
      ),
      bottomNavigationBar: InstaStyleBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onItemTapped,
        items: [
          InstaStyleBottomNavigationItem(
            icon: Icons.home,
            activeIcon: Icons.home_outlined,
            title: '首页',
          ),
          InstaStyleBottomNavigationItem(
            icon: Icons.search,
            activeIcon: Icons.search_outlined,
            title: '发现',
          ),
          InstaStyleBottomNavigationItem(
            icon: Icons.person,
            activeIcon: Icons.person_outline,
            title: '我的',
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


insta_style_bottom_navigation_bar 是一个 Flutter 插件，用于创建一个类似 Instagram 风格的底部导航栏。它提供了自定义的图标、颜色、动画效果等功能，使得底部导航栏看起来更加现代和吸引人。

安装插件

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

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

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

基本用法

以下是一个简单的示例，展示了如何使用 insta_style_bottom_navigation_bar 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Insta Style Bottom Navigation Bar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('Home Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
    Text('Search Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
    Text('Add Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
    Text('Profile Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Insta Style Bottom Navigation Bar'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: InstaStyleBottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          InstaStyleBottomNavigationBarItem(icon: Icons.home, label: 'Home'),
          InstaStyleBottomNavigationBarItem(icon: Icons.search, label: 'Search'),
          InstaStyleBottomNavigationBarItem(icon: Icons.add, label: 'Add'),
          InstaStyleBottomNavigationBarItem(icon: Icons.person, label: 'Profile'),
        ],
      ),
    );
  }
}

关键参数解释

  • currentIndex: 当前选中的索引。
  • onTap: 当用户点击某个导航项时触发的回调函数。
  • items: 导航栏的各个项目，每个项目包含一个图标和标签。

自定义样式

你可以通过设置不同的参数来自定义导航栏的样式，例如颜色、动画效果等。以下是一些常用的自定义选项：

InstaStyleBottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: [
    InstaStyleBottomNavigationBarItem(icon: Icons.home, label: 'Home'),
    InstaStyleBottomNavigationBarItem(icon: Icons.search, label: 'Search'),
    InstaStyleBottomNavigationBarItem(icon: Icons.add, label: 'Add'),
    InstaStyleBottomNavigationBarItem(icon: Icons.person, label: 'Profile'),
  ],
  backgroundColor: Colors.white,
  selectedItemColor: Colors.blue,
  unselectedItemColor: Colors.grey,
  animationDuration: Duration(milliseconds: 300),
  animationCurve: Curves.easeInOut,
);
回到顶部