Flutter ConstraintLayout

Greatly improve Flutter development experience and efficiency. Improve application performance

Feature

classOpenGrammarExampleextendsStatelessWidget {constOpenGrammarExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {returnScaffold(      body:ConstraintLayout().open(() {if (DateTime            .now()            .millisecond%2==0) {Container(            color:Colors.red,          ).applyConstraint(            size:200,            centerTo: parent,          );        }else {Container(            color:Colors.yellow,          ).applyConstraint(            size:200,            centerTo: parent,          );        }for (int i=0; i<5; i++) {Row().open(() {for (int j=0; j<10; j++) {Text("$i x $j").enter();constSizedBox(                width:20,              ).enter();            }          }).applyConstraint(            height:100,            left: parent.left.margin(100),            top: i==0? parent.top:sId(-1).bottom,          );        }int i=0;while (i<100) {Text("$i").applyConstraint(            left: parent.left,            top: i==0? parent.top:sId(-1).bottom,          );          i++;        }      }),    );  }}

classWeiVCounterKotlinActivity :WeiVActivity() {privatevar count=0privateval maxCount=10privateval minCount=0overridefunbuild()=WeiV {Flex {            it.orientation=FlexDirection.VERTICALButton(text="Add count", enable= count< maxCount, onClick= {                setState {                    count++                }            })Button(text="Sub count", enable= count> minCount, onClick= {                setState {                    count--                }            })Text(text="count =$count")        }    }}

Import

dependencies:flutter_constraintlayout:git:url:'https://github.com/hackware1993/Flutter-ConstraintLayout.git'ref:'v1.7.0-stable'

dependencies:flutter_constraintlayout:^1.7.0-stable

import'package:flutter_constraintlayout/flutter_constraintlayout.dart';

ExampleFlutter Web Online Example

classSummaryExampleStateextendsState<SummaryExample> {double x=0;double y=0;ConstraintId box0=ConstraintId('box0');ConstraintId box1=ConstraintId('box1');ConstraintId box2=ConstraintId('box2');ConstraintId box3=ConstraintId('box3');ConstraintId box4=ConstraintId('box4');ConstraintId box5=ConstraintId('box5');ConstraintId box6=ConstraintId('box6');ConstraintId box7=ConstraintId('box7');ConstraintId box8=ConstraintId('box8');ConstraintId box9=ConstraintId('box9');ConstraintId box10=ConstraintId('box10');ConstraintId box11=ConstraintId('box11');ConstraintId barrier=ConstraintId('barrier');@overrideWidgetbuild(BuildContext context) {returnScaffold(      appBar:constCustomAppBar(        title:'Summary',        codePath:'example/summary.dart',      ),      backgroundColor:Colors.black,      body:ConstraintLayout(// Constraints can be separated from widgets        childConstraints: [Constraint(            id: box0,            size:200,            bottomLeftTo: parent,            zIndex:20,          )        ],        children: [Container(            color:Colors.redAccent,            alignment:Alignment.center,            child:constText('box0'),          ).applyConstraintId(            id: box0,// Constraints can be separated from widgets          ),Container(            color:Colors.redAccent,            alignment:Alignment.center,            child:constText('box1'),          ).apply(            constraint:Constraint(// Constraints set with widgets              id: box1,              width:200,              height:100,              topRightTo: parent,            ),          ),Container(            color:Colors.blue,            alignment:Alignment.center,            child:constText('box2'),          ).applyConstraint(// Constraints set with widgets easy way            id: box2,            size: matchConstraint,            centerHorizontalTo: box3,            top: box3.bottom,            bottom: parent.bottom,          ),Container(            color:Colors.orange,            width:200,            height:150,            alignment:Alignment.center,            child:constText('box3'),          ).applyConstraint(            id: box3,            right: box1.left,            top: box1.bottom,          ),Container(            color:Colors.redAccent,            alignment:Alignment.center,            child:constText('box4'),          ).applyConstraint(            id: box4,            size:50,            bottomRightTo: parent,          ),GestureDetector(            child:Container(              color:Colors.pink,              alignment:Alignment.center,              child:constText('box5 draggable'),            ),            onPanUpdate: (details) {setState(() {                x+= details.delta.dx;                y+= details.delta.dy;              });            },          ).applyConstraint(            id: box5,            width:120,            height:100,            centerTo: parent,            zIndex:100,            translate:Offset(x, y),            translateConstraint:true,          ),Container(            color:Colors.lightGreen,            alignment:Alignment.center,            child:constText('box6'),          ).applyConstraint(            id: box6,            size:120,            centerVerticalTo: box2,            verticalBias:0.8,            left: box3.right,            right: parent.right,          ),Container(            color:Colors.lightGreen,            alignment:Alignment.center,            child:constText('box7'),          ).applyConstraint(            id: box7,            size: matchConstraint,            left: parent.left,            right: box3.left,            centerVerticalTo: parent,            margin:constEdgeInsets.all(50),          ),Container(            color:Colors.cyan,            alignment:Alignment.center,            child:constText('child[7] pinned to the top right'),          ).applyConstraint(            width:200,            height:100,            left: box5.right,            bottom: box5.top,          ),constText('box9 baseline to box7',            style:TextStyle(              color:Colors.white,            ),          ).applyConstraint(            id: box9,            baseline: box7.baseline,            left: box7.left,          ),Container(            color:Colors.yellow,            alignment:Alignment.bottomCenter,            child:constText('percentage layout\nwidth: 50% of parent\nheight: 30% of parent'),          ).applyConstraint(            size: matchConstraint,            widthPercent:0.5,            heightPercent:0.3,            horizontalBias:0,            verticalBias:0,            centerTo: parent,          ),Barrier(            id: barrier,            direction:BarrierDirection.left,            referencedIds: [box6, box5],          ),Container(            color:constColor(0xFFFFD500),            alignment:Alignment.center,            child:constText('align to barrier'),          ).applyConstraint(            width:100,            height:200,            top: box5.top,            right: barrier.left,          )        ],      ),    );  }}

Advanced usage

classGuidelineExampleextendsStatelessWidget {constGuidelineExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {ConstraintId guideline=ConstraintId('guideline');returnMaterialApp(      home:Scaffold(        body:ConstraintLayout(          children: [Container(              color:constColor(0xFF005BBB),            ).applyConstraint(              width: matchParent,              height: matchConstraint,              top: parent.top,              bottom: guideline.top,            ),Guideline(              id: guideline,              horizontal:true,              guidelinePercent:0.5,            ),Container(              color:constColor(0xFFFFD500),            ).applyConstraint(              width: matchParent,              height: matchConstraint,              top: guideline.bottom,              bottom: parent.bottom,            ),constText('Stand with the people of Ukraine',              style:TextStyle(                fontSize:40,                color:Colors.white,              ),            ).applyConstraint(              width: wrapContent,              height: wrapContent,              centerHorizontalTo: parent,              bottom: guideline.bottom,            )          ],        ),      ),    );  }}

classBarrierExampleextendsStatelessWidget {constBarrierExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {ConstraintId leftChild=ConstraintId('leftChild');ConstraintId rightChild=ConstraintId('rightChild');ConstraintId barrier=ConstraintId('barrier');returnMaterialApp(      home:Scaffold(        body:ConstraintLayout(          debugShowGuideline:true,          children: [Container(              color:constColor(0xFF005BBB),            ).applyConstraint(              id: leftChild,              width:200,              height:200,              top: parent.top,              left: parent.left,            ),Container(              color:constColor(0xFFFFD500),            ).applyConstraint(              id: rightChild,              width:200,              height: matchConstraint,              right: parent.right,              top: parent.top,              bottom: parent.bottom,              heightPercent:0.5,              verticalBias:0,            ),Barrier(              id: barrier,              direction:BarrierDirection.bottom,              referencedIds: [leftChild, rightChild],            ),constText('Align to barrier',              style:TextStyle(                fontSize:40,                color:Colors.blue,              ),            ).applyConstraint(              width: wrapContent,              height: wrapContent,              centerHorizontalTo: parent,              top: barrier.bottom,              goneMargin:constEdgeInsets.only(top:20),            )          ],        ),      ),    );  }}

classBadgeExampleextendsStatelessWidget {constBadgeExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {ConstraintId anchor=ConstraintId('anchor');returnScaffold(      body:ConstraintLayout(        children: [Container(            color:Colors.yellow,          ).applyConstraint(            width:200,            height:200,            centerTo: parent,            id: anchor,          ),Container(            color:Colors.green,            child:constText('Indeterminate badge size',              style:TextStyle(                color:Colors.black,                fontSize:20,              ),            ),          ).applyConstraint(            left: anchor.right,            bottom: anchor.top,            translate:constOffset(-0.5,0.5),            percentageTranslate:true,          ),Container(            color:Colors.green,          ).applyConstraint(            width:100,            height:100,            left: anchor.right,            right: anchor.right,            top: anchor.bottom,            bottom: anchor.bottom,          )        ],      ),    );  }}

classGridExampleextendsStatelessWidget {constGridExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {List<Color> colors= [Colors.redAccent,Colors.greenAccent,Colors.blueAccent,Colors.orangeAccent,Colors.yellow,Colors.pink,Colors.lightBlueAccent    ];returnScaffold(      body:ConstraintLayout(        children: [          ...constraintGrid(              id:ConstraintId('grid'),              left: parent.left,              top: parent.top,              itemCount:50,              columnCount:8,              itemWidth:50,              itemHeight:50,              itemBuilder: (index) {returnContainer(                  color: colors[index% colors.length],                );              },              itemMarginBuilder: (index) {returnconstEdgeInsets.only(                  left:10,                  top:10,                );              })        ],      ),    );  }}

classStaggeredGridExampleextendsStatelessWidget {constStaggeredGridExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {List<Color> colors= [Colors.redAccent,Colors.greenAccent,Colors.blueAccent,Colors.orangeAccent,Colors.yellow,Colors.pink,Colors.lightBlueAccent    ];constdouble smallestSize=40;constint columnCount=8;Random random=Random();returnScaffold(      body:ConstraintLayout(        children: [TextButton(            onPressed: () {              (contextasElement).markNeedsBuild();            },            child:constText('Upset',              style:TextStyle(                fontSize:32,                height:1.5,              ),            ),          ).applyConstraint(            left:ConstraintId('horizontalList').right,            top:ConstraintId('horizontalList').top,          ),          ...constraintGrid(              id:ConstraintId('horizontalList'),              left: parent.left,              top: parent.top,              margin:constEdgeInsets.only(                left:100,              ),              itemCount:50,              columnCount: columnCount,              itemBuilder: (index) {returnContainer(                  color: colors[index% colors.length],                  alignment:Alignment.center,                  child:Text('$index'),                );              },              itemSizeBuilder: (index) {if (index==0) {returnconstSize(                      smallestSize* columnCount+35, smallestSize);                }if (index==6) {returnconstSize(smallestSize*2+5, smallestSize);                }if (index==7) {returnconstSize(smallestSize*6+25, smallestSize);                }if (index==19) {returnconstSize(smallestSize*2+5, smallestSize);                }if (index==29) {returnconstSize(smallestSize*3+10, smallestSize);                }returnSize(                    smallestSize, (2+ random.nextInt(4))* smallestSize);              },              itemSpanBuilder: (index) {if (index==0) {return columnCount;                }if (index==6) {return2;                }if (index==7) {return6;                }if (index==19) {return2;                }if (index==29) {return3;                }return1;              },              itemMarginBuilder: (index) {returnconstEdgeInsets.only(                  left:5,                  top:5,                );              })        ],      ),    );  }}

classCirclePositionExampleStateextendsState<CirclePositionExample> {lateTimer timer;lateint hour;lateint minute;lateint second;double centerTranslateX=0;double centerTranslateY=0;@overridevoidinitState() {super.initState();calculateClockAngle();    timer=Timer.periodic(constDuration(seconds:1), (_) {calculateClockAngle();    });  }voidcalculateClockAngle() {setState(() {DateTime now=DateTime.now();      hour= now.hour;      minute= now.minute;      second= now.second;    });  }@overridevoiddispose() {super.dispose();    timer.cancel();  }@overrideWidgetbuild(BuildContext context) {returnScaffold(      body:ConstraintLayout(        children: [GestureDetector(            child:Container(              decoration:constBoxDecoration(                color:Colors.red,                borderRadius:BorderRadius.all(Radius.circular(1000),                ),              ),            ),            onPanUpdate: (details) {setState(() {                centerTranslateX+= details.delta.dx;                centerTranslateY+= details.delta.dy;              });            },          ).applyConstraint(            width:20,            height:20,            centerTo: parent,            zIndex:100,            translate:Offset(centerTranslateX, centerTranslateY),            translateConstraint:true,          ),for (int i=0; i<12; i++)Text('${i +1}',              style:constTextStyle(                fontWeight:FontWeight.bold,                fontSize:25,              ),            ).applyConstraint(              centerTo:rId(0),              translate:circleTranslate(                radius:205,                angle: (i+1)*30,              ),            ),for (int i=0; i<60; i++)if (i%5!=0)Transform.rotate(                angle: pi+ pi* (i*6/180),                child:Container(                  color:Colors.grey,                  margin:constEdgeInsets.only(                    top:405,                  ),                ),              ).applyConstraint(                width:1,                height:415,                centerTo:rId(0),              ),Transform.rotate(            angle: pi+ pi* (hour*30/180),            alignment:Alignment.topCenter,            child:Container(              color:Colors.green,            ),          ).applyConstraint(            width:5,            height:80,            centerTo:rId(0),            translate:constOffset(0,0.5),            percentageTranslate:true,          ),Transform.rotate(            angle: pi+ pi* (minute*6/180),            alignment:Alignment.topCenter,            child:Container(              color:Colors.pink,            ),          ).applyConstraint(            width:5,            height:120,            centerTo:rId(0),            translate:constOffset(0,0.5),            percentageTranslate:true,          ),Transform.rotate(            angle: pi+ pi* (second*6/180),            alignment:Alignment.topCenter,            child:Container(              color:Colors.blue,            ),          ).applyConstraint(            width:5,            height:180,            centerTo:rId(0),            translate:constOffset(0,0.5),            percentageTranslate:true,          ),Text('$hour:$minute:$second',            style:constTextStyle(              fontSize:40,            ),          ).applyConstraint(            outTopCenterTo:rId(0),            margin:constEdgeInsets.only(              bottom:250,            ),          )        ],      ),    );  }}

classMarginExampleextendsStatelessWidget {constMarginExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {returnScaffold(      body:ConstraintLayout(        children: [Container(            color:constColor(0xFF005BBB),          ).applyConstraint(            size:50,            topLeftTo: parent,            margin:constEdgeInsets.only(              left:20,              top:100,            ),          ),Container(            color:constColor(0xFFFFD500),          ).applyConstraint(            size:100,            top:sId(-1).bottom,            right: parent.right.margin(100),          ),Container(            color:Colors.pink,          ).applyConstraint(            size:50,            topRightTo: parent.rightMargin(20).topMargin(50),          ),        ],      ),    );  }}

classPinnedPositionExampleStateextendsState<PinnedPositionExample> {lateTimer timer;double angle=0;@overridevoidinitState() {super.initState();    timer=Timer.periodic(constDuration(milliseconds:16), (_) {setState(() {        angle++;      });    });  }@overridevoiddispose() {super.dispose();    timer.cancel();  }@overrideWidgetbuild(BuildContext context) {ConstraintId anchor=ConstraintId('anchor');returnScaffold(      appBar:constCustomAppBar(        title:'Pinned Position',        codePath:'example/pinned_position.dart',      ),      body:ConstraintLayout(        children: [Container(            color:Colors.yellow,          ).applyConstraint(            id: anchor,            size:200,            centerTo: parent,          ),Container(            color:Colors.cyan,          ).applyConstraint(            size:100,            pinnedInfo:PinnedInfo(              anchor,Anchor(0.2,AnchorType.percent,0.2,AnchorType.percent),Anchor(1,AnchorType.percent,1,AnchorType.percent),              angle: angle,            ),          ),Container(            color:Colors.orange,          ).applyConstraint(            size:60,            pinnedInfo:PinnedInfo(              anchor,Anchor(1,AnchorType.percent,1,AnchorType.percent),Anchor(0,AnchorType.percent,0,AnchorType.percent),              angle:360- angle,            ),          ),Container(            color:Colors.black,          ).applyConstraint(            size:60,            pinnedInfo:PinnedInfo(              anchor,Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),              angle: angle,            ),          ),Container(            decoration:constBoxDecoration(              color:Colors.red,              borderRadius:BorderRadius.all(Radius.circular(10)),            ),          ).applyConstraint(            size:10,            centerBottomRightTo: anchor,          ),Container(            decoration:constBoxDecoration(              color:Colors.red,              borderRadius:BorderRadius.all(Radius.circular(10)),            ),          ).applyConstraint(            size:10,            centerTopLeftTo: anchor,          ),Container(            decoration:constBoxDecoration(              color:Colors.red,              borderRadius:BorderRadius.all(Radius.circular(10)),            ),          ).applyConstraint(            size:10,            centerTo: anchor,          )        ],      ),    );  }}

classTrackPainterextendsCustomPainter {Queue<Offset> points=Queue();Paint painter=Paint();TrackPainter(this.points);@overridevoidpaint(Canvas canvas,Size size) {    canvas.drawPoints(PointMode.polygon, points.toList(), painter);  }@overrideboolshouldRepaint(CustomPainter oldDelegate)=>true;}classTranslateExampleStateextendsState<TranslateExample> {lateTimer timer;double angle=0;double earthRevolutionAngle=0;Queue<Offset> points=Queue();@overridevoidinitState() {super.initState();    timer=Timer.periodic(constDuration(milliseconds:16), (_) {setState(() {        angle+=1;        earthRevolutionAngle+=0.1;      });    });  }@overridevoiddispose() {super.dispose();    timer.cancel();  }@overrideWidgetbuild(BuildContext context) {ConstraintId anchor=ConstraintId('anchor');returnScaffold(      appBar:constCustomAppBar(        title:'Translate',        codePath:'example/translate.dart',      ),      body:ConstraintLayout(        children: [CustomPaint(            painter:TrackPainter(points),          ).applyConstraint(            width: matchParent,            height: matchParent,          ),Container(            decoration:constBoxDecoration(              color:Colors.redAccent,              borderRadius:BorderRadius.all(Radius.circular(1000)),            ),            child:constText('----'),            alignment:Alignment.center,          ).applyConstraint(            id:cId('sun'),            size:200,            pinnedInfo:PinnedInfo(              parent,Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),Anchor(0.3,AnchorType.percent,0.5,AnchorType.percent),              angle: earthRevolutionAngle*365/25.4,            ),          ),Container(            decoration:constBoxDecoration(              color:Colors.blue,              borderRadius:BorderRadius.all(Radius.circular(1000)),            ),            child:constText('----'),            alignment:Alignment.center,          ).applyConstraint(            id:cId('earth'),            size:100,            pinnedInfo:PinnedInfo(cId('sun'),Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),              angle: earthRevolutionAngle*365,            ),            translate:circleTranslate(              radius:250,              angle: earthRevolutionAngle,            ),            translateConstraint:true,          ),Container(            decoration:constBoxDecoration(              color:Colors.grey,              borderRadius:BorderRadius.all(Radius.circular(1000)),            ),            child:constText('----'),            alignment:Alignment.center,          ).applyConstraint(            id:cId('moon'),            size:50,            pinnedInfo:PinnedInfo(cId('earth'),Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),              angle: earthRevolutionAngle*365/27.32,            ),            translate:circleTranslate(              radius:100,              angle: earthRevolutionAngle*365/27.32,            ),            translateConstraint:true,            paintCallback: (_, __, ____, offset, ______) {              points.add(offset!);if (points.length>2000) {                points.removeFirst();              }            },          ),Text('Sun rotates ${(earthRevolutionAngle *365 /25.4) ~/360} times')              .applyConstraint(            outTopCenterTo:cId('sun'),          ),Text('Earth rotates ${earthRevolutionAngle *365 ~/360} times')              .applyConstraint(            outTopCenterTo:cId('earth'),          ),Text('Moon rotates ${(earthRevolutionAngle *365 /27.32) ~/360} times')              .applyConstraint(            outTopCenterTo:cId('moon'),          ),Container(            color:Colors.yellow,          ).applyConstraint(            id: anchor,            size:250,            centerRightTo: parent.rightMargin(300),          ),Container(            color:Colors.red,            child:constText('pinned translate'),          ).applyConstraint(            centerTo: anchor,            translate:PinnedTranslate(PinnedInfo(null,Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),null,                angle: angle,              ),            ),          ),Container(            color:Colors.blue,            child:constText('circle translate'),          ).applyConstraint(            size: wrapContent,            centerTo: anchor,            translate:circleTranslate(              radius:100,              angle: angle,            ),          ),Container(            color:Colors.cyan,            child:constText('pinned & circle translate'),          ).applyConstraint(            centerTo: anchor,            translate:PinnedTranslate(PinnedInfo(null,Anchor(0.5,AnchorType.percent,0.5,AnchorType.percent),null,                angle: angle,              ),            )+circleTranslate(                  radius:150,                  angle: angle,                ),          ),Container(            color:Colors.orange,            child:constText('normal translate'),          ).applyConstraint(            size: wrapContent,            outBottomCenterTo: anchor,            translate:Offset(0, angle/5),          )        ],      ),    );  }}

Performance optimization

classOffPaintExampleextendsStatelessWidget {constOffPaintExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {returnMaterialApp(      home:Scaffold(        body:ConstraintLayout(          children: [Container(              color:Colors.orangeAccent,            ).offPaint().applyConstraint(              width:200,              height:200,              topRightTo: parent,            )          ],        ),      ),    );  }}

classOffBuildExampleextendsStatelessWidget {constOffBuildExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {returnMaterialApp(      home:Scaffold(        body:ConstraintLayout(          children: [/// subtrees that do not changeContainer(              color:Colors.orangeAccent,            ).offBuild(id:'id').applyConstraint(              width:200,              height:200,              topRightTo: parent,            )          ],        ),      ),    );  }}

classBarrierExampleextendsStatelessWidget {constBarrierExample({Key? key}):super(key: key);@overrideWidgetbuild(BuildContext context) {ConstraintId leftChild=ConstraintId('leftChild');ConstraintId rightChild=ConstraintId('rightChild');ConstraintId barrier=ConstraintId('barrier');returnScaffold(      body:ConstraintLayout(        childConstraints: [BarrierDefine(            id: barrier,            direction:BarrierDirection.bottom,            referencedIds: [leftChild, rightChild],          ),        ],        children: [Container(            color:constColor(0xFF005BBB),          ).applyConstraint(            id: leftChild,            width:200,            height:200,            topLeftTo: parent,          ),Container(            color:constColor(0xFFFFD500),          ).applyConstraint(            id: rightChild,            width:200,            height: matchConstraint,            centerRightTo: parent,            heightPercent:0.5,            verticalBias:0,          ),constText('Align to barrier',            style:TextStyle(              fontSize:40,              color:Colors.blue,            ),          ).applyConstraint(            centerHorizontalTo: parent,            top: barrier.bottom,          )        ],      ),    );  }}

classConstraintControllerExampleStateextendsState<ConstraintControllerExample> {double x=0;double y=0;ConstraintLayoutController controller=ConstraintLayoutController();@overrideWidgetbuild(BuildContext context) {returnScaffold(      appBar:constCustomAppBar(        title:'Constraint Controller',        codePath:'example/constraint_controller.dart',      ),      body:ConstraintLayout(        controller: controller,        children: [GestureDetector(            child:Container(              color:Colors.pink,              alignment:Alignment.center,              child:constText('box draggable'),            ),            onPanUpdate: (details) {setState(() {                x+= details.delta.dx;                y+= details.delta.dy;                controller.markNeedsPaint();              });            },          ).applyConstraint(            size:200,            centerTo: parent,            translate:Offset(x, y),          )        ],      ),    );  }}

Extension

Support me

Contact

License

MIT LicenseCopyright (c) 2022 hackware1993Permission is hereby granted, free of charge, to any person obtaining a copy of this software andassociated documentation files (the "Software"), to deal in the Software without restriction,including without limitation the rights to use, copy, modify, merge, publish, distribute,sublicense, and/or sell copies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all copies or substantialportions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUTNOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE ANDNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGESOR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR INCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.