Flutter未知功能插件overlord的使用（由于介绍为undefined，故以“未知功能”代替）

Flutter未知功能插件overlord的使用

一系列占据屏幕主要内容区域的部件。

该项目是Flutter Bounty Hunters的一个概念验证。想要更多功能？今天就资助一个里程碑吧！

示例代码

import 'package:example/demos/demo_dropdown_list.dart';
import 'package:example/demos/demo_dropdown_menu.dart';
import 'package:example/demos/demo_popover_menu.dart';
import 'package:example/demos/demo_popover_menu_bouncing_ball.dart';
import 'package:example/demos/demo_popover_menu_draggable_ball.dart';
import 'package:example/demos/demo_toolbar.dart';
import 'package:example/demos/demo_toolbar_bouncing_ball.dart';
import 'package:example/demos/demo_toolbar_draggable_ball.dart';
import 'package:example/demos/demo_toolbar_moving_focal_point.dart';
import 'package:example/demos/demo_toolbar_wide_draggable_ball.dart';
import 'package:example/demos/demo_toolbar_with_scrolling_focal_point.dart';
import 'package:example/demos/inventory_demo.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overlord Example',
      theme: ThemeData.dark(useMaterial3: false),
      home: const OverlordDemoHomepage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class OverlordDemoHomepage extends StatefulWidget {
  const OverlordDemoHomepage({
    super.key,
  });

  [@override](/user/override)
  State<OverlordDemoHomepage> createState() => _OverlordDemoHomepageState();
}

class _OverlordDemoHomepageState extends State<OverlordDemoHomepage> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  _MenuItem _selectedMenu = _items.first;

  void _closeDrawer() {
    if (_scaffoldKey.currentState!.isDrawerOpen) {
      Navigator.of(context).pop();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      extendBodyBehindAppBar: true,
      backgroundColor: const Color(0xFF222222),
      body: _selectedMenu.pageBuilder(context),
      drawer: _buildDrawer(),
    );
  }

  Widget _buildDrawer() {
    return Drawer(
      child: SingleChildScrollView(
        primary: false,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 48),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              for (final item in _items) ...[
                _DrawerButton(
                  title: item.title,
                  onPressed: () => setState(() {
                    _selectedMenu = item;
                    _closeDrawer();
                  }),
                  isSelected: _selectedMenu == item,
                ),
                const SizedBox(height: 24),
              ],
            ],
          ),
        ),
      ),
    );
  }
}

final _items = [
  _MenuItem(
    title: '库存',
    pageBuilder: (context) => const InventoryDemo(),
  ),
  _MenuItem(
    title: '下拉菜单',
    pageBuilder: (context) => const DropdownMenuDemo(),
  ),
  _MenuItem(
    title: '下拉列表',
    pageBuilder: (context) => const DropdownListDemo(),
  ),
  _MenuItem(
    title: 'iOS工具栏滚动焦点',
    pageBuilder: (context) => const ToolbarWithScrollingFocalPointDemo(),
  ),
  _MenuItem(
    title: 'iOS工具栏扩展焦点',
    pageBuilder: (context) => const ToolbarExpandingFocalPointDemo(),
  ),
  _MenuItem(
    title: 'iOS弹出菜单',
    pageBuilder: (context) => const PopoverDemo(),
  ),
  _MenuItem(
    title: '弹出菜单 - 可拖拽球',
    pageBuilder: (context) => const PopoverMenuDraggableBallDemo(),
  ),
  _MenuItem(
    title: '弹出菜单 - 弹跳球',
    pageBuilder: (context) => const PopoverMenuBouncingBallDemo(),
  ),
  _MenuItem(
    title: 'iOS工具栏',
    pageBuilder: (context) => const ToolbarDemo(),
  ),
  _MenuItem(
    title: '工具栏 - 可拖拽球',
    pageBuilder: (context) => const ToolbarDraggableBallDemo(),
  ),
  _MenuItem(
    title: '宽工具栏 - 可拖拽球',
    pageBuilder: (context) => const WideToolbarDraggableBallDemo(),
  ),
  _MenuItem(
    title: '工具栏 - 弹跳球',
    pageBuilder: (context) => const ToolbarBouncingBallDemo(),
  ),
];

class _MenuItem {
  const _MenuItem({
    required this.title,
    required this.pageBuilder,
  });

  final String title;
  final WidgetBuilder pageBuilder;
}

class _DrawerButton extends StatelessWidget {
  const _DrawerButton({
    Key? key,
    required this.title,
    this.isSelected = false,
    required this.onPressed,
  }) : super(key: key);

  final String title;
  final bool isSelected;
  final VoidCallback onPressed;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateColor.resolveWith((states) {
              if (isSelected) {
                return const Color(0xFFBBBBBB);
              }

              if (states.contains(MaterialState.hovered)) {
                return Colors.grey.withOpacity(0.1);
              }

              return Colors.transparent;
            }),
            foregroundColor:
                MaterialStateColor.resolveWith((states) => isSelected ? Colors.white : const Color(0xFFBBBBBB)),
            elevation: MaterialStateProperty.resolveWith((states) => 0),
            padding: MaterialStateProperty.resolveWith((states) => const EdgeInsets.all(16))),
        onPressed: isSelected ? null : onPressed,
        child: Center(child: Text(title)),
      ),
    );
  }
}