awesome_slider 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 70

Awesome - Slider #

A highly customisable Rounded Rectangular thumb shaped slider for flutter projects which has shadow and child property.

Example 01 Example 02 Example 03

Getting Started #

Installation #

Add

awesome_slider : ^0.1.0

to your pubspec.yaml, and run

flutter packages get

in your project's root directory.

Basic Usage #

Import it to your project file

import 'package:awesome_slider/awesome_slider.dart';

and use Widget

AwesomeSlider()

Example Demo #

demo image for square

Code example (click to expand)
import 'package:flutter/material.dart';
import 'package:awesome_slider/awesome_slider.dart';

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  double valueOnTextWidget = 0.0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.lightGreen, Colors.green],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.0, 0.6],
            ),
          ),
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 250.0,
              ),
              Text(
                valueOnTextWidget.round().toString(),
                style: TextStyle(color: Colors.white, fontSize: 150.0),
              ),
              SizedBox(
                height: 80.0,
              ),
              AwesomeSlider(
                value: valueOnTextWidget,
                min: 0.0,
                max: 100.0,
                thumbColor: Colors.lightGreen,
                roundedRectangleThumbRadius: 0.0,
                topLeftShadow: true,
                topLeftShadowColor: Colors.lightGreen.shade300,
                topLeftShadowBlur: MaskFilter.blur(BlurStyle.normal, 8.0),
                bottomRightShadow: true,
                bottomRightShadowColor: Colors.black.withOpacity(0.5),
                bottomRightShadowBlur: MaskFilter.blur(BlurStyle.normal, 7.0),
                activeLineStroke: 2.0,
                activeLineColor: Colors.greenAccent,
                inactiveLineColor: Colors.white,
                child: Center(
                    child: Text(
                  'Slide Me',
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.7),
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                )),
                onChanged: (double value) {
                  setState(() {
                    valueOnTextWidget = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

demo image for Rounded square

Code example (click to expand)
import 'package:flutter/material.dart';
import 'package:awesome_slider/awesome_slider.dart';

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  double valueOnTextWidget = 0.0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.lightBlueAccent,
                Color(0xFF100887).withOpacity(0.95)
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.0, 0.5],
            ),
          ),
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 250.0,
              ),
              Text(
                valueOnTextWidget.round().toString(),
                style: TextStyle(color: Colors.white, fontSize: 150.0),
              ),
              SizedBox(
                height: 80.0,
              ),
              AwesomeSlider(
                value: valueOnTextWidget,
                min: 0.0,
                max: 100.0,
                thumbColor: Color(0xFF100887),
                roundedRectangleThumbRadius: 25.0,
                thumbSize: 100.0,
                topLeftShadow: true,
                topLeftShadowColor: Colors.lightBlueAccent,
                topLeftShadowBlur: MaskFilter.blur(BlurStyle.normal, 11.0),
                bottomRightShadow: true,
                bottomRightShadowColor: Colors.white.withOpacity(0.5),
                bottomRightShadowBlur: MaskFilter.blur(BlurStyle.normal, 11.0),
                activeLineStroke: 2.0,
                activeLineColor: Colors.blueAccent,
                inactiveLineColor: Colors.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.arrow_back_ios,
                      color: Colors.white,
                      size: 28.0,
                    ),
                    SizedBox(width: 10.0),
                    Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.white,
                      size: 28.0,
                    )
                  ],
                ),
                onChanged: (double value) {
                  setState(() {
                    valueOnTextWidget = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

demo image for circular

Code example (click to expand)
import 'package:flutter/material.dart';
import 'package:awesome_slider/awesome_slider.dart';

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  double valueOnTextWidget = 0.0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.redAccent.shade200, Color(0xFF890808)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.0, 0.6],
            ),
          ),
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 250.0,
              ),
              Text(
                valueOnTextWidget.round().toString(),
                style: TextStyle(color: Colors.white, fontSize: 150.0),
              ),
              SizedBox(
                height: 80.0,
              ),
              AwesomeSlider(
                value: valueOnTextWidget,
                min: 0.0,
                max: 100.0,
                thumbColor: Color(0xFF890808),
                roundedRectangleThumbRadius: 80.0,
                thumbSize: 100.0,
                topLeftShadow: true,
                topLeftShadowColor: Colors.redAccent,
                topLeftShadowBlur: MaskFilter.blur(BlurStyle.normal, 8.0),
                bottomRightShadow: true,
                bottomRightShadowColor: Colors.black,
                bottomRightShadowBlur: MaskFilter.blur(BlurStyle.normal, 7.0),
                activeLineStroke: 2.0,
                activeLineColor: Colors.redAccent,
                inactiveLineColor: Colors.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.arrow_back,
                      color: Colors.white,
                      size: 28.0,
                    ),
                    SizedBox(width: 10.0),
                    Icon(
                      Icons.arrow_forward,
                      color: Colors.white,
                      size: 28.0,
                    )
                  ],
                ),
                onChanged: (double value) {
                  setState(() {
                    valueOnTextWidget = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Awesome Slider Parameters #

ParameterDefaultDescription
value double@requiredValue of the Slider Position
(value!=null)
(value >= min && value <= max)
min double@requiredminimum value for the Slider
(min !=null)
(min <= max)
max double@requiredmaximum value for the Slider
(max != null)
onChanged ValueChanged doubleCalled when the user starts selecting a new value for the slider.
Parameter for the onChanged must be a double
child widgetProvide a child Widget to the Slider Thumb.
sliderWidth doubleDefault width will be the Canvas Width with a difference of 40pxThe Width of the Slider.
thumbSize doubleDefault value will be a 90px ratio of the original Canvas it was createdSize of the thumb
thumbColor ColorColors.greyColour of the thumb
roundedRectangleThumbRadius double0.0Radius of Rounded Rectangle
more the radius, The square thumb turns to a Circle
inactiveLineColor ColorColors.blueThe color for the inactive portion of the slider track.
inactiveLineStroke double4.0The stroke value for the inactive portion of the slider track.
Value for inactiveLineStroke = activeLineStroke unless given different values for both
activeLineColor ColorColors.blueThe color for the active portion of the slider track.
activeLineStroke double4.0The stroke value for the active portion of the slider track.
Value for activeLineStroke = inactiveLineStroke unless given different values for both
topLeftShadow boolfalseGive true value if a Shadow required on Top - Left of the thumb
topLeftShadowColor ColorColors.blueGreyColour of shadow of Top - Left of the thumb
topLeftShadowBlur MaskFilterMaskFilter.blur(BlurStyle.normal, 3.0)MaskFilter blur value for shadow of Top - Left of the thumb
bottomRightShadow boolfalseGive true value if a Shadow required on Bottom - Right of the thumb
bottomRightShadowColor ColorColors.blueGreyColour of shadow of Bottom - Right of the thumb
bottomRightShadowBlur MaskFilterMaskFilter.blur(BlurStyle.normal, 3.0)MaskFilter blur value for shadow of Bottom - Right of the thumb

[0.1.0] - 03 April 2020 #

  • Added Functions such as topLeftShadow, bottomRightShadow and a child property.

example/lib/main.dart

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

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  double valueOnTextWidget = 0.0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.lightBlueAccent,
                Color(0xFF100887).withOpacity(0.95)
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.0, 0.5],
            ),
          ),
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 250.0,
              ),
              Text(
                valueOnTextWidget.round().toString(),
                style: TextStyle(color: Colors.white, fontSize: 150.0),
              ),
              SizedBox(
                height: 80.0,
              ),
              AwesomeSlider(
                value: valueOnTextWidget,
                min: 0.0,
                max: 100.0,
                thumbColor: Color(0xFF100887),
                roundedRectangleThumbRadius: 25.0,
                thumbSize: 100.0,
                topLeftShadow: true,
                topLeftShadowColor: Colors.lightBlueAccent,
                topLeftShadowBlur: MaskFilter.blur(BlurStyle.normal, 11.0),
                bottomRightShadow: true,
                bottomRightShadowColor: Colors.white.withOpacity(0.5),
                bottomRightShadowBlur: MaskFilter.blur(BlurStyle.normal, 11.0),
                activeLineStroke: 2.0,
                activeLineColor: Colors.blueAccent,
                inactiveLineColor: Colors.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.arrow_back_ios,
                      color: Colors.white,
                      size: 28.0,
                    ),
                    SizedBox(width: 10.0),
                    Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.white,
                      size: 28.0,
                    )
                  ],
                ),
                onChanged: (double value) {
                  setState(() {
                    valueOnTextWidget = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  awesome_slider: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:awesome_slider/awesome_slider.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
40
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]
70
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • awesome_slider that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test