update example

hackw · hackw · commit bafb45d063b8 · 2022-04-14T22:02:04.000+08:00
diff --git a/example/badge.dart b/example/badge.dart
@@ -12,6 +12,7 @@ class BadgeExample extends StatelessWidget {
     return Scaffold(
       appBar: const CustomAppBar(
         title: 'Badge',
+        codePath: 'example/badge.dart',
       ),
       body: ConstraintLayout(
         children: [
@@ -33,8 +34,6 @@ class BadgeExample extends StatelessWidget {
               ),
             ),
           ).applyConstraint(
-            width: wrapContent,
-            height: wrapContent,
             left: anchor.right,
             bottom: anchor.top,
             translate: const Offset(-0.5, 0.5),
diff --git a/example/barrier.dart b/example/barrier.dart
@@ -14,28 +14,25 @@ class BarrierExample extends StatelessWidget {
     return Scaffold(
       appBar: const CustomAppBar(
         title: 'Barrier',
+        codePath: 'example/barrier.dart',
       ),
       body: ConstraintLayout(
-        debugShowGuideline: true,
         children: [
           Container(
             color: const Color(0xFF005BBB),
           ).applyConstraint(
             id: leftChild,
             width: 200,
             height: 200,
-            top: parent.top,
-            left: parent.left,
+            topLeftTo: parent,
           ),
           Container(
             color: const Color(0xFFFFD500),
           ).applyConstraint(
             id: rightChild,
             width: 200,
             height: matchConstraint,
-            right: parent.right,
-            top: parent.top,
-            bottom: parent.bottom,
+            centerRightTo: parent,
             heightPercent: 0.5,
             verticalBias: 0,
           ),
@@ -51,11 +48,8 @@ class BarrierExample extends StatelessWidget {
               color: Colors.blue,
             ),
           ).applyConstraint(
-            width: wrapContent,
-            height: wrapContent,
             centerHorizontalTo: parent,
             top: barrier.bottom,
-            goneMargin: const EdgeInsets.only(top: 20),
           )
         ],
       ),
diff --git a/example/code.dart b/example/code.dart
@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class CodeViewWidget extends StatefulWidget {
+  final String codePath;
+
+  const CodeViewWidget({
+    Key? key,
+    required this.codePath,
+  }) : super(key: key);
+
+  @override
+  State createState() => CodeViewState();
+}
+
+class CodeViewState extends State<CodeViewWidget> {
+  String? code;
+
+  @override
+  void initState() {
+    super.initState();
+    loadCode();
+  }
+
+  void loadCode() async {
+    code = await rootBundle.loadString(widget.codePath);
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(),
+      body: ConstraintLayout(
+        children: [
+          SingleChildScrollView(
+            child: Padding(
+              child: Text(
+                code ?? '',
+                style: const TextStyle(
+                  color: Colors.black,
+                  fontSize: 16,
+                ),
+              ),
+              padding: const EdgeInsets.only(
+                left: 20,
+                top: 20,
+              ),
+            ),
+          ).applyConstraint(
+            width: matchParent,
+            height: matchParent,
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/example/complex_list.dart b/example/complex_list.dart
@@ -26,6 +26,7 @@ class ComplexListExample extends StatelessWidget {
     return Scaffold(
       appBar: const CustomAppBar(
         title: 'ComplexList',
+        codePath: 'example/complex_list.dart',
       ),
       body: ListView.builder(
         itemBuilder: (context, index) {
@@ -54,15 +55,13 @@ class ComplexListExample extends StatelessWidget {
                 fit: BoxFit.fill,
               ).applyConstraint(
                 width: 100,
-                height: wrapContent,
                 centerLeftTo: parent,
               ),
               Image.asset(
                 'assets/test2.webp',
                 fit: BoxFit.fill,
               ).applyConstraint(
                 width: 150,
-                height: wrapContent,
                 centerRightTo: parent,
               ),
               Text(
diff --git a/example/custom_app_bar.dart b/example/custom_app_bar.dart
@@ -1,37 +1,37 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
 
+import 'code.dart';
+
 class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   final double? height;
   final Color backgroundColor;
   final String title;
-  final String leftImg;
-  final GestureTapCallback? onLeftTap;
-  final GestureTapCallback? onRightTap;
-  final String? rightButtonText;
-
-  static const double DEFAULT_HEIGHT = 64;
+  final String? codePath;
 
   const CustomAppBar({
     Key? key,
     this.height,
     this.backgroundColor = Colors.white,
     this.title = '',
-    this.leftImg = 'assets/icon_back.webp',
-    this.onLeftTap,
-    this.rightButtonText,
-    this.onRightTap,
+    this.codePath,
   }) : super(key: key);
 
   @override
   Size get preferredSize {
-    return Size(double.infinity, height ?? DEFAULT_HEIGHT);
+    return Size(double.infinity, height ?? 64);
+  }
+
+  void push(BuildContext context, Widget widget) {
+    Navigator.of(context).push(MaterialPageRoute(builder: (_) {
+      return widget;
+    }));
   }
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: height ?? DEFAULT_HEIGHT,
+      height: height ?? 64,
       color: backgroundColor,
       margin: EdgeInsets.only(
         top: MediaQuery.of(context).viewPadding.top,
@@ -40,7 +40,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
         children: [
           GestureDetector(
             child: Image.asset(
-              leftImg,
+              'assets/icon_back.webp',
               fit: BoxFit.fill,
             ),
             onTap: () {
@@ -65,7 +65,32 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
             ),
           ).applyConstraint(
             centerTo: parent,
-          )
+          ),
+          if (codePath != null)
+            GestureDetector(
+              child: const Text(
+                'View Code',
+                style: TextStyle(
+                  fontSize: 18,
+                  color: Colors.blue,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              onTap: () {
+                push(
+                  context,
+                  CodeViewWidget(
+                    codePath: codePath!,
+                  ),
+                );
+              },
+            ).applyConstraint(
+              centerRightTo: parent,
+              margin: const EdgeInsets.only(
+                right: 20,
+              ),
+              clickPadding: const EdgeInsets.all(20),
+            )
         ],
       ),
     );
diff --git a/example/guideline.dart b/example/guideline.dart
@@ -12,6 +12,7 @@ class GuidelineExample extends StatelessWidget {
     return Scaffold(
       appBar: const CustomAppBar(
         title: 'Guideline',
+        codePath: 'example/guideline.dart',
       ),
       body: ConstraintLayout(
         children: [
@@ -42,9 +43,8 @@ class GuidelineExample extends StatelessWidget {
               fontSize: 40,
               color: Colors.white,
             ),
+            textAlign: TextAlign.center,
           ).applyConstraint(
-            width: wrapContent,
-            height: wrapContent,
             centerHorizontalTo: parent,
             bottom: guideline.bottom,
           )
diff --git a/example/home.dart b/example/home.dart
@@ -5,7 +5,7 @@ import 'barrier.dart';
 import 'complex_list.dart';
 import 'guideline.dart';
 import 'preprocess_complex_list.dart';
-import 'sumary.dart';
+import 'summary.dart';
 
 class ExampleHome extends StatelessWidget {
   const ExampleHome({Key? key}) : super(key: key);
@@ -63,7 +63,7 @@ class ExampleHome extends StatelessWidget {
   }
 
   void push(BuildContext context, Widget widget) {
-    Navigator.of(context).push(MaterialPageRoute(builder: (context2) {
+    Navigator.of(context).push(MaterialPageRoute(builder: (_) {
       return widget;
     }));
   }
diff --git a/example/preprocess_complex_list.dart b/example/preprocess_complex_list.dart
@@ -42,13 +42,11 @@ class PreprocessComplexListExample extends StatelessWidget {
       ),
       Constraint(
         width: 100,
-        height: wrapContent,
         centerLeftTo: parent,
         id: leftImg,
       ),
       Constraint(
         width: 150,
-        height: wrapContent,
         centerRightTo: parent,
         id: rightImg,
       ),
@@ -96,6 +94,7 @@ class PreprocessComplexListExample extends StatelessWidget {
     return Scaffold(
       appBar: const CustomAppBar(
         title: 'PreprocessComplexList',
+        codePath: 'example/preprocess_complex_list.dart',
       ),
       body: ListView.builder(
         itemBuilder: (context, index) {
diff --git a/example/summary.dart b/example/summary.dart
@@ -33,10 +33,10 @@ class SummaryExampleState extends State<SummaryExample> {
     return Scaffold(
       appBar: const CustomAppBar(
         title: 'Summary',
+        codePath: 'example/summary.dart',
       ),
       backgroundColor: Colors.black,
       body: ConstraintLayout(
-        debugShowGuideline: true,
         // Constraints can be separated from widgets
         childConstraints: [
           Constraint(
@@ -89,8 +89,6 @@ class SummaryExampleState extends State<SummaryExample> {
             child: const Text('box3'),
           ).applyConstraint(
             id: box3,
-            width: wrapContent,
-            height: wrapContent,
             right: box1.left,
             top: box1.bottom,
           ),
@@ -168,8 +166,6 @@ class SummaryExampleState extends State<SummaryExample> {
             ),
           ).applyConstraint(
             id: box9,
-            width: wrapContent,
-            height: wrapContent,
             baseline: box7.baseline,
             left: box7.left,
           ),
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -21,4 +21,10 @@ flutter:
   assets:
     - assets/test.webp
     - assets/test2.webp
-    - assets/icon_back.webp
+    - assets/icon_back.webp
+    - example/badge.dart
+    - example/barrier.dart
+    - example/complex_list.dart
+    - example/guideline.dart
+    - example/preprocess_complex_list.dart
+    - example/summary.dart
