Flutter custom widget positioning with other widget

Question

I want to active left text based on right side slider position with dot line and background image will also resized based on slider height. How to implement this type of design?

Answer 1

So basically i created a Widgets wrapped in Expanded and manipulated the flex for the image height, the text_height was just a matter of array manipulation. Just add the below widget to your code to implement the functionality.

class HeightAdjust extends StatefulWidget {
  const HeightAdjust();

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

class _HeightAdjustState extends State<HeightAdjust> {
  int minBoxFlex = 5;
  int imageFlex = 7;
  int selectedHeight = 4;
  List heights = [
    "4'8",
    "5'0",
    "5'2",
    "5'4",
    "5'6",
    "5'8",
    "5'10",
    "6'0",
    "6'2",
    "6'4"
  ];
  double sliderVal = 4;

  List<Widget> generateWidgets() {
    List<Widget> widgetList = [];
    for (int i = 9; i >= 0; i--) {
      if (i == selectedHeight) {
        widgetList.add(Expanded(
          flex: 1,
          child: Text(
            heights[i].toString(),
            style: TextStyle(color: Colors.blue, fontSize: 25),
          ),
        ));
      } else {
        widgetList.add(Expanded(
          flex: 1,
          child: Text(
            heights[i].toString(),
            style: TextStyle(color: Colors.black),
          ),
        ));
      }
    }
    widgetList.add(Expanded(
      flex: 2,
      child: SizedBox(),
    ));
    return widgetList;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          Expanded(
              flex: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: generateWidgets(),
              )),
          Expanded(
            child: Column(
              children: [
                Expanded(
                    flex: minBoxFlex,
                    child: Container(
                      color: Colors.white,
                    )),
                Expanded(
                    flex: imageFlex,
                    child: Container(
                  decoration: BoxDecoration(
                      border: Border(
                          top: BorderSide(
                              color: Colors.blueAccent,
                              style: BorderStyle.solid))),
                  child: Image.network(
                    "https://icon2.cleanpng.com/20180326/bcq/kisspng-silhouette-person-clip-art-gentleman-5ab87db0af3d46.6510984815220402407178.jpg",
                    fit: BoxFit.fitHeight,
                  ),
                )),
              ],
            ),
            flex: 4,
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  flex: 8,
                  child: RotatedBox(
                    quarterTurns: 3,
                    child: Slider(
                      value: sliderVal,
                      min: 0,
                      max: 9,
                      divisions: 9,
                      onChanged: (newValue) {
                        setState(() {
                          sliderVal = newValue;
                          print(newValue);
                          selectedHeight = newValue.toInt();
                          imageFlex = newValue.toInt() + 3;
                          minBoxFlex = 12 - imageFlex;
                        });
                      },
                    ),
                  ),
                ),
                Expanded(flex: 2, child: SizedBox())
              ],
            ),
            flex: 1,
          )
        ],
      ),
    );
  }
}