time_ring_picker 0.0.1

A highly customizable circular clock-style time range picker for selecting start/end times (e.g. sleep schedules) with overnight range support.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:time_ring_picker/time_ring_picker.dart';

void main() => runApp(const ExampleApp());

/// Demo app for `time_ring_picker` — shows a default-styled picker and a
/// fully customized one side by side.
class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'time_ring_picker example',
      theme: ThemeData.dark(useMaterial3: true),
      home: const ExampleHomePage(),
    );
  }
}

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

  @override
  State<ExampleHomePage> createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage> {
  TimeOfDay _start = const TimeOfDay(hour: 21, minute: 0);
  TimeOfDay _end = const TimeOfDay(hour: 6, minute: 0);
  Duration _duration = const Duration(hours: 9);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('time_ring_picker')),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            Text(
              'Default style',
              style: Theme.of(context).textTheme.titleMedium,
            ),
            const SizedBox(height: 8),
            Center(
              child: TimeRingPicker(
                initialStartTime: _start,
                initialEndTime: _end,
                onTimeChanged: (start, end, duration) {
                  setState(() {
                    _start = start;
                    _end = end;
                    _duration = duration;
                  });
                },
              ),
            ),
            const SizedBox(height: 16),
            Text(
              'Selected: ${_start.format(context)} - ${_end.format(context)} '
              '(${_duration.inHours}h ${_duration.inMinutes % 60}m)',
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.bodyLarge,
            ),
            const SizedBox(height: 32),
            Text(
              'Fully customized style, 24h format',
              style: Theme.of(context).textTheme.titleMedium,
            ),
            const SizedBox(height: 8),
            Center(
              child: TimeRingPicker(
                initialStartTime: const TimeOfDay(hour: 22, minute: 30),
                initialEndTime: const TimeOfDay(hour: 5, minute: 45),
                timeFormat: TimeFormat.h24,
                minuteInterval: 15,
                style: const TimeRingPickerStyle(
                  size: 220,
                  borderWidth: 10,
                  backgroundColor: Color(0xFF1B1D28),
                  gradientColors: [Color(0xFFFF7E5F), Color(0xFFFEB47B)],
                  handleColor: Colors.white,
                  handleSize: 20,
                  handleBorderColor: Color(0xFFFF7E5F),
                  durationTextStyle: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                  startEndTimeTextStyle: TextStyle(
                    fontSize: 13,
                    color: Colors.white70,
                  ),
                  showTicks: false,
                  numberPosition: NumberPosition.inside,
                  startHandleIcon: Icons.bedtime,
                  endHandleIcon: Icons.wb_sunny,
                  handleIconColor: Color(0xFFFF7E5F),
                  arcGlowBlurRadius: 10,
                  arcGlowSpread: 1,
                  arcGlowOpacity: 0.55,
                ),
                onTimeChanged: (start, end, duration) {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}