CODEWITHSUNDEEP
flutterdart
Henri Klein
Henri Klein

Reputation: 85

How to make a Flutter slider go exponential?

I want to use a (Cupertino)slider with which you can pick a number between 1-1000000. For every milestone, I will display another text. (1-10, 10-100, 100-1000, etc.) Since in the beginning, the steps are shorter, I want the slider not being that sensitive, and in the end, I wouldn't care it going with 100 each step, for example. Like it should go exponential. Does anybody have an idea of how to achieve that? Thanks a lot!

Upvotes: 2

Views: 1871

Answers (2)

EdwynZN
EdwynZN

Reputation: 5611

Use the CupertinoSlider and some class that holds the min and max value, in this example I use RangeValues (it's a flutter class for another type of Slider, but I can use it to save a start and end value). When the onChangedEnd value is equal to the slider value then it displays a snackbar showing the milestone and update the range value from the old one 10 times. division parameter can be used to make a discrete slider, but if the max value is too big you can omit it or pass a null value to make it continuos

 class Home extends StatefulWidget {

 @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  RangeValues range = RangeValues(1, 10);
  double slide = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Builder( //Needed to find Scaffold.of(context) and display the snackbar
            builder: (BuildContext context) {
              return CupertinoSlider(
                value: slide,
                onChanged: (newValue) => setState(() => slide = newValue),
                min: range.start,
                max: range.end,
                divisions: (range.end - range.start).toInt(),
                onChangeEnd: (value) {
                  if (value == range.end) {
                    Scaffold.of(context)
                      ..hideCurrentSnackBar()
                      ..showSnackBar(SnackBar(
                        content: Text('New Milestone reached: ${slide.toInt().toString()}')));
                      setState(() => range = RangeValues(range.start * 10, range.end * 10));
                  }
                },
              );
            }
          ),
          Text(slide.toInt().toString())
        ]
      )
    );
  }
}

Upvotes: 1

Henri Klein
Henri Klein

Reputation: 85

I found a solution using https://pub.dev/packages/flutter_xlider Thanks a lot!

Upvotes: 3

Related Questions