wip add material time picker

lib/src/widgets/material-time-picker/material-day-input-padding.widget.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:nice_flutter_kit/src/widgets/material-time-picker/material-render-input-padding,widget.dart';
+
+class DayPeriodInputPadding extends SingleChildRenderObjectWidget {
+  const DayPeriodInputPadding({
+    required Widget super.child,
+    required this.minSize,
+    required this.orientation,
+  });
+
+  final Size minSize;
+  final Orientation orientation;
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return RenderInputPadding(minSize, orientation);
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, covariant RenderInputPadding renderObject) {
+    renderObject
+      ..minSize = minSize
+      ..orientation = orientation;
+  }
+}

lib/src/widgets/material-time-picker/material-day-period-control.widget.dart

@@ -0,0 +1,194 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:nice_flutter_kit/src/widgets/material-time-picker/material-day-input-padding.widget.dart';
+import 'package:nice_flutter_kit/src/widgets/material-time-picker/material-time-picker.widget.dart';
+
+class DayPeriodControl extends StatelessWidget {
+  const DayPeriodControl({
+    required this.selectedTime,
+    required this.onChanged,
+    required this.orientation,
+  });
+
+  final TimeOfDay selectedTime;
+  final Orientation orientation;
+  final ValueChanged<TimeOfDay> onChanged;
+
+  void _togglePeriod() {
+    final int newHour = (selectedTime.hour + TimeOfDay.hoursPerPeriod) % TimeOfDay.hoursPerDay;
+    final TimeOfDay newTime = selectedTime.replacing(hour: newHour);
+    onChanged(newTime);
+  }
+
+  void _setAm(BuildContext context) {
+    if (selectedTime.period == DayPeriod.am) {
+      return;
+    }
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        break;
+    }
+    _togglePeriod();
+  }
+
+  void _setPm(BuildContext context) {
+    if (selectedTime.period == DayPeriod.pm) {
+      return;
+    }
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        break;
+    }
+    _togglePeriod();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final MaterialLocalizations materialLocalizations = MaterialLocalizations.of(context);
+    final ColorScheme colorScheme = Theme.of(context).colorScheme;
+    final TimePickerThemeData timePickerTheme = TimePickerTheme.of(context);
+    final bool isDark = colorScheme.brightness == Brightness.dark;
+    final Color textColor = timePickerTheme.dayPeriodTextColor ??
+        MaterialStateColor.resolveWith((Set<MaterialState> states) {
+          return states.contains(MaterialState.selected)
+              ? colorScheme.primary
+              : colorScheme.onSurface.withOpacity(0.60);
+        });
+    final Color backgroundColor = timePickerTheme.dayPeriodColor ??
+        MaterialStateColor.resolveWith((Set<MaterialState> states) {
+          // The unselected day period should match the overall picker dialog
+          // color. Making it transparent enables that without being redundant
+          // and allows the optional elevation overlay for dark mode to be
+          // visible.
+          return states.contains(MaterialState.selected)
+              ? colorScheme.primary.withOpacity(isDark ? 0.24 : 0.12)
+              : Colors.transparent;
+        });
+    final bool amSelected = selectedTime.period == DayPeriod.am;
+    final Set<MaterialState> amStates = amSelected ? <MaterialState>{MaterialState.selected} : <MaterialState>{};
+    final bool pmSelected = !amSelected;
+    final Set<MaterialState> pmStates = pmSelected ? <MaterialState>{MaterialState.selected} : <MaterialState>{};
+    final TextStyle textStyle = timePickerTheme.dayPeriodTextStyle ?? Theme.of(context).textTheme.titleMedium!;
+    final TextStyle amStyle = textStyle.copyWith(
+      color: MaterialStateProperty.resolveAs(textColor, amStates),
+    );
+    final TextStyle pmStyle = textStyle.copyWith(
+      color: MaterialStateProperty.resolveAs(textColor, pmStates),
+    );
+    OutlinedBorder shape = timePickerTheme.dayPeriodShape ??
+        const RoundedRectangleBorder(borderRadius: MaterialTimePickerWidget.kDefaultBorderRadius);
+    final BorderSide borderSide = timePickerTheme.dayPeriodBorderSide ??
+        BorderSide(
+          color: Color.alphaBlend(colorScheme.onBackground.withOpacity(0.38), colorScheme.surface),
+        );
+    // Apply the custom borderSide.
+    shape = shape.copyWith(
+      side: borderSide,
+    );
+
+    final double buttonTextScaleFactor = math.min(MediaQuery.of(context).textScaleFactor, 2.0);
+
+    final Widget amButton = Material(
+      color: MaterialStateProperty.resolveAs(backgroundColor, amStates),
+      child: InkWell(
+        onTap: Feedback.wrapForTap(() => _setAm(context), context),
+        child: Center(
+          child: Text(
+            materialLocalizations.anteMeridiemAbbreviation,
+            style: amStyle,
+            textScaleFactor: buttonTextScaleFactor,
+          ),
+        ),
+      ),
+    );
+
+    final Widget pmButton = Material(
+      color: MaterialStateProperty.resolveAs(backgroundColor, pmStates),
+      child: InkWell(
+        onTap: Feedback.wrapForTap(() => _setPm(context), context),
+        child: Semantics(
+          checked: pmSelected,
+          inMutuallyExclusiveGroup: true,
+          button: true,
+          child: Center(
+            child: Text(
+              materialLocalizations.postMeridiemAbbreviation,
+              style: pmStyle,
+              textScaleFactor: buttonTextScaleFactor,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final Widget result;
+    switch (orientation) {
+      case Orientation.portrait:
+        const double width = 52.0;
+        result = DayPeriodInputPadding(
+          minSize: const Size(width, kMinInteractiveDimension * 2),
+          orientation: orientation,
+          child: SizedBox(
+            width: width,
+            height: MaterialTimePickerWidget.kTimePickerHeaderControlHeight,
+            child: Material(
+              clipBehavior: Clip.antiAlias,
+              color: Colors.transparent,
+              shape: shape,
+              child: Column(
+                children: <Widget>[
+                  Expanded(child: amButton),
+                  Container(
+                    decoration: BoxDecoration(
+                      border: Border(top: borderSide),
+                    ),
+                    height: 1,
+                  ),
+                  Expanded(child: pmButton),
+                ],
+              ),
+            ),
+          ),
+        );
+        break;
+      case Orientation.landscape:
+        result = DayPeriodInputPadding(
+          minSize: const Size(0.0, kMinInteractiveDimension),
+          orientation: orientation,
+          child: SizedBox(
+            height: 40.0,
+            child: Material(
+              clipBehavior: Clip.antiAlias,
+              color: Colors.transparent,
+              shape: shape,
+              child: Row(
+                children: <Widget>[
+                  Expanded(child: amButton),
+                  Container(
+                    decoration: BoxDecoration(
+                      border: Border(left: borderSide),
+                    ),
+                    width: 1,
+                  ),
+                  Expanded(child: pmButton),
+                ],
+              ),
+            ),
+          ),
+        );
+        break;
+    }
+    return result;
+  }
+}