Flutter可伸缩布局插件flutter_stretchable_widgets的使用

flutter_stretchable_widgets

许多有趣且有用的组件，如选择器或可展开组件。

演示

请运行 <code>example/lib/main.dart</code> 查看更多演示。

1. StretchablePanelWidget

import 'package:flutter_stretchable_widgets/flutter_stretchable_widgets.dart';

...

[@override](/user/override)
Widget build(BuildContext context) {
    return Stack(
      children: [
        /// 左上角的一个
        Positioned(
          left: 0,
          right: 0,
          top: 80,
          child: StretchablePanelWidget(
            triggerWidget: const Icon(Icons.add),
            stretchWidget: Text('Hello world', style: TextStyle(color: Colors.grey.withAlpha(128))),
          ),
        ),

        /// 右上角的一个
        Positioned(
          left: 0,
          right: 0,
          top: 80,
          child: StretchablePanelWidget(
            widgetsBuilder: (context, state) {
              return state.isShowingTriggeredWidget ? const Icon(Icons.add) : const Text('Hello world');
            },
          ),
        ),
      ],
    );
}
...

2. TimeRangePickerView

import 'package:flutter_stretchable_widgets/flutter_stretchable_widgets.dart';

...

void onPressEvent() {
    /// 显示时间范围选择器
    TimeRangePickerView.show(
      context,
      onChange: (startDateTime, endDateTime) {
        print('ON CHANGE: startDateTime: $startDateTime, endDateTime: $endDateTime');
      },
      onConfirm: (startDateTime, endDateTime) {
        print('ON CONFIRM: startDateTime: $startDateTime, endDateTime: $endDateTime');
      },
    );
}
...

特性与问题

请随时在 问题追踪器 中请求新功能和报告问题。

完整示例

以下是一个完整的示例，展示了如何使用 flutter_stretchable_widgets 插件。

// ignore_for_file: avoid_print

import 'package:example/view_factory.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stretchable_widgets/flutter_stretchable_widgets.dart';
import 'package:intl/intl.dart';

void main() => runApp(const App());

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

  [@override](/user/override)
  State<App> createState() => AppState();
}

class AppState extends State<App> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: Home()));
  }
}

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

  [@override](/user/override)
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  Couple<DateTime>? changedTimeRange;
  Couple<DateTime>? selectedTimeRange;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        /// 左上角的一个
        Positioned(
          left: 0,
          right: 0,
          top: 80,
          child: ViewFactory.createStretchableWidget(
            isInitShowStretchWidget: false,
            alignment: Alignment.centerLeft,
          ),
        ),

        /// 右上角的一个
        Positioned(
          left: 0,
          right: 0,
          top: 80,
          child: ViewFactory.createStretchableWidget(
            isInitShowStretchWidget: false,
            alignment: Alignment.centerRight,
            isWrappedWithScrollView: true,
            text: ViewFactory.textShort,
          ),
        ),

        /// 左下角的一个
        Positioned(
          left: 0,
          right: 0,
          bottom: 80,
          child: ViewFactory.createStretchableWidget(
            isInitShowStretchWidget: true,
            alignment: Alignment.centerLeft,
          ),
        ),

        /// 右下角的一个
        Positioned(
          left: 0,
          right: 0,
          bottom: 80,
          child: ViewFactory.createStretchableWidget(
            isInitShowStretchWidget: false,
            alignment: Alignment.centerRight,
            isWrappedWithScrollView: true,
            text: ViewFactory.textLong,
          ),
        ),

        StatefulBuilder(
          builder: (context, mSetState) {
            String string4Display(Couple<DateTime>? timeScope) {
              if (timeScope == null) return '';
              DateFormat first = DateFormat('yyyy/MM/dd HH:mm');
              DateFormat second = DateFormat('HH:mm');
              return '${first.format(timeScope.first)}-${second.format(timeScope.last)}';
            }

            return Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const SizedBox(height: 80),
                CupertinoActionSheetButton(
                  title: '显示时间范围选择器',
                  onPressed: () async {
                    changedTimeRange = null;
                    mSetState(() {});

                    TimeRangePickerView.show(
                      context,
                      onChange: (startDateTime, endDateTime) {
                        print('CHANGE: startDateTime: $startDateTime, endDateTime: $endDateTime');
                        changedTimeRange = Couple<DateTime>(startDateTime, endDateTime);
                        mSetState(() {});
                      },
                      onConfirm: (startDateTime, endDateTime) {
                        print('CONFIRM: startDateTime: $startDateTime, endDateTime: $endDateTime');
                        selectedTimeRange = Couple<DateTime>(startDateTime, endDateTime);
                        mSetState(() {});
                      },
                    );
                  },
                ),
                Text(string4Display(changedTimeRange)),
                const SizedBox(height: 16),
                Text(
                  string4Display(selectedTimeRange),
                  style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
              ],
            );
          },
        ),
      ],
    );
  }
}