How to shorten the repetitive code in this scenario

Question

I am using flutter, and I am making an appBar to position itself based on slider. I came up with the below code, As you can see, the slider code is repetitive. Is there any way I could shorten it?

I need to make this slider custom and do something like CustomSlider(appBarPosistion.height/top/left); So that my code won't repetitive.

class NewWidget extends StatelessWidget {
  NewWidget(this.appBarPosistion);

  final AppBarPosistion appBarPosistion;

  @override
  Widget build(BuildContext context) {
    return Column(mainAxisAlignment: MainAxisAlignment.end, children: [
      SizedBox(
        height: 100,
      ),
      Slider(
        value: appBarPosistion.height,
        min: 0,
        max: 0.5,
        divisions: 100,
        label: "Height " + appBarPosistion.height.toString(),
        onChanged: (value) => appBarPosistion.height = value,
      ),
      Slider(
          value: appBarPosistion.top,
          min: 0,
          max: 100,
          divisions: 100,
          label: "Top " + appBarPosistion.top.toString(),
          onChanged: (value) => appBarPosistion.top = value),
      Slider(
          value: appBarPosistion.left,
          min: 0,
          max: 100,
          divisions: 100,
          label: "Left " + appBarPosistion.left.toString(),
          onChanged: (value) => appBarPosistion.left = value),
      // CustomSlider(appBarPosistion.left, appBarPosistion: null,),
    ]);
  }
}

Answer 1

As you can see, the slider code is repetitive. Is there any way I could shorten it?

The code seems repetitive because of the similar type of work being done on appBarPosition Properties, but In my opinion, each and every one of the slider needs to be declared as they are in this code.

Above all things, even if I try to combine the common logic under one component it would still be similar to the existing code.

Check out following:

Widget _buildSlider({
    double Function() getPosition,
    void Function(double newPosition) setPosition,
    double max,
    String labelPrefix,
  }) {
    return Slider(
      value: getPosition(),
      min: 0,
      max: max,
      divisions: 100,
      label: "$labelPrefix ${getPosition()}",
      onChanged: (value) => setPosition(value),
    );
  }

usage:

_buildSlider(
        getPosition: () => appBarPosition.left,
        setPosition: (value) => appBarPosition.left,
        max: 100,
        labelPrefix: "Left"
      ),
_buildSlider(
        getPosition: () => appBarPosition.top,
        setPosition: (value) => appBarPosition.top,
        max: 100,
        labelPrefix: "Top"
      )

As you can see in the above example, I have to resort to passing getter & setter as parameter to update individual properties of the appBarPostion for following reasons:

• Each property being manipulated is of premitive type (double), hence can not be passed as a reference, must be passed as a value
• Each Slider updates different property of the appBarPosition.

Check out this code in dart pad to understand the pass by value problem in this code. https://dartpad.dartlang.org/8fb0631a349a3d183a83111a65c512ae

Conclusion:

I'd say, There's no need to remove repitition of code in this case, as it's not actually repeating everything, but if you want to do it anyway then try the approach I suggested in _buildSlider method above.

Answer 2

You can achieve this using ListView.builder and ternary operators.

ListView.builder(
    itemCount: 3,
      itemBuilder: (context, index){

      return Slider(
        value: index == 0 ? appBarPosistion.height: index == 1 ? appBarPosistion.top : appBarPosistion.left,
        min: 0,
        max: 100,
        divisions: 100,
        label: index == 0 ? "Height " + appBarPosistion.height.toString() : index == 1 ? "Top"  + appBarPosistion.top.toString(): "Left"+ appBarPosistion.left.toString(),
        onChanged: (value) => index == 0 ? appBarPosition.height = value : index == 1 ? appBarPosition.top = value : appBarPosition.left = value,
      );

      }
    )