update example

Author: fbchen

example/home.dart

@@ -53,36 +53,37 @@ class ExampleHome extends StatelessWidget {
           ).applyConstraint(
             topCenterTo: parent,
           ),
-          ...constraintGrid(
-            id: ConstraintId('exampleList'),
-            margin: const EdgeInsets.only(
-              top: 20,
+          SingleChildScrollView(
+            child: Column(
+              children: [
+                for (int i = 0; i < keyList.length; i++)
+                  SizedBox(
+                    width: double.infinity,
+                    height: 40,
+                    child: TextButton(
+                      onPressed: exampleMap[keyList[i]] == null
+                          ? null
+                          : () {
+                              Navigator.of(context)
+                                  .push(MaterialPageRoute(builder: (_) {
+                                return exampleMap[keyList[i]]!;
+                              }));
+                            },
+                      child: Text(
+                        keyList[i],
+                        style: const TextStyle(
+                          fontSize: 20,
+                        ),
+                      ),
+                    ),
+                  )
+              ],
             ),
-            left: parent.left,
-            top: rId(0).bottom,
-            itemCount: keyList.length,
-            columnCount: 1,
-            itemWidth: matchParent,
-            itemHeight: 40,
-            itemBuilder: (index) {
-              Widget? example = exampleMap[keyList[index]];
-              return TextButton(
-                onPressed: example == null
-                    ? null
-                    : () {
-                        Navigator.of(context)
-                            .push(MaterialPageRoute(builder: (_) {
-                          return example;
-                        }));
-                      },
-                child: Text(
-                  keyList[index],
-                  style: const TextStyle(
-                    fontSize: 20,
-                  ),
-                ),
-              );
-            },
+          ).applyConstraint(
+            width: matchParent,
+            height: matchConstraint,
+            top: sId(-1).bottom,
+            bottom: sId(1).top,
           ),
           const Text(
             'Powered by Flutter Web & ConstraintLayout',
@@ -91,7 +92,6 @@ class ExampleHome extends StatelessWidget {
               fontWeight: FontWeight.bold,
               height: 1.5,
             ),
-            textAlign: TextAlign.center,
           ).applyConstraint(
             bottomCenterTo: parent,
             margin: const EdgeInsets.only(

example/wrapper_constraints.dart

@@ -3,9 +3,17 @@ import 'package:flutter_constraintlayout/src/constraint_layout.dart';
 
 import 'custom_app_bar.dart';
 
-class WrapperConstraintsExample extends StatelessWidget {
+class WrapperConstraintsExample extends StatefulWidget {
   const WrapperConstraintsExample({Key? key}) : super(key: key);
 
+  @override
+  State createState() => WrapperConstraintsExampleState();
+}
+
+class WrapperConstraintsExampleState extends State<WrapperConstraintsExample> {
+  double leftX = 0;
+  double rightX = 0;
+
   Widget item(String text, [Color color = Colors.redAccent]) {
     return Container(
       width: 100,
@@ -55,6 +63,9 @@ class WrapperConstraintsExample extends StatelessWidget {
           ),
           item('centerTopRightTo').applyConstraint(
             centerTopRightTo: rId(0),
+            callback: (_, rect) {
+              leftX = rect.right;
+            },
           ),
           item('centerCenterLeftTo').applyConstraint(
             centerCenterLeftTo: rId(0),
@@ -83,6 +94,12 @@ class WrapperConstraintsExample extends StatelessWidget {
           ),
           item('outTopLeftTo').applyConstraint(
             outTopLeftTo: rId(1),
+            callback: (_, rect) {
+              rightX = rect.left;
+              WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
+                setState(() {});
+              });
+            },
           ),
           item('outTopCenterTo').applyConstraint(
             outTopCenterTo: rId(1),
@@ -132,6 +149,20 @@ class WrapperConstraintsExample extends StatelessWidget {
           item('bottomRightTo', Colors.green).applyConstraint(
             bottomRightTo: rId(1),
           ),
+          const Text(
+            'The display area is overlapping\nPlease view it in full screen on the computer',
+            style: TextStyle(
+              color: Colors.redAccent,
+              fontSize: 16,
+            ),
+            textAlign: TextAlign.center,
+          ).applyConstraint(
+            topCenterTo: parent,
+            margin: const EdgeInsets.only(
+              top: 5,
+            ),
+            visibility: rightX - 1 < leftX ? visible : gone,
+          ),
         ],
       ),
     );