Flutter自适应底部导航插件adaptive_bottom_navigation的使用

Flutter 自适应底部导航插件 adaptive_bottom_navigation 的使用

介绍

自适应底部导航栏是 Flutter 的一个包，提供了适应 iOS 和 Android 平台的底部导航栏小部件。导航栏会根据平台自动调整其外观，确保一致且原生的用户体验。

作者

该插件由 @badiniibrahim 创建。如果您喜欢我的工作，请支持我买杯咖啡。感谢您的支持 ❤️

Buy Me A Coffee

截图

alt text alt text

特性

  • 为 iOS 和 Android 平台提供自适应设计。
  • 可以自定义图标、标签和页面。
  • 支持多种定制选项，包括颜色、大小、动画和装饰。
  • 简单易用，API 简单。
  • 使用 GetX 进行状态管理。

开始使用

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

dependencies:
  ...
  adaptive_bottom_navigation: latest_version

完整示例

以下是一个完整的示例，展示了如何使用 AdaptiveBottomNavigation 小部件：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:adaptive_bottom_navigation/adaptive_bottom_navigation.dart';

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

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

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveBottomNavigation(
      icons: [Icons.home, Icons.search, Icons.person], // 图标列表
      labels: ['Home', 'Search', 'Profile'], // 对应的标签列表
      pages: [HomePage(), SearchPage(), ProfilePage()], // 对应的页面列表
      selectedColor: Colors.blue, // 选中图标颜色
      unselectedColor: Colors.grey, // 未选中图标颜色
      backgroundColor: Colors.white, // 导航栏背景色
      iconSize: 30.0, // 图标大小
      animationDuration: Duration(milliseconds: 300), // 动画持续时间
      animationIndicatorCurve: Curves.easeIn, // 指示器动画曲线
      animationIconCurve: Curves.easeOut, // 图标动画曲线
      indicatorDecoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ), // 指示器装饰
      itemDecoration: BoxDecoration(
        border: Border(
          top: BorderSide(color: Colors.grey, width: 0.5),
        ),
      ), // 每个项目的装饰
      bottomNavigationDecoration: BoxDecoration(
        boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 10)],
      ), // 整个导航栏的装饰
      height: 60.0, // 导航栏高度
      indicatorHeight: 4.0, // 指示器高度
      indicatorSpaceBottom: 2.0, // 指示器与导航栏底部的距离
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page')); // 主页
  }
}

class SearchPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Search Page')); // 搜索页
  }
}

class ProfilePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Page')); // 个人资料页
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用adaptive_bottom_navigation插件的一个示例。这个插件允许你创建一个自适应的底部导航栏，它可以根据屏幕大小在桌面和移动设备上显示不同的布局。

首先，确保你已经在pubspec.yaml文件中添加了adaptive_bottom_navigation依赖：

dependencies:
  flutter:
    sdk: flutter
  adaptive_bottom_navigation: ^3.0.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

接下来，在你的main.dart文件中，你可以设置你的Flutter应用来使用这个插件。以下是一个简单的示例：

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

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

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

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

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

  final List<IconData> _icons = [
    Icons.home,
    Icons.search,
    Icons.add,
    Icons.account_circle,
  ];

  final List<String> _titles = [
    'Home',
    'Search',
    'Add',
    'Profile',
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Bottom Navigation Demo'),
      ),
      body: Center(
        child: Text('You have selected: ${_titles[_currentIndex]}'),
      ),
      bottomNavigationBar: AdaptiveBottomNavigation(
        notchMargin: 8.0,
        color: Colors.blue,
        activeColor: Colors.white,
        inactiveColor: Colors.grey,
        items: [
          AdaptiveBottomNavigationItem(
            icon: Icon(_icons[_currentIndex == 0 ? 1 : 0]),
            title: Text(_titles[0]),
          ),
          AdaptiveBottomNavigationItem(
            icon: Icon(_icons[_currentIndex == 1 ? 1 : 0]),
            title: Text(_titles[1]),
          ),
          AdaptiveBottomNavigationItem(
            icon: Icon(_icons[_currentIndex == 2 ? 1 : 0]),
            title: Text(_titles[2]),
          ),
          AdaptiveBottomNavigationItem(
            icon: Icon(_icons[_currentIndex == 3 ? 1 : 0]),
            title: Text(_titles[3]),
          ),
        ],
        currentIndex: _currentIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 依赖管理：在pubspec.yaml中添加了adaptive_bottom_navigation依赖。
  2. UI结构：在MyApp中设置了基本的MaterialApp结构。
  3. 状态管理：在MyHomePage中管理了底部导航项的选中状态。
  4. 导航项：使用AdaptiveBottomNavigationItem创建了四个导航项，每个项都有一个图标和标题。
  5. 事件处理：通过onTap回调处理导航项的点击事件，更新当前选中的索引。

请注意，_icons列表中的图标使用了Icons.home等，并且根据当前选中的索引来改变图标的显示（这里简单地通过索引的奇偶性来改变，实际使用中可能需要根据具体需求调整）。

这个示例提供了一个基本的框架，你可以根据需要进一步自定义和扩展，比如添加更多页面、使用不同的图标和颜色等。

回到顶部