ConstraintLayout inside Expanded

[azizainunnajib]

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