flutter - Flutter，如何正确使用 TimePickerThemeData()？

Question

我现在看到这个https://github.com/flutter/flutter/pull/59191

似乎新添加了一个名为 TimePickerThemeData 的功能，以便轻松自定义。

但我没有看到任何例子。

任何已实现的代码将不胜感激

---

class AppTheme {
  AppTheme._();

  static final ThemeData lightTheme = ThemeData(
    timePickerTheme: TimePickerThemeData(
      dayPeriodTextColor: Colors.red,
      dayPeriodColor: Colors.green, //Background of AM/PM.
      dialHandColor: Colors.red,
      dialTextColor: Colors.red,
    ),
  );
}

class OtherClass{
...

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.lightTheme,
      home: Scaffold(
         body: ...
           child: SomeChild(
             onTap: () async{
                 await showTimePicker(
                                  context: context,
                                  helpText: "",
                                  initialTime:
                                      TimeOfDay(hour: 10, minute: 47),
                                  initialEntryMode:
                                      TimePickerEntryMode.input,
                                  builder:
                                      (BuildContext context, Widget child) {
                                    return MediaQuery(
                                      data: MediaQuery.of(context).copyWith(
                                        alwaysUse24HourFormat: true,
                                      ),
                                      child: child,
                                    );
                                  },
                                )
                }
              ) 
       ),);
     }
    }

标签： flutter

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用Themewrap BuilderwrapElevatedButton/FloatingActionButton
代码片段

Theme(
  data: ThemeData(
    primarySwatch: Colors.blue,
    timePickerTheme: TimePickerThemeData(
      dayPeriodTextColor: Colors.red,
      dayPeriodColor: Colors.green, //Background of AM/PM.
      dialHandColor: Colors.red,
      dialTextColor: Colors.red,
      hourMinuteTextColor: Colors.red,
      hourMinuteColor: Colors.green,
    ),
  ),
  child: Builder(builder: (BuildContext context) {
    return ElevatedButton(
        onPressed: () async {

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Theme(
              data: ThemeData(
                primarySwatch: Colors.blue,
                timePickerTheme: TimePickerThemeData(
                  dayPeriodTextColor: Colors.red,
                  dayPeriodColor: Colors.green, //Background of AM/PM.
                  dialHandColor: Colors.red,
                  dialTextColor: Colors.red,
                  hourMinuteTextColor: Colors.red,
                  hourMinuteColor: Colors.green,
                ),
              ),
              child: Builder(builder: (BuildContext context) {
                return ElevatedButton(
                    onPressed: () async {
                      print(
                          "${TimePickerTheme.of(context).dayPeriodTextColor.toString()}");
                      print(
                          "${TimePickerTheme.of(context).dayPeriodColor.toString()}");
                      print(
                          "${TimePickerTheme.of(context).hourMinuteColor.toString()}");
                      await showTimePicker(
                        context: context,
                        helpText: "",
                        initialTime: TimeOfDay(hour: 10, minute: 47),
                        initialEntryMode: TimePickerEntryMode.input,
                        builder: (BuildContext context, Widget child) {
                          return MediaQuery(
                            data: MediaQuery.of(context).copyWith(
                              alwaysUse24HourFormat: true,
                            ),
                            child: child,
                          );
                        },
                      );
                    },
                    child: Text('Submit'));
              }),
            )
          ],
        ),
      ),
      floatingActionButton: Theme(
          data: ThemeData(
            primarySwatch: Colors.blue,
            timePickerTheme: TimePickerThemeData(
              dayPeriodTextColor: Colors.red,
              dayPeriodColor: Colors.green, //Background of AM/PM.
              dialHandColor: Colors.red,
              dialTextColor: Colors.red,
              hourMinuteTextColor: Colors.purple,
              hourMinuteColor: Colors.brown,
            ),
          ),
          child: Builder(builder: (BuildContext context) {
            return FloatingActionButton(
              onPressed: () async {
                print(
                    "${TimePickerTheme.of(context).dayPeriodTextColor.toString()}");
                print(
                    "${TimePickerTheme.of(context).dayPeriodColor.toString()}");
                print(
                    "${TimePickerTheme.of(context).hourMinuteColor.toString()}");
                await showTimePicker(
                  context: context,
                  helpText: "",
                  initialTime: TimeOfDay(hour: 10, minute: 47),
                  initialEntryMode: TimePickerEntryMode.input,
                  builder: (BuildContext context, Widget child) {
                    return MediaQuery(
                      data: MediaQuery.of(context).copyWith(
                        alwaysUse24HourFormat: true,
                      ),
                      child: child,
                    );
                  },
                );
              },
              child: Icon(Icons.add),
            );
          })),
    );
  }
}