Flutter. Elements in the row overlaps each other [closed]

问题

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 days ago.

Improve this question

I need to set "Inactive" zones on Slider. So i did it with Row, Expanded and Container widgets, but there is still one issue... Elements in the row overlaps each other How can i force my Slider to overlap containers?

Code(Slider in the middle section)

Slider

回答1:

So, i did as @pskink said and that's the result

class CustomSliderTrackShape extends SliderTrackShape {
  @override
  Rect getPreferredRect({
    @required RenderBox parentBox,
    Offset offset = Offset.zero,
    @required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double parentWidth = parentBox.size.width;
    final double trackHeight = sliderTheme.trackHeight;
    final double trackLeft = offset.dx + parentWidth * (1 / 6);
    final double trackTop =
        offset.dy + (parentBox.size.height - trackHeight) / 2;
    print(parentBox.size);
    final double trackWidth = parentWidth * (2 / 3);
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }

  @override
  void paint(PaintingContext context, Offset offset,
      {RenderBox parentBox,
      SliderThemeData sliderTheme,
      Animation<double> enableAnimation,
      Offset thumbCenter,
      bool isEnabled,
      bool isDiscrete,
      TextDirection textDirection}) {
    final Canvas canvas = context.canvas;
    final Rect mainrect = getPreferredRect(
        parentBox: parentBox,
        sliderTheme: sliderTheme,
        offset: offset,
        isEnabled: isEnabled,
        isDiscrete: isDiscrete);
    final double inactiveDistance = parentBox.size.width * (1 / 6);
    final Rect leftRect = Rect.fromLTRB(mainrect.left - inactiveDistance,
        mainrect.top, mainrect.left, mainrect.bottom);
    final Rect rightRect = Rect.fromLTRB(mainrect.right, mainrect.top,
        mainrect.right + inactiveDistance, mainrect.bottom);
    final Rect activeRect = Rect.fromLTRB(
        mainrect.left, mainrect.top, thumbCenter.dx, mainrect.bottom);
    final Rect inactiveRect = Rect.fromLTRB(
        thumbCenter.dx, mainrect.top, mainrect.right, mainrect.bottom);
    final Paint rightRectPainter = Paint()..color = Color(0xFF9B9B9B);
    final Paint activeRectPainter = Paint()
      ..color = sliderTheme.activeTrackColor;
    final Paint inactiveRectPainter = Paint()
      ..color = sliderTheme.inactiveTrackColor;
    final Paint leftRectPainter = Paint()..color = Color(0xFF5E9B44);
    canvas.drawRect(
      leftRect,
      leftRectPainter,
    );
    canvas.drawRect(
      rightRect,
      rightRectPainter,
    );
    canvas.drawRect(activeRect, activeRectPainter);
    canvas.drawRect(inactiveRect, inactiveRectPainter);
  }
}

来源：https://stackoverflow.com/questions/65989575/flutter-elements-in-the-row-overlaps-each-other