Cutting Row content by screen perimeter-CodePudding

I am new in flutter, and I had the next problem: I need to place 2 widgets at Row, and second of them - be "out" of screen's perimeter at be "cutted" by it. Something like at this scheme (https://i.stack.imgur.com/YnlsJ.png)

I tried to override Row's clipBehavior property, but it doesn't works. How can I achieve it? Thanks!

class ClippedRow extends Row {
  ClippedRow({
    super.key,
    super.mainAxisAlignment,
    super.mainAxisSize,
    super.crossAxisAlignment,
    super.textDirection,
    super.verticalDirection,
    super.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    super.children,
  });

  @override
  Clip get clipBehavior => Clip.hardEdge;
}

class CardWidget {
  const CardWidget({super.key});

  @override
  Widget buildWidget(BuildContext context) => ClippedRow(
    children: [
      Widget1(),
      Widget2(), //this one is big and should be "out" of screen
    ],
  );
}

CodePudding user response：

You can wrap the row with a SingleChildScrollView.

SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child : Row(children: [
  SizedBox(
   width:  //set width here,
   child: Widget1(),
  ), 
  SizedBox(
   width: //define your width
   child: Widget2(),
  ), 
  ]),
)

By doing this, you can swipe left to see the more of Widget2().

You can use MediaQuery.of(context).size.width to find the width of your screen, you can use this width to your widget.

CodePudding user response：

You can try this code if you want a static non-sliding out of the screen implementation with a Row:

Stack(children: [
        Positioned(
          top: 50,
          left: 150,
          child: Row(children: [
            Container(height: 50,width: 50,color: Colors.red,),
            Container(height:50, width:200,color: Colors.blue,)
          ],),
        )
      ],),

And this code if you want it to be dynamic(replicatable on every device):

Stack(children: [
        Positioned(
          top: 50,
          left: MediaQuery.of(context).size.width/2,
          child: Row(children: [
            Container(height: 50,width: 50,color: Colors.red,),
            Container(height:50, width:MediaQuery.of(context).size.width,color: Colors.blue,)
          ],),
        )
      ],),

CodePudding user response：

There are a few ways of getting there, as you can see from the other other answers, but I would use a ListView:

SizedBox(
  // here you put the sizes you want
  // you can also use MediaQuery.of(context).size.width to cover the entire screen
  child: ListView(
    // by default it's vertical
    scrollDirection: Axis.horizontal,
    children: [
      Widget1(),
      Widget2(),
    ],
  ),
);