Flutter嵌套侧边栏插件nested_side_sheet的使用

Flutter嵌套侧边栏插件nested_side_sheet的使用

🕵️ 动机

这个仓库包含一个插件，该插件允许在顶部显示多个侧边栏，并且能够执行典型的导航操作，如push、replace、pop和popUntil。我们在构建一个Web仪表板应用时开发了这个插件，发现标准的Material导航抽屉和现有的插件无法提供我们所需的特性。

我们的插件设计简单且灵活，允许您自定义侧边栏的外观和过渡动画而没有任何限制。通过我们的插件，您可以创建满足特定需求的无缝用户体验。

⚙ 特性

• 显示多个堆叠在一起的侧边栏
• 执行典型的导航操作，如push、replace、pop和popUntil
• 自定义侧边栏的外观和感觉
• 创建无缝的过渡动画

💻 安装

dependencies:
  nested_side_sheet: ^1.1.0

🕹️ 使用

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

const kSideSheetWidth = 304.0;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) =>
      MaterialApp(
        // Side sheets will be placed above the NestedSideSheet child
        home: NestedSideSheet(
          child: HomePage(),
        ),
      );
}

class HomePage extends StatelessWidget {
  constHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) =>
      Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () async {
              // Call this anywhere in the app within the NestedSideSheet context
              final result = await NestedSideSheet.of(context).push(
                Container(
                  color: Colors.white,
                  width: kSideSheetWidth,
                ),
                transitionBuilder: leftSideSheetTransition,
                position: SideSheetPosition.left,
              );
            },
            icon: Icon(Icons.add),
          ),
        ),
      );
}

示例代码

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

const kSideSheetWidth = 304.0;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Nested Side Sheet',
        theme: lightTheme(),
        debugShowCheckedModeBanner: false,
        home: Material(
          color: accentColor,
          // Side sheets will be placed above the NestedSideSheet's child
          child: NestedSideSheet(
            child: MyHomePage(title: 'Nested Side Sheet'),
          ),
        ),
      );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) => HomeCard(
        shadows: kElevationToShadow[8],
        child: Scaffold(
          body: Stack(
            children: [
              buildInfoCard(),
              ...buildButtons(),
            ],
          ),
        ),
      );

  Widget buildInfoCard() => Center(
        child: Container(
          width: 300,
          height: 150,
          decoration: ShapeDecoration(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
              side: BorderSide(color: accentColor),
            ),
          ),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GestureDetector(
                  onTap: () => launchUrl(Uri.https('krootl.com')),
                  child: MouseRegion(
                    cursor: SystemMouseCursors.click,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(2),
                      child: SvgPicture.asset(
                        'assets/krootl_logo.svg',
                        height: 28,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                Text(
                  widget.title,
                  style: Theme.of(context).appBarTheme.titleTextStyle,
                ),
              ],
            ),
          ),
        ),
      );

  List<Widget> buildButtons() => [
        Align(
          alignment: Alignment.center,
          child: Padding(
            padding: const EdgeInsets.only(right: 300),
            child: FloatingActionButton(
              onPressed: openLeftSheet,
              child: Icon(Icons.arrow_back_rounded),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 150),
            child: FloatingActionButton(
              onPressed: openTopSheet,
              child: Icon(Icons.arrow_upward_rounded),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Padding(
            padding: const EdgeInsets.only(left: 300),
            child: FloatingActionButton(
              onPressed: openRightSheet,
              child: Icon(Icons.arrow_forward_rounded),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Padding(
            padding: const EdgeInsets.only(top: 150),
            child: FloatingActionButton(
              onPressed: openBottomSheet,
              child: Icon(Icons.arrow_downward_rounded),
            ),
          ),
        ),
      ];

  void openLeftSheet() async {
    ScaffoldMessenger.of(context).clearSnackBars();

    final result = await NestedSideSheet.of(context).push(
      Sheet(
        size: Size(376, MediaQuery.of(context).size.height),
      ),
      transitionBuilder: leftSideSheetTransition,
      position: SideSheetPosition.left,
    );

    if (result is String) showSnackBar(result);
  }

  void openTopSheet() async {
    ScaffoldMessenger.of(context).clearSnackBars();

    final decorationBuilder = (child) => HomeCard(child: child);
    final result = await NestedSideSheet.of(context).push(
      Sheet(
        size: Size(MediaQuery.of(context).size.width, 400),
      ),
      transitionBuilder: topSideSheetTransition,
      position: SideSheetPosition.top,
      decorationBuilder: decorationBuilder,
    );

    if (result is String) showSnackBar(result);
  }

  void openRightSheet() async {
    ScaffoldMessenger.of(context).clearSnackBars();

    final decorationBuilder = (child) => HomeCard(child: child);
    final result = await NestedSideSheet.of(context).push(
      Sheet(
        size: Size(
          MediaQuery.of(context).size.width * (1 / 3),
          MediaQuery.of(context).size.height,
        ),
      ),
      transitionBuilder: rightSideSheetTransition,
      position: SideSheetPosition.right,
      decorationBuilder: decorationBuilder,
      dismissible: true,
    );

    if (result is String) showSnackBar(result);
  }

  void openBottomSheet() async {
    ScaffoldMessenger.of(context).clearSnackBars();

    final result = await NestedSideSheet.of(context).push(
      Sheet(
        size: Size(MediaQuery.of(context).size.width, 400),
      ),
      transitionBuilder: bottomSideSheetTransition,
      position: SideSheetPosition.bottom,
    );

    if (result is String) showSnackBar(result);
  }

  void showSnackBar(String result) =>
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(result, textAlign: TextAlign.center),
          width: 300,
          behavior: SnackBarBehavior.floating,
        ),
      );
}