Flutter托盘管理插件widget_tray的使用

Flutter托盘管理插件widget_tray的使用

Widget_Tray

Widget_Tray 是一个为简化 UI 设计和应用开发而提供的自定义控件集合。通过 Widget_Tray，您可以快速创建美观、可重用且响应式的用户界面。

特性

• 多种自定义控件：提供丰富的自定义控件。
• 易于使用并集成到任何 Flutter 项目中：方便快捷地将控件添加到您的项目中。
• 支持多屏幕尺寸的响应式设计：适用于不同屏幕大小的设备。
• 文档详尽且维护活跃：有详细的文档和持续更新。

控件列表

1. Expandable Tile

   • 可定制的可扩展列表瓷砖控件，带有悬停和选择状态。
   • 提供带子项的动画可扩展瓷砖。
   • 支持悬停效果、选择状态和各种状态的自定义颜色。

2. Date Picker

   • 用户可以使用下拉菜单选择日期、月份和年份。
   • 支持自定义标签和提示文本。

3. Circular Percentage

   • 可定制的圆形百分比指示器控件，支持动画。
   • 显示圆形进度指示器，可选中心文本和底部文本。
   • 进度会在百分比值变化时进行动画显示。

4. Gender Picker

   • 提供性别选择界面，包含男性和女性选项。
   • 展示两个按钮，分别代表男性和女性图标。
   • 选择的性别会以相应的颜色高亮（蓝色表示男性，粉色表示女性）。

5. Sidebar

   • 可定制的侧边栏控件，包含一系列项目。
   • 提供带有可选悬停效果、选择状态和自定义颜色的侧边栏。

6. Dashboard

   • 自定义仪表板，单独的侧边栏标题，更多自定义功能。

安装

在 Dart 代码中导入该包：

import 'package:widget_tray/widget_tray.dart';

示例

ExpansionListExample()

CustomSidebar()

GenderPickerExample()

DatePickerExample()

CircularPercentageExample()

CustomDashboard()

示例代码

import 'package:flutter/material.dart';

import 'Listtile/listtile_example.dart';
import 'Sidebar/sidebar.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SidebarExample(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom WidgetTray'),
      ),
      body: Column(
        children: [
          const Text('Example All Wigdet'),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              iconButton(context, Icons.list_outlined, const ExpansionListExample()),
              iconButton(context, Icons.view_sidebar, const SidebarExample()),
            ],
          )
        ],
      ),
    );
  }

  Widget iconButton(BuildContext context, icon, Widget page) {
    return IconButton(
        tooltip: '$page',
        onPressed: () => navigate(context, page),
        icon: Icon(icon));
  }

  void navigate(BuildContext context, page) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => page,
      ),
    );
  }
}