如何在 showTimePicker 构建中添加两个配置？

Question

我正在设置一个 showTimePicker，我需要为其设置主题和时间格式。 两者都在小部件构建器中配置，但我不知道如何放置要返回的两个配置。

这是 TimePicker 配置的代码，我对需要添加的第二个配置的行进行了注释。

final TimeOfDay selectedTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return (
      MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child,
    ));
      /*Theme(
        data: ThemeData.dark().copyWith(
          colorScheme: ColorScheme.dark(
            primary: redColor,
            onPrimary: Colors.white,
            surface: greyColor,
            onSurface: greyVeryLightColor,
          ),
          dialogBackgroundColor: greyLightColor,
        ),
        child: child,
      )*/
  },
);

两者分别工作，但我不知道如何合并设置。

Answer 1

您可以简单地用 Theme 小部件包装 MediaQuery 小部件的子级。 请看下面的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title:const Text("Flutter Demo")),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: () async {
          final TimeOfDay selectedTime = await showTimePicker(
            context: context,
            initialTime: TimeOfDay.now(),
            builder: (BuildContext context, Widget child) {
              return MediaQuery(
                data: MediaQuery.of(context)
                    .copyWith(alwaysUse24HourFormat: true),
                child: Theme(
                    data: ThemeData.dark().copyWith(
                      colorScheme: ColorScheme.dark(
                        primary: Colors.red,
                        onPrimary: Colors.white,
                        surface: Colors.grey,
                        onSurface: Colors.grey[100],
                      ),
                      dialogBackgroundColor: Colors.grey[400],
                    ),
                    child: child),
              );
            },
          );
          print(selectedTime);
        },
        child: const Text("Show Time Picker"));
  }
}