flutter_circular_slider 1.1.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new79

flutter_circular_slider #

Build Status License: MIT Pub

A customizable circular slider for Flutter.

Getting Started #

Installation #

Add


flutter_circular_slider : ^lastest_version

to your pubspec.yaml, and run

flutter packages get

in your project's root directory.

Basic Usage #

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: CircularSlider(100, 0, 20)),
        ));
  }
}

Basic Slider

Constructor #

ParameterDefaultDescription
intervalsThe number of sections in which the circle will be divided for selection.
initThe initial value in the selection. Has to be bigger than 0 and smaller than intervals.
endThe end value in the selection. Has to be bigger than 0 and smaller than intervals.
height220.0Height of the canvas where the slider is rendered.
width220.0Width of the canvas where the slider is rendered.
primarySectors0Number of sectors painted in the base circle. Painted in selectionColor.
secondarySectors0Number of secondary sectors painted in the base circle. Painted in baseColor.
childnullWidget that will be inserted in the center of the circular slider.
onSelectionChangevoid onSelectionChange(int init, int end)Triggered every time the user interacts with the slider and changes the init and end values.
baseColorColor.fromRGBO(255, 255, 255, 0.1)The color used for the base of the circle.
selectionColorColor.fromRGBO(255, 255, 255, 0.3)The color used for the selection in the circle.
handlerColorColors.whiteThe color used for the handlers.
handlerOutterRadius12.0The radius for the outter circle around the handler.

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);
}

Sleep Slider

[1.1.2] - 2019-04-17

  • Fix typo in changelog.

[1.1.1] - 2019-04-17

  • Fix to allow the widget to work inside a scrollable widget without gesture detectors interfering.

[1.1.0] - 2019-04-09

  • Update README and fix sem versioning.

[1.0.2] - 2019-04-09

  • Add primary and secondary sectors.

[1.0.1] - 2019-04-09

  • Update README.md in the example.

[1.0.0] - 2019-04-08

  • Initial release.

example/README.md

example #

A basic example on how to use the widget circular_slider in Flutter.

Getting Started #

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: CircularSlider(100, 0, 20)),
        ));
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_circular_slider: ^1.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_circular_slider/flutter_circular_slider.dart';
  
Version Uploaded Documentation Archive
1.1.2 Apr 17, 2019 Go to the documentation of flutter_circular_slider 1.1.2 Download flutter_circular_slider 1.1.2 archive
1.1.1 Apr 17, 2019 Go to the documentation of flutter_circular_slider 1.1.1 Download flutter_circular_slider 1.1.1 archive
1.1.0 Apr 9, 2019 Go to the documentation of flutter_circular_slider 1.1.0 Download flutter_circular_slider 1.1.0 archive
1.0.2 Apr 9, 2019 Go to the documentation of flutter_circular_slider 1.0.2 Download flutter_circular_slider 1.0.2 archive
1.0.1 Apr 9, 2019 Go to the documentation of flutter_circular_slider 1.0.1 Download flutter_circular_slider 1.0.1 archive
1.0.0 Apr 8, 2019 Go to the documentation of flutter_circular_slider 1.0.0 Download flutter_circular_slider 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
58
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
79
Learn more about scoring.

We analyzed this package on Apr 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.4.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test