如何更改Flutter Material 3 DatePicker的主色？

Question

我正在使用 showDatePicker() 在我的 Flutter 应用程序中显示日期选择器。

如何改变紫色？

到目前为止，这是我的主题：

DatePickerThemeData(
  backgroundColor: Color.fromARGB(255, 38, 41, 48),
  surfaceTintColor: Colors.transparent,
  headerForegroundColor: Colors.white,
                  )

Answer 1

更新： UI 更改。

这是您的解决方案。请随时在评论部分表示感谢。

import "package:flutter/material.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "My App",
      home: NewHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class NewHomePage extends StatefulWidget {
  const NewHomePage({super.key});

  @override
  State<NewHomePage> createState() => _NewHomePageState();
}

class _NewHomePageState extends State<NewHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ElevatedButton(
          onPressed: openDatePicker,
          child: const Text("Open Date Picker"),
        ),
      ),
    );
  }

  Future<void> openDatePicker() async {
    await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(3000),
      builder: (BuildContext context, Widget? child) {
        return Theme(
          // The below-written code will only affect the pop-up window.
          data: ThemeData(
            // I tried to match my picker with your photo.
            useMaterial3: true,
            brightness: Brightness.dark,
            colorSchemeSeed: Colors.purple,
            // Write your own code for customizing the date picker theme.
            datePickerTheme: const DatePickerThemeData(),
          ),
          child: child ?? const SizedBox(),
        );
      },
    );
    return Future<void>.value();
  }
}

Answer 2

试试这个：

DatePickerThemeData(
            backgroundColor: Color.fromARGB(255, 38, 41, 48),
            surfaceTintColor: Colors.transparent,
            headerForegroundColor: Colors.white,

            //u need to match the font color also
            dayBackgroundColor: MaterialStateProperty.resolveWith((states) {
              if (states.contains(MaterialState.selected)) {
                return Colors.green;
              }
              return Colors.black;
            }),)