Clipping a row child in flutter

Question

I want to achieve this

This is my code

Row(
                      
                        children: [
                          Expanded(
                            flex: 1,
                            child: Text(
                                "somethinig here..."),
                          ),
                          Expanded(
                            child: ClipRect(
                              child: Wrap(
                                children: [
                                  SvgPicture.asset(
                                    "assets/3958830.svg",
                                    width: autoHeight(550),
                                    allowDrawingOutsideViewBox: true,
                                    fit: BoxFit.fitHeight,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),

Result:

You can see how the image is clipped, I just want to clip all sides except the left side.

Answer 1

You can wrap the image widget with an Align widget to easily position the image inside the clipper . The widthFactor and heightFactor properties are used to decide the size of the clipper and alignment is used to decide the position of the `clipper

A Nice Example to use the Align Widget with ClipRect will be

 ClipRect(
  child: Container(
    child: Align(
      alignment: Alignment.centerLeft,
        widthFactor: 0.6,
        heightFactor: 1.0,
        child: Image.network(
          'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
        ),
    ),
  ),
);

To Know More about the Clippers see This Article

Answer 2

Just wrap your Text widget with Center. And SvgPicture with Align. (I realize this later.)

Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Center(child: Text("somethinig here...")),
                ),
                Expanded(
                  child: ClipRect(
                    child: Wrap(
                      children: [
                        Align(
                            alignment: Alignment.centerRight,
                            child: SvgPicture.asset(
                              "assets/3958830.svg",
                              width: autoHeight(550),
                              allowDrawingOutsideViewBox: true,
                              fit: BoxFit.fitHeight,
                            )),
                      ],
                    ),
                  ),
                ),
              ],
            )