如何在 flutter 中使用 slider 按钮时更改文本的不透明度和图标的角度

Question

I want that as I move my slider button towards right, the opacity of text decreases and arrow icon rotates exactly oppposite, ie it strts rotating and at last last it should point backwards. I want to use opacity and Transform.rotate widgets, but how do I keep updating the value of dx,so I can divide it with total width of container and use the fraction for calculation.

If there is another way, please do tell me.

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:passenger_flutter_app/utils/colors.dart';
import 'package:passenger_flutter_app/widgets/custom_sliding_button.dart';

class CommonSwipeButton extends StatelessWidget {
  final String? buttonText1;
  final String buttonText2;
  final VoidCallback buttonCallBack2;
  final bool isInfo;
  final VoidCallback? buttonCallBack1;

  final Widget itemWidget;

  CommonSwipeButton(
      {this.buttonCallBack1,
        required this.buttonCallBack2,
        this.isInfo = false,
        this.buttonText1,
        required this.buttonText2,
        required this.itemWidget});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        //crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Padding(padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0, top: 16), child: itemWidget),
          Padding(
            padding:
            const EdgeInsets.only(bottom: 16.0, left: 16.0, right: 16.0),
            child: Align(
              alignment: Alignment.center,
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: 44,
                child: CustomSlidingButton(
                  //text: buttonText2,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

/*
class SwipeButton extends StatefulWidget {
  final ValueChanged<double>? valueChanged;
  final String? text;
  final Function? callBack;

  SwipeButton({this.valueChanged, this.text, this.callBack});

  @override
  SwipeButtonState createState() {
    return new SwipeButtonState();
  }
}

class SwipeButtonState extends State<SwipeButton> {
  ValueNotifier<double> valueListener = ValueNotifier(.0);
  GlobalKey swipeKey = GlobalKey();
  ValueNotifier<double> x=ValueNotifier<double>(0);
  ValueNotifier<bool> isVisible = ValueNotifier<bool>(true);

  @override
  void initState() {
    valueListener.addListener(notifyParent);
    super.initState();
  }

  void notifyParent() {
    if (widget.valueChanged != null) {
      widget.valueChanged!(valueListener.value);
    }
  }

  void getPos(double totalSize) {
    RenderBox box = swipeKey.currentContext?.findRenderObject() as RenderBox;
    Offset position = box.localToGlobal(Offset.zero); //this is global position
    x.value = position.dx;
    print(x);
    if(x.value>355) {
      print("Reached");
      isVisible.value=false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: colorPrimary,
      height: 40.0,
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      child: Stack(
        children: [
          Center(
            child: Padding(
              padding: const EdgeInsets.only(left: 10.0),
              child: Text(
                "${widget.text}",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 17,
                ),
              ),
            ),
          ),
          Builder(
            builder: (context) {
              final handle = GestureDetector(
                onHorizontalDragUpdate: (details) {
                  valueListener.value = (valueListener.value +
                      details.delta.dx / context.size!.width)
                      .clamp(.0, 1.0);
                  getPos(context.size!.width-5);
                  print(context.size?.width);
                },
                child: ValueListenableBuilder(
                  valueListenable: isVisible,
                  builder: (BuildContext context, bool val, Widget? child) {
                    return Container(
                      key: swipeKey,
                      height: 25.0,
                      width: 25.0,
                      color: val ? Colors.white : colorPrimary,
                      child: Center(
                        child: ValueListenableBuilder(
                          valueListenable: x,
                          builder: (BuildContext context, double d, Widget? child) {
                            return Transform.rotate(
                              angle: -pi*(d/350),
                              child: Icon(
                                Icons.arrow_forward,
                                color: Colors.orange,
                                size: 12,
                              ),
                            );
                          },
                        ),
                      ),
                    );
                  },
                ),
              );

              return AnimatedBuilder(
                animation: valueListener,
                builder: (context, child) {
                  return Align(
                    alignment: Alignment(valueListener.value * 2 - 1, 0),
                    child: child,
                  );
                },
                child: handle,
              );
            },
          ),
        ],
      ),
    );
  }
}*/

Answer 1

You can use Slider widget from Flutter framework and update a local variable in the onChange function:

Slider(
      value: _currentSliderValue,
      max: 100, //or any max value you need
      onChanged: (double value) {
        setState(() {
          _value = value;
        });
      },
    );

And the _value variable you will use in Opacity and Transform widgets.