CODEWITHSUNDEEP
flutterdart
Abdullah La
Abdullah La

Reputation: 9

How can I build time range picker in flutter

enter image description here

How can I build time range picker same in the picture

Upvotes: 0

Views: 4462

Answers (2)

Areeb Momin
Areeb Momin

Reputation: 447

I have used time_range_picker library.

Output:

My Sample output

Code:

            onTap: () async {
          TimeRange? result = await showTimeRangePicker(
            context: context,
            start: const TimeOfDay(hour: 10, minute: 0),
            end: const TimeOfDay(hour: 20, minute: 0),
            interval: const Duration(minutes: 30),
            use24HourFormat: false,
            disabledTime: TimeRange(
              startTime: const TimeOfDay(hour: 22, minute: 0),
              endTime: const TimeOfDay(hour: 6, minute: 0),
            ),
            disabledColor: Colors.white,
            strokeWidth: 8,
            strokeColor: Colors.green.shade500.withOpacity(0.8),
            ticks: 8,
            ticksLength: 32,
            ticksColor: Colors.grey,
            labels: [
              '12 AM',
              '3 AM',
              '6 AM',
              '9 AM',
              '12 PM',
              '3 PM',
              '6 PM',
              '9 PM',
            ].asMap().entries.map((e) {
              return ClockLabel.fromIndex(
                  idx: e.key, length: 8, text: e.value);
            }).toList(),
            labelOffset: 36,
            rotateLabels: false,
            padding: 64,
            labelStyle: TextStyle(
              fontWeight: FontWeight.w400,
              fontSize: 12,
              color: Colors.grey.shade700,
            ),
            timeTextStyle: const TextStyle(
              fontWeight: FontWeight.w700,
              fontSize: 20,
              color: Colors.white,
            ),
            activeTimeTextStyle: const TextStyle(
              fontWeight: FontWeight.w700,
              fontSize: 28,
              color: Colors.white,
            ),
            fromText: Strings.open,
            toText: Strings.close,
            handlerColor: Colors.green.shade600,
            selectedColor: Colors.green.shade400,
          );
          if (result != null) {
            print("result " + result.toString());
          }
        },

Upvotes: 0

Vettiyanakan
Vettiyanakan

Reputation: 8470

You can use some package from pub.dev. time_range: ^1.0.2 this is a good package to start with.

TimeRange(
    fromTitle: Text('From', style: TextStyle(fontSize: 18, color: gray),),
    toTitle: Text('To', style: TextStyle(fontSize: 18, color: gray),),
    titlePadding: 20,
    textStyle: TextStyle(fontWeight: FontWeight.normal, color: Colors.black87),
    activeTextStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
    borderColor: dark,
    backgroundColor: Colors.transparent,
    activeBackgroundColor: orange,
    firstTime: TimeOfDay(hour: 14, minute: 30),
    lastTime: TimeOfDay(hour: 20, minute: 00),
    timeStep: 10,
    timeBlock: 30,
    onRangeCompleted: (range) => setState(() => print(range)),
  )

Some other packages with same function:

Upvotes: 2

Related Questions