Flutter页面导航管理插件smart_page_navigation的使用

在本Flutter插件中，你将拥有一个与Instagram类似的底部导航栏完全导航功能。

创建者：Claudio Oliveira

Live Example

添加依赖

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

dependencies:
  smart_page_navigation: ^1.1.2 #最新版本

简单易用

以下是一个完整的示例，展示了如何使用smart_page_navigation插件进行页面导航管理。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Smart Page Navigation Example",
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late SmartPageController controller;
  List<StatefulWidget> pages = [
    PageA(),
    PageB(),
    PageC(),
  ];

  @override
  void initState() {
    super.initState();

    controller = SmartPageController.newInstance(
      initialPages: pages,
      context: context,
    );

    // 推荐如果要检查哪个页面打开以便执行某些特定操作，例如显示/隐藏小部件。
    controller.addListener(() {
      if (mounted) setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => controller.back(),
      child: Scaffold(
        appBar: AppBar(
          title: Text("Smart Page Navigation Example"),
        ),
        body: SmartPageNavigation(
          controller: controller,
        ),
        bottomNavigationBar: SmartPageBottomNavigationBar(
          controller: controller,
          options: SmartPageBottomNavigationOptions(),
          children: [
            BottomIcon(icon: Icons.home, title: "Home"),
            BottomIcon(
              icon: Icons.shopping_cart,
              title: "Cart",
              badge: Text(
                "3",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 10,
                  fontWeight: FontWeight.bold,
                ),
              ),
              badgeColor: Colors.redAccent,
            ),
            BottomIcon(
              icon: Icons.settings,
              title: "Settings",
              // hideBottomNavigationBar: true,
            ),
          ],
          onTap: (int index) {
            print("Clicked at index $index");
            return true;
          },
        ),
      ),
    );
  }
}

class PageA extends StatefulWidget {
  PageA({Key? key}) : super(key: key);

  @override
  _PageAState createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  late SmartPageController controller = SmartPageController.getInstance();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "Page A",
            style: Theme.of(context).textTheme.headline4,
          ),
          SizedBox(height: 60),
          ElevatedButton(
            onPressed: () {
              controller.insertPage(PageChild(title: "Page A"));
            },
            child: Text("Open Page"),
          ),
        ],
      ),
    );
  }
}

class PageB extends StatefulWidget {
  PageB({Key? key}) : super(key: key);

  @override
  _PageBState createState() => _PageBState();
}

class _PageBState extends State<PageB> {
  late SmartPageController controller = SmartPageController.getInstance();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.redAccent,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "Page B",
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 60),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ExternalPage(),
                  ),
                );
              },
              child: Text("Open External Page"),
            ),
            SizedBox(height: 32),
            ElevatedButton(
              onPressed: () {
                controller.selectBottomTab(2);
              },
              child: Text("Go To Config"),
            ),
          ],
        ),
      ),
    );
  }
}

class PageC extends StatefulWidget {
  PageC({Key? key}) : super(key: key);

  @override
  _PageCState createState() => _PageCState();
}

class _PageCState extends State<PageC> {
  late SmartPageController controller = SmartPageController.getInstance();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blueAccent,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "Page C",
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 60),
            ElevatedButton(
              onPressed: () {
                controller.insertPage(PageChild(title: "Page C"));
              },
              child: Text("Open Page"),
            ),
          ],
        ),
      ),
    );
  }
}

class PageChild extends StatefulWidget {
  final String title;
  PageChild({Key? key, required this.title}) : super(key: key);

  @override
  _PageChildState createState() => _PageChildState();
}

class _PageChildState extends State<PageChild> {
  late SmartPageController controller = SmartPageController.getInstance();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blueGrey,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              child: Text(
                "Child Page: ${widget.title}",
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
            ElevatedButton(
              onPressed: () {
                controller.insertPage(
                    PageChild(title: "Child Page: ${widget.title}"));
              },
              child: Text("Open Page"),
            ),
          ],
        ),
      ),
    );
  }
}

class ExternalPage extends StatefulWidget {
  ExternalPage({Key? key}) : super(key: key);

  @override
  _ExternalPageState createState() => _ExternalPageState();
}

class _ExternalPageState extends State<ExternalPage> {
  late SmartPageController controller = SmartPageController.getInstance();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("External Page"),
      ),
      body: Container(
        color: Colors.green,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                "External Page",
                style: Theme.of(context).textTheme.headline4,
              ),
              SizedBox(height: 60),
              ElevatedButton(
                onPressed: () {
                  Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(
                      builder: (context) => MyHomePage(),
                    ),
                    (route) => false,
                  );
                  Future.delayed(Duration(milliseconds: 100), () {
                    controller.resetNavigation(redirectToBottomOptionIndex: 2);
                  });
                },
                child: Text("Reset navigation stack and go to Settings"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

控制器初始化

注意！建议在整个应用程序生命周期中只调用一次.newInstance。要在其他页面获取控制器实例，请使用.getInstance()。

controller = SmartPageController.newInstance(
  initialPages: [
    PageA(),
    PageB(),
    PageC(),
  ],
  context: context,
);

更多关于Flutter页面导航管理插件smart_page_navigation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼

更多关于Flutter页面导航管理插件smart_page_navigation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用smart_page_navigation插件进行页面导航管理的代码示例。smart_page_navigation是一个方便的Flutter插件，用于管理页面导航和堆栈。

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

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

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

接下来，我们需要在应用中配置和使用SmartPageNavigation。以下是一个简单的示例：

main.dart

import 'package:flutter/material.dart';
import 'package:smart_page_navigation/smart_page_navigation.dart';
import 'page_one.dart';
import 'page_two.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smart Page Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SmartPageNavigator(
        pages: [
          // 初始页面
          SmartPage(
            child: PageOne(),
            key: ValueKey('PageOne'),
          ),
        ],
        onGenerateRoute: (settings) {
          // 根据路由名称生成页面
          switch (settings.name) {
            case '/page_two':
              return MaterialPageRoute(builder: (_) => PageTwo());
            default:
              return null;
          }
        },
      ),
    );
  }
}

page_one.dart

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

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SmartPageNavigatorState navigator = SmartPageNavigation.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Page One'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            navigator.pushNamed('/page_two');
          },
          child: Text('Go to Page Two'),
        ),
      ),
    );
  }
}

page_two.dart

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

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SmartPageNavigatorState navigator = SmartPageNavigation.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Page Two'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            navigator.pop();
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

解释

main.dart：
- 创建了一个MaterialApp，并在其home属性中使用了SmartPageNavigator。
- 初始页面被设置为PageOne。
- 使用onGenerateRoute属性来根据路由名称生成页面，这里我们定义了/page_two路由对应PageTwo页面。
page_one.dart：
- 在PageOne页面中，使用SmartPageNavigation.of(context)获取SmartPageNavigatorState实例。
- 创建一个按钮，点击时调用navigator.pushNamed('/page_two')导航到PageTwo页面。
page_two.dart：
- 在PageTwo页面中，同样使用SmartPageNavigation.of(context)获取SmartPageNavigatorState实例。
- 创建一个按钮，点击时调用navigator.pop()返回上一个页面。

这样，你就配置好了一个基本的Flutter应用，使用smart_page_navigation插件进行页面导航管理。这个示例展示了如何从一个页面导航到另一个页面，以及如何从当前页面返回。你可以根据需要扩展和自定义这个基础示例。