Home > Mobile >  how to add marker has position value above slider?
how to add marker has position value above slider?

Time:07-13

How can I add marker(or checker) above slider? Also, I need information about position value of marker on slider.

how could add red triangle on slider?

It doesn't matter that shape of marker

[Button Click at first] enter image description here

[Button click at second] enter image description here

Here's my code

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Obx(
        () => Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                Slider(
                  activeColor: Colors.blue,
                  inactiveColor: Colors.blue[100],
                  value: _currentSliderValue.value,
                  min: 0.0,
                  max: 10,
                  onChanged: (double value) {
                    _currentSliderValue.value = value;
                  },
                ),
                Row(
                  children: const [
                    Padding(
                      padding: EdgeInsets.fromLTRB(100, 0, 0, 0),
                      child: Icon(
                        Icons.arrow_downward,
                        size: 20,
                        color: Colors.red,
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(70, 0, 0, 0),
                      child: Icon(
                        Icons.arrow_downward,
                        size: 20,
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ],
            ),
            IconButton(
                onPressed: () {
                  // Add Marker
                },
                icon: const Icon(Icons.reply_all)),
          ],

CodePudding user response:

using stack widget

https://api.flutter.dev/flutter/widgets/Stack-class.html

stack class [
   Row[
    Marker() , Container(), Marker()
  ],
  Slider() 
]
  • Related