在 Flutterflow 中创建进出时间

Question

有没有办法在 flutterflow 中创建时间输入/输出？我需要添加哪些操作？谢谢，这是我在 flutterflow 中创建的应用程序的屏幕截图。

Answer 1

根据您的屏幕截图和问题，我已经创建了一个完整的小部件。您必须实现自己的逻辑以节省进出某处的时间并根据需要修复布局，但这里是：

import 'package:flutter/material.dart';

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

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

class TimeScreenState extends State<TimeScreen> {
  String timeIn = '', timeOut = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 30.0),
              Row(
                children: const [
                  Text(
                    'Atendance',
                    style: TextStyle(
                      fontSize: 32.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Expanded(
                    child: Align(
                      alignment: Alignment.center,
                      child: Icon(
                        Icons.flutter_dash,
                        size: 40.0,
                        color: Colors.orange,
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 16.0),
              const Text(
                '[Display Name]',
                style: TextStyle(
                  color: Colors.grey,
                ),
              ),
              const SizedBox(height: 32.0),
              Center(
                child: SizedBox(
                  width: MediaQuery.of(context).size.width * 0.8,
                  child: Card(
                    color: Colors.white,
                    elevation: 2,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 16.0,
                        vertical: 32.0,
                      ),
                      child: Row(
                        children: [
                          Expanded(
                            child: Column(
                              children: [
                                const Text(
                                  'Time In',
                                  style: TextStyle(
                                    fontSize: 18.0,
                                  ),
                                ),
                                Text(
                                  timeIn.isEmpty ? '--/--' : timeIn,
                                  style: const TextStyle(
                                    fontSize: 24.0,
                                    color: Colors.orange,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            child: Column(
                              children: [
                                const Text(
                                  'Time Out',
                                  style: TextStyle(
                                    fontSize: 18.0,
                                  ),
                                ),
                                Text(
                                  timeOut.isEmpty ? '--/--' : timeIn,
                                  style: const TextStyle(
                                    fontSize: 24.0,
                                    color: Colors.orange,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 32.0),
              const Center(
                child: Text(
                  'Time Time Widget',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(height: 32.0),
              Center(
                child: SizedBox(
                  width: MediaQuery.of(context).size.width * 0.5,
                  height: 45.0,
                  child: OutlinedButton(
                    style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all<Color>(Colors.orange),
                      side: MaterialStateProperty.all(
                        const BorderSide(
                          color: Colors.orange,
                          style: BorderStyle.solid,
                        ),
                      ),
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                      ),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Text(
                        'Time In',
                        style: TextStyle(
                          fontSize: 20.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    onPressed: () => createStartTime(),
                  ),
                ),
              ),
              const SizedBox(height: 32.0),
              Center(
                child: SizedBox(
                  width: MediaQuery.of(context).size.width * 0.5,
                  height: 45.0,
                  child: OutlinedButton(
                    style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all<Color>(Colors.orange),
                      side: MaterialStateProperty.all(
                        const BorderSide(
                          color: Colors.orange,
                          style: BorderStyle.solid,
                        ),
                      ),
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                      ),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Text(
                        'Time Out',
                        style: TextStyle(
                          fontSize: 20.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    onPressed: () => createEndTime(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  createStartTime() {
    /** Implement your logic to save time data */
    setState(() {
      timeIn = TimeOfDay.now().format(context);
    });
  }

  createEndTime() {
    /** Implement your logic to save time data */
    setState(() {
      timeOut = TimeOfDay.now().format(context);
    });
  }
}

导致：

Answer 2

你需要清楚你想要实现什么逻辑

假设某个经理员工会输入该信息（您可以使用日期/时间选择器，一旦选择了日期/时间，您就可以根据您的逻辑更新应用程序状态/页面状态/数据库）

https://docs.flutterflow.io/actions/actions/widget-ui-interactions/date-time-picker