Code Monkey home page Code Monkey logo

hackware1993 / flutter_constraintlayout Goto Github PK

View Code? Open in Web Editor NEW
472.0 9.0 33.0 7.3 MB

A super powerful Stack, build flexible layouts with constraints. Similar to ConstraintLayout for Android and AutoLayout for iOS. But the code implementation is much more efficient, it has O(n) layout time complexity and no linear equation solving is required.

License: MIT License

Kotlin 0.09% Swift 0.27% Objective-C 0.02% Dart 78.31% HTML 0.31% CMake 7.89% C++ 12.39% C 0.71%
flutter autolayout constraintlayout constraint dart stack layout hell nested

flutter_constraintlayout's People

Contributors

hackw avatar hackware1993 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter_constraintlayout's Issues

ConstraintLayout inside Expanded

is there example using ConstraintLayout inside Expanded?

here is an example, but there is no view in TAB 1. tab 2 okay.
TAB 1 (DiagramConstraintLayout) is using the library constraintLayout. and the second Tab (Information) is NOT using ConstraintLayout.

thanks in advance.

return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 20.0, right: 20),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const SizedBox(
                    height: 4,
                  ),
                  TabBarHome(controller: controller),
                  const SizedBox(
                    height: 20,
                  ),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: controller.tabController,
                children: [DiagramConstraintLayout(), const Information()],
              ),
            ),
          ],
        ),
      ),
    );

and here is co inside DiagramConstraintLayout

class DiagramConstraintLayout extends StatelessWidget {
  final HomeController controller = Get.find<HomeController>();
  final ConstraintId rowTop = ConstraintId('rowTop');
  final ConstraintId inverter = ConstraintId('inverter');
  final ConstraintId battery = ConstraintId('battery');
  final ConstraintId consumption = ConstraintId('consumption');
  final ConstraintId grid = ConstraintId('grid');
  final ConstraintId rowMid = ConstraintId('rowMid');

  DiagramConstraintLayout({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ConstraintLayout(
      width: wrapContent,
      height: wrapContent,
      children: [
        Text('data')
        // Row(
        //   crossAxisAlignment: CrossAxisAlignment.start,
        //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //   children: [
        //     const SizedBox(
        //       width: 48,
        //     ),
        //     SolarDiagram(),
        //     IconButton(
        //         onPressed: controller.init,
        //         icon: const Icon(Icons.replay_rounded))
        //   ],
        // ).applyConstraint(
        //   id: rowTop,
        //   top: parent.top,
        //   left: parent.center,
        // ),
        // Container(
        //   width: 40,
        //   height: 40,
        //   decoration: const ShapeDecoration(
        //     color: Color(0x3339C280),
        //     shape: OvalBorder(),
        //   ),
        //   child: Image.asset(
        //     "assets/images/inverter.png",
        //     height: 25,
        //     width: 25,
        //   ),
        // ).applyConstraint(
        //     id: inverter, top: rowTop.bottom, centerHorizontalTo: parent),
        // Row(
        //         mainAxisSize: MainAxisSize.max,
        //         mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //         children: [BatteryDiagram(), ConsumptionDiagram()])
        //     .applyConstraint(id: rowMid),
      ],
    ));
  }
}

margin left not work, when centerHorizontalTo parent

Widget addressView() {
return Text(
'当前位置:地址1111111111111111111100000002222222222222222222222222220000000',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
).applyConstraint(
id: address,
centerHorizontalTo: parent,
top: center.bottom,
margin: const EdgeInsets.only(top: 24, left: 50,right: 50),
);
}

求助一个约束使用问题

Screenshot_1656032843
我想让Text2在Text1的右边,并且Text1文字超长的时候不会把Text2挤出屏幕该怎么做,原生android是加互相约束

LateInitializationError: Field 'paintingOrderList' has not been initialized.

首次使用, 使用场景如下:
在弹窗里加了个ConstraintLayout, 弹窗使用的是SmartDialog,代码如下:
Future<bool?> showUContractEnableDialog() {
// var centerLine = cId("centerLine");
return SmartDialog.show(
alignment: Alignment.center,
builder: (context) {
return Container(
width: double.infinity,
height: 300,
margin: const EdgeInsets.only(left: 54, right: 54),
padding: const EdgeInsets.only(left: 17, right: 17),
decoration: BoxDecoration(
color: ColorStyle.minePageCardBg,
borderRadius: BorderRadius.circular(9)),
child: ConstraintLayout(
// width: matchParent,
// height: wrapContent,

      children: [
        Text(
          "阿达斯大所大多",
          style: TextStyle(fontSize: 15),
        ).applyConstraint(
          // id: centerLine,
          left: parent.left,
          right: parent.right,
        ),
      ],
    ),
  );
},

);
}

出现如下报错:
image

请问一下大佬如何解决这个问题

Error: A value of type 'AbstractNode?' can't be assigned to a variable of type 'RenderObject?'.

尊敬的作者大大, 首先感谢你的开源精神和开发的这个开源项目。这个控件对于熟悉了android转flutter的开发者来说受益匪浅,在正常使用了一段时间该库后不经意间升级了一次flutter版本,后续便出现了title中描述的编译报错“Error: A value of type 'AbstractNode?' can't be assigned to a variable of type 'RenderObject?'.”看上去像是类型强转出现错误?烦请您查看下如何解决

Flutter SDK:V3.10.6
Dart:3.0.6
DevTools:2.23.1

预祝工作顺利,身体健康。

多个大小不一元素(两边元素小,中间元素大)居中对齐的问题

ConstraintLayout(
children: [
Guideline(
id: guideline,
horizontal: true,
guidelinePercent: 0.5),
Text(
'aaa',
style: TextStyle(
color: llmType > 0
? AppColors.textLGray
: AppColors.textWhite,
fontSize: 16),
textDirection: TextDirection.ltr,
).applyConstraint(
left: parent.left, centerVerticalTo: sId(1)),
Switch(
value: llmType > 0,
onChanged: (value) {
setState(() {
value ? llmType = 1 : llmType = 0;
});
})
.applyConstraint(
left: sId(-1).right, bottom: parent.bottom),
Text(
'bbb',
style: TextStyle(
color: llmType > 0
? AppColors.textWhite
: AppColors.textLGray,
fontSize: 16),
textDirection: TextDirection.ltr,
).applyConstraint(
left: sId(-1).right, centerVerticalTo: sId(-1)),
],
) 这个好像不起作用,第一个(aaa)元素和第三个(bbb)元素高度较小,但是三个元素要求水平居中对齐,所以aaa和bbb都要要相对较大的中间元素Switch看齐(对齐)。现在这样写好像不起作用,aaa没法后一个元素Switch对齐

点击事件失效了。

用的那个网格布局。然后封装了一个item。item内部用InkWell做点击事件,结果没效果

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.