A customizable circular slider for Flutter

flutter customizable circular

a customizable circular slider for flutter.

installation a customizable circular

add

flutter_circular_slider : ^lastest_version

to your pubspec.yaml, and run

flutter packages get

in your project’s root directory.

basic usage for customizable circular

create a new project with command

flutter create myapp

edit lib/main.dart like this:

import 'package:flutter/material.dart';

import 'package:flutter_circular_slider/flutter_circular_slider.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp(
      theme: themedata(
        primaryswatch: colors.blue,
      ),
      home: myhomepage(),
    );
  }
}

class myhomepage extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return scaffold(
        backgroundcolor: colors.bluegrey,
        body: center(
          child: container(child: doublecircularslider(100, 0, 20)),
        ));
  }
}

there are two different options:

• singlecircularslider: has only one handler and can be moved either dragging the handler or just by clicking on different parts of the slider.
• doublecircularslider: has two handlers and both have to be moved by dragging them.

constructor

use cases

sleep time selection

import 'dart:math';

import 'package:flutter/material.dart';

import 'package:flutter_circular_slider/flutter_circular_slider.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp(
      theme: themedata(
        primaryswatch: colors.blue,
      ),
      home: myhomepage(),
    );
  }
}

class myhomepage extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return scaffold(
        body: safearea(
      child: container(
          decoration: boxdecoration(
            image: decorationimage(
              image: assetimage('images/background_morning.png'),
              fit: boxfit.cover,
            ),
          ),
          child: sleeppage()),
    ));
  }
}

class sleeppage extends statefulwidget {
  @override
  _sleeppagestate createstate() => _sleeppagestate();
}

class _sleeppagestate extends state<sleeppage> {
  final basecolor = color.fromrgbo(255, 255, 255, 0.3);

  int inittime;
  int endtime;

  int inbedtime;
  int outbedtime;

  @override
  void initstate() {
    super.initstate();
    _shuffle();
  }

  void _shuffle() {
    setstate(() {
      inittime = _generaterandomtime();
      endtime = _generaterandomtime();
      inbedtime = inittime;
      outbedtime = endtime;
    });
  }

  void _updatelabels(int init, int end) {
    setstate(() {
      inbedtime = init;
      outbedtime = end;
    });
  }

  @override
  widget build(buildcontext context) {
    return column(
      mainaxisalignment: mainaxisalignment.spaceevenly,
      children: [
        text(
          'how long did you stay in bed?',
          style: textstyle(color: colors.white),
        ),
        circularslider(
          288,
          inittime,
          endtime,
          height: 220.0,
          width: 220.0,
          basecolor: color.fromrgbo(255, 255, 255, 0.1),
          selectioncolor: basecolor,
          handlercolor: colors.white,
          handleroutterradius: 12.0,
          onselectionchange: _updatelabels,
          child: padding(
            padding: const edgeinsets.all(12.0),
            child: center(
                child: text('${_formatintervaltime(inbedtime, outbedtime)}',
                    style: textstyle(fontsize: 36.0, color: colors.white))),
          ),
        ),
        row(mainaxisalignment: mainaxisalignment.spaceevenly, children: [
          _formatbedtime('in the', inbedtime),
          _formatbedtime('out of', outbedtime),
        ]),
        flatbutton(
          child: text('s h u f f l e'),
          color: basecolor,
          textcolor: colors.white,
          shape: roundedrectangleborder(
            borderradius: borderradius.circular(50.0),
          ),
          onpressed: _shuffle,
        ),
      ],
    );
  }

  widget _formatbedtime(string pre, int time) {
    return column(
      children: [
        text(pre, style: textstyle(color: basecolor)),
        text('bed at', style: textstyle(color: basecolor)),
        text(
          '${_formattime(time)}',
          style: textstyle(color: colors.white),
        )
      ],
    );
  }

  string _formattime(int time) {
    if (time == 0 || time == null) {
      return '00:00';
    }
    var hours = time ~/ 12;
    var minutes = (time % 12) * 5;
    return '$hours:$minutes';
  }

  string _formatintervaltime(int init, int end) {
    var sleeptime = end > init ? end - init : 288 - init + end;
    var hours = sleeptime ~/ 12;
    var minutes = (sleeptime % 12) * 5;
    return '${hours}h${minutes}m';
  }

  int _generaterandomtime() => random().nextint(288);
}