Question 78782 in Flutter Question posted in
The official Flutter documentation can be found here.

Cutting row content by screen perimeter – Flutter

I need to place 2 widgets at Row, and second of them – be "out" of screen’s perimeter at be cut by it. Something like at this scheme:

I tried to override Row’s clipBehavior property, but that doesn’t work.

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
    ],
  );
}
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    thx for all your answers, but what I wanted seems to be achieved by using Transform.translate widget:

    Widget buildWidget(BuildContext context) =>
      Transform.translate(
          offset: Offset(100, 0),
          child: Row(mainAxisAlignment: MainAxisAlignment.center,
      children: [
            Widget1(),
            Widget2(),
          ]));

    Width parameter must be defined for widget1 and widget2.


  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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,)
          ],),
        )
      ],),
    Login or Signup to reply.
  4. 0

    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(),
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search