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

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

安装

  1. 如果尚未创建juneflow项目，请按照以下指南进行创建：

    june create <project-name>

  2. 打开终端并进入juneflow项目的根目录，然后运行以下命令添加插件：

    june add insta_style_bottom_navi2

  3. 启动项目，运行以下命令：

    flutter run lib/app/_/_/interaction/view.blueprint/page/insta_style_bottom_navi2/_/view.dart -d chrome

使用示例

以下是使用insta_style_bottom_navi2插件的完整示例代码：

import 'package:flutter/material.dart';
import 'package:insta_style_bottom_navi2/insta_style_bottom_navi2.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 _selectedIndex = 0;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('底部导航栏示例'),
      ),
      body: Center(
        child: Text('当前页面：${_selectedIndex + 1}'),
      ),
      bottomNavigationBar: InstaStyleBottomNavi2(
        selectedIndex: _selectedIndex,
        onTabSelected: _onItemTapped,
        items: [
          InstaStyleBottomNavItem(icon: Icons.home, title: '首页'),
          InstaStyleBottomNavItem(icon: Icons.search, title: '搜索'),
          InstaStyleBottomNavItem(icon: Icons.add_box, title: '发布'),
          InstaStyleBottomNavItem(icon: Icons.favorite, title: '收藏'),
          InstaStyleBottomNavItem(icon: Icons.person, title: '个人中心'),
        ],
      ),
    );
  }
}

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

1 回复

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


insta_style_bottom_navi2 是一个 Flutter 插件，它提供了一个类似于 Instagram 风格的底部导航栏。这个插件允许你自定义导航栏的样式和功能，使其看起来像 Instagram 的底部导航栏。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  insta_style_bottom_navi2: ^1.0.0  # 请确保使用最新版本

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

基本用法

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: InstaStyleBottomNavi2(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          InstaStyleBottomNavi2Item(icon: Icons.home, label: 'Home'),
          InstaStyleBottomNavi2Item(icon: Icons.search, label: 'Search'),
          InstaStyleBottomNavi2Item(icon: Icons.add, label: 'Add'),
          InstaStyleBottomNavi2Item(icon: Icons.favorite, label: 'Likes'),
          InstaStyleBottomNavi2Item(icon: Icons.person, label: 'Profile'),
        ],
      ),
    );
  }
}
回到顶部