Skip to content

The selected and unselected day period box are in same color in TimePicker #139445

@sparsh-git-dev

Description

@sparsh-git-dev

Steps to reproduce

Set themeData in materialApp like this

  theme: ThemeData.light(useMaterial3: true).copyWith(
        timePickerTheme: TimePickerThemeData(
          dayPeriodColor:Colors.red,)

call the widget

 Center(
        child: ElevatedButton(onPressed: ()async{
TimeOfDay initialTime = TimeOfDay.now();
TimeOfDay? pickedTime = await showTimePicker(
    context: context,
    initialTime: initialTime,
);

        }, child: Text("picker")),
      ),

Expected results

The unselected day period box foreground color should be in transparent or different color

Actual results

The selected and unselected day period box are in same color
Screenshot 2023-12-03 172937

Code sample

Code sample
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // Color getColor(Set<MaterialState> states) {
    //   const Set<MaterialState> interactiveStates = <MaterialState>{
    //     MaterialState.pressed,
    //     MaterialState.hovered,
    //     MaterialState.focused,
    //   };
    //   if (states.any(interactiveStates.contains)) {
    //     return Colors.blue;
    //   }
    //   return Colors.red;
    // }
    bool selected = false;
      final Set<MaterialState> states = <MaterialState>{ if (selected) MaterialState.selected };
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(useMaterial3: true).copyWith(
        
           buttonTheme: ButtonTheme.of(context).copyWith(
            disabledColor: Colors.black,
          colorScheme: ColorScheme.light(
            secondary: Colors
                .green, // Color you want for action buttons (CANCEL and OK)
          ),
        ),
primaryColor: Colors.orange,
secondaryHeaderColor: Colors.deepPurpleAccent,
        timePickerTheme: TimePickerThemeData(
          dayPeriodBorderSide: BorderSide(color: Colors.red),
          dayPeriodColor:Colors.red,
                hourMinuteTextColor: Colors.white,
          dayPeriodTextColor: Colors.white,
          // hourMinuteTextStyle: TextStyle(color: ),
          
          backgroundColor: Colors.black.withOpacity(0.2),
    
          dialBackgroundColor: Colors.yellow.withOpacity(0.2),
     
          entryModeIconColor: Colors.green,
          hourMinuteColor: Colors.pink,
          dialHandColor: Colors.purple,
          confirmButtonStyle: ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.blue)),
          cancelButtonStyle: ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.red))
        ),
        
      textButtonTheme: TextButtonThemeData(
          style: ButtonStyle(
              // foregroundColor: MaterialStateProperty.resolveWith(getColor)
              ),
        ),
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(onPressed: ()async{
TimeOfDay initialTime = TimeOfDay.now();
TimeOfDay? pickedTime = await showTimePicker(
    context: context,
    initialTime: initialTime,
);

        }, child: Text("picker")),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[
Screenshot 2023-12-03 172937
]

Flutter Doctor output

Doctor output

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: date/time pickerDate or time picker widgetsf: material designflutter/packages/flutter/material repository.found in release: 3.16Found to occur in 3.16found in release: 3.18Found to occur in 3.18frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions