Flutter时间选择插件material_duration_picker的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter时间选择插件material_duration_picker的使用

Material Duration Picker

一个遵循Material Design 3指南的时间选择插件。

开始使用

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

dart pub add material_duration_picker

使用方法

首先，确保在MaterialApp中添加默认的本地化代理（目前不支持全局代理）：

import 'package:material_duration_picker/material_duration_picker.dart';

MaterialApp(
  localizationsDelegates: const [
    DefaultDurationPickerMaterialLocalizations.delegate,
  ],
  // 其他配置...
),

接下来，在你的应用中添加按钮以触发时间选择对话框。例如：

IconButton(
  icon: const Icon(Icons.timelapse),
  onPressed: () {
    showDurationPicker(
      context: context,
      initialDuration: Duration.zero,
    );
  },
),

你也可以直接在代码中使用DurationPickerDialog组件：

DurationPickerDialog(
  durationPickerMode: DurationPickerMode.hm,
  initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
),

DurationPickerDialog(
  durationPickerMode: DurationPickerMode.hms,
  initialEntryMode: DurationPickerEntryMode.input,
  initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
),

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中集成material_duration_picker插件。

import 'dart:developer' as developer;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_duration_picker/material_duration_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        DefaultDurationPickerMaterialLocalizations.delegate,
      ],
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
      ),
      home: const Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: const Icon(Icons.timelapse),
                  onPressed: () {
                    showDurationPicker(
                      durationPickerMode: DurationPickerMode.ms,
                      context: context,
                      initialDuration: Duration.zero,
                    );
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.timelapse),
                  onPressed: () {
                    showDurationPicker(
                      durationPickerMode: DurationPickerMode.hms,
                      context: context,
                      initialDuration: Duration.zero,
                    );
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.timelapse),
                  onPressed: () {
                    showDurationPicker(
                      durationPickerMode: DurationPickerMode.ms,
                      context: context,
                      initialDuration: Duration.zero,
                    );
                  },
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: const Icon(Icons.access_time),
                  onPressed: () {
                    showTimePicker(
                      context: context,
                      initialTime: TimeOfDay.now(),
                    );
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.date_range),
                  onPressed: () {
                    showDatePicker(
                        context: context,
                        firstDate: DateTime.now(),
                        lastDate: DateTime(DateTime.now().year + 1));
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.date_range),
                  onPressed: () {
                    showDateRangePicker(
                        context: context,
                        firstDate: DateTime.now(),
                        lastDate: DateTime(DateTime.now().year + 1));
                  },
                ),
              ],
            ),
            const Divider(),
            const DurationPickerDialog(
              durationPickerMode: DurationPickerMode.hm,
              initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
            ),
            const DurationPickerDialog(
              durationPickerMode: DurationPickerMode.hm,
              initialEntryMode: DurationPickerEntryMode.input,
              initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
            ),
            const DurationPickerDialog(
              durationPickerMode: DurationPickerMode.hms,
              initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
            ),
            const DurationPickerDialog(
              durationPickerMode: DurationPickerMode.hms,
              initialEntryMode: DurationPickerEntryMode.input,
              initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
            ),
            const DurationPickerDialog(
              durationPickerMode: DurationPickerMode.ms,
              initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
            ),
            const DurationPickerDialog(
              durationPickerMode: DurationPickerMode.ms,
              initialEntryMode: DurationPickerEntryMode.input,
              initialDuration: Duration(hours: 1, minutes: 30, seconds: 45),
            ),
            const Divider(),
            CupertinoTimerPicker(
              mode: CupertinoTimerPickerMode.hms,
              onTimerDurationChanged: (Duration value) {
                developer.log(value.toString());
              },
            ),
            const Divider(),
            TimePickerDialog(
              initialTime: TimeOfDay.now(),
            ),
            TimePickerDialog(
              initialEntryMode: TimePickerEntryMode.input,
              initialTime: TimeOfDay.now(),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter时间选择插件material_duration_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间选择插件material_duration_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用material_duration_picker插件来实现时间选择的代码示例。material_duration_picker是一个流行的Flutter插件，用于选择持续时间（例如时间间隔）。

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

dependencies:
  flutter:
    sdk: flutter
  material_duration_picker: ^x.y.z  # 替换为最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用MaterialDurationPicker。

示例代码

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:material_duration_picker/material_duration_picker.dart';
  1. 创建一个包含时间选择器的页面
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DurationPickerPage(),
    );
  }
}

class DurationPickerPage extends StatefulWidget {
  @override
  _DurationPickerPageState createState() => _DurationPickerPageState();
}

class _DurationPickerPageState extends State<DurationPickerPage> {
  Duration? selectedDuration;

  void _showDurationPicker() async {
    final Duration? result = await showDurationPicker(
      context: context,
      initialDuration: selectedDuration ?? Duration.zero,
      locale: Localizations.localeOf(context),
    );

    if (result != null) {
      setState(() {
        selectedDuration = result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Duration Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Duration: ${selectedDuration?.inHours.toString()}h ${selectedDuration?.inMinutes % 60}m',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showDurationPicker,
              child: Text('Pick Duration'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 导入包：首先导入flutter/material.dart和material_duration_picker/material_duration_picker.dart。

  2. 创建主应用：在MyApp类中，我们设置了MaterialApp并指定了主页面为DurationPickerPage。

  3. 创建状态页面：在DurationPickerPage类中，我们创建了一个有状态的页面_DurationPickerPageState。

  4. 定义选择逻辑：在_showDurationPicker函数中，我们调用showDurationPicker函数显示时间选择器。用户选择后，将结果保存在selectedDuration变量中。

  5. 构建UI：在build方法中，我们构建了一个简单的UI，包含一个显示所选持续时间的Text和一个用于触发选择器的ElevatedButton。

这个示例展示了如何使用material_duration_picker插件来在Flutter应用中实现时间选择功能。你可以根据需要进行进一步的自定义和扩展。

回到顶部