Flutter自适应导航栏插件flutter_adaptive_navigation的使用

Flutter自适应导航栏插件flutter_adaptive_navigation的使用

flutter_adaptive_navigation

一个简化在应用程序中添加自适应导航过程的Flutter包。它使用底部导航栏用于手机，导航栏用于平板电脑，并且在桌面大小屏幕上使用抽屉。

Getting started

导入包：

import 'package:flutter_adaptive_navigation/flutter_adaptive_navigation.dart';

使用FlutterAdaptiveNavigationScaffold代替常规的Scaffold。

Usage

FlutterAdaptiveNavigationScaffold(
  labelDisplayType: LabelDisplayType.all, // 可选。确定在平板和移动设备上显示哪些标签。在桌面上忽略此设置。默认只显示已选择的标签。
  appBar: AppBar(
    title: const Text('Adaptive Navigation'),
  ), // 可选。定义将作为appBar使用的widget。
  drawerWidthFraction: 0.15, // 可选。以视口宽度百分比的形式确定抽屉的宽度。默认：20%。应以分数形式表示（介于0和1之间）
  destinations: [
    NavigationElement(
      icon: const Icon(Icons.home),
      label: 'Home',
      builder: () => const CustomListView(
        count: 11,
        color: Colors.pinkAccent,
      ),
    ),
    NavigationElement(
      icon: const Icon(Icons.group),
      label: 'Group',
      builder: () => const CustomListView(
        count: 11,
        color: Colors.red,
      ),
      breakpointBasedBuilder: {
        Breakpoint.tablet: () => const CustomGridView(
          count: 11,
          color: Colors.blue,
        )
      },
    ),
    NavigationElement(
      icon: const Icon(Icons.settings),
      label: 'Settings',
      builder: () => const CustomListView(
        count: 11,
        color: Colors.amberAccent,
      ),
      breakpointBasedBuilder: {
        Breakpoint.desktop: () => const CustomGridView(
          count: 11,
          color: Colors.orange,
        )
      },
    ),
    NavigationElement(
      icon: const Icon(Icons.account_circle),
      label: 'Profile',
      builder: () => const CustomListView(
        count: 11,
        color: Colors.indigo,
      ),
    ),
  ], // 必需。应用中的导航目的地列表。至少需要一个元素。
  backgroundColor: Colors.white, // 可选。导航元素的背景颜色
);

对于NavigationElement:

NavigationElement(
  icon: const Icon(Icons.home_outlined), // 必需。要在导航中显示的图标。
  selectedIcon: const Icon(Icons.home), // 可选。如果指定为活动页面，则使用此图标。
  label: 'Profile', // 必需。导航的标签。
  builder: () => const CustomListView(
    count: 11,
    color: Colors.indigo,
  ), // 可选。指定将作为屏幕主内容显示的widget。将在所有断点中使用。请指定此或`breakpointBasedBuilder`
  breakpointBasedBuilder: {
    Breakpoint.desktop: () => const CustomGridView(
      count: 11,
      color: Colors.orange,
    )
  }, // 可选。允许为特定设备类型覆盖主内容。
)

Screenshots

• Bottom Navigation Bar

• Navigation Rail

• Navigation Drawer

示例代码

import 'package:example/views/custom_grid.dart';
import 'package:example/views/custom_list.dart';
import 'package:flutter/material.dart';
import 'package:flutter_adaptive_navigation/flutter_adaptive_navigation.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个 widget 是你应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme:
            ColorScheme.fromSwatch(primarySwatch: Colors.blue).copyWith(
          secondary: Colors.red,
        ),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FlutterAdaptiveNavigationScaffold(
      labelDisplayType: LabelDisplayType.all,
      appBar: AppBar(
        title: const Text('Adaptive Navigation'),
      ),
      drawerWidthFraction: 0.15,
      destinations: [
        NavigationElement(
          icon: const Icon(Icons.home_outlined),
          selectedIcon: const Icon(Icons.home),
          label: 'Home',
          builder: () => const CustomListView(
            count: 11,
            color: Colors.pinkAccent,
          ),
        ),
        NavigationElement(
          icon: const Icon(Icons.group),
          label: 'Group',
          builder: () => const CustomListView(
            count:  e1,
            color: Colors.red,
          ),
          breakpointBasedBuilder: {
            Breakpoint.tablet: () => const CustomGridView(
              count:  e l,
              color: Colors.blue,
            )
          },
        ),
        NavigationElement(
          icon: const Icon(Icons.settings),
          label: 'Settings',
          builder: () => const CustomListView(
            count:  e e,
            color: Colors.amberAccent,
          ),
          breakpointBasedBuilder: {
            Breakpoint.desktop: () => const CustomGridView(
              count:  e e,
              color: Colors.orange,
            )
          },
        ),
        NavigationElement(
          icon: const Icon(Icons.account_circle),
          label: 'Profile',
          builder: () => const CustomListView(
            count:  e e,
            color: Colors.indigo,
          ),
        ),
      ],
    );
  }
}