使用 Dart / Flutter，我将如何比较两个文本字段的值以提供持续时间输出？

Question

假设我有 2 个文本字段，例如，用户可以输入 24 小时格式的 1400 时间。文本字段 1 是班次的开始时间，文本字段 2 是结束时间。理想情况下，我希望在调用 textfields onSubmit 或者即使其中 1 个文本字段失去焦点时，在文本小部件中显示两次之间的持续时间。我可以使用带有 x.difference(y) 的 intl 包计算和显示 2 个硬编码字符串的持续时间，但我很难通过文本字段达到这一点。感谢您的帮助。

edit 在最初的帖子之后考虑它，对文本字段的需求并不是 100% 需要的。比较的两次可能来自日期时间选择器之类的东西。重要的是我已经尝试过文本字段、日期时间选择器和时间选择器，但无法找到解决方案。

import 'package:flutter/material.dart';

class ActivityLog extends StatefulWidget {
  @override
  _ActivityLogState createState() => _ActivityLogState();
}

class _ActivityLogState extends State<ActivityLog> {
  TextEditingController _controller1 = TextEditingController();
  TextEditingController _controller2 = TextEditingController();

  String duration = '0000';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Activity Log'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller1,
              maxLength: 4,
              maxLines: 1,
              keyboardType: TextInputType.datetime,
              decoration: InputDecoration(
                labelText: 'Start time',
                hintText: 'hhmm',
                counterText: '',
              ),
            ),
            TextField(
              controller: _controller2,
              maxLength: 4,
              maxLines: 1,
              keyboardType: TextInputType.datetime,
              decoration: InputDecoration(
                labelText: 'Finish time',
                hintText: 'hhmm',
                counterText: '',
              ),
            ),
            Text('Duration: $duration'),
            /*
            can't figure out how to get the input from the textfields in the format of
            HHmm (hours and minutes) and calculate the duration which is to be displayed
            in the text widget above 
            */
          ],
        ),
      ),
    );
  }
}

Answer 1

看看下面的内容是否适合你。显然我没有做任何验证，但这可能是一个开始，你可以从中构建。下面是它的外观图片here。

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

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

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller1 = TextEditingController();
  final _controller2 = TextEditingController();

  var _result = "";

  String addColon(String s) {
    return s.substring(0, 2) + ":" + s.substring(2);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              TextField(controller: _controller1),
              TextField(controller: _controller2),
              ElevatedButton(
                  onPressed: () {
                    var _d1 =
                        DateFormat.Hm().parse(addColon(_controller1.text));
                    var _d2 =
                        DateFormat.Hm().parse(addColon(_controller2.text));

                    setState(() {
                      _result =
                          '${_d2.difference(_d1).inSeconds.toString()} seconds';
                    });
                  },
                  child: const Text("Diff")),
              const SizedBox(height: 50),
              Text(_result),
            ],
          ),
        ),
      ),
    );
  }
}