Add widgetbook for every widget

clj/src/cljd/flutter.cljd

@@ -1279,7 +1279,7 @@
     :managed [*hud-enabled (atom nil) :dispose nil
               _ (println "[* RDY)_") :dispose nil]
     (widgets/Stack
-      .alignment widgets/AlignmentGeometry.topLeft
+      .alignment widgets/Alignment.topLeft
       .fit widgets/StackFit.expand
       .children
       [(widget

samples/bottom_navigation_bar/src/sample/bottom_navigation_bar.cljd

@@ -4,36 +4,28 @@
    ["package:flutter/material.dart" :as m]
    [cljd.flutter :as f]))
 
-(defn main
+(defn bottom-nav-widget
+  "Reusable bottom navigation bar widget that can be embedded in any app."
   []
-  (let
-      [title "Bottom Navigation Bar Demo"
-       pages [(m/Icon. m/Icons.directions_car)
-              (m/Icon. m/Icons.directions_transit)
-              (m/Icon. m/Icons.directions_bike)]
-       selected-index (atom 0)]
-    (f/run
-      (m/MaterialApp .title title)
+  (let [pages [(m/Icon. m/Icons.directions_car .size 64)
+               (m/Icon. m/Icons.directions_transit .size 64)
+               (m/Icon. m/Icons.directions_bike .size 64)]
+        selected-index (atom 0)]
+    (f/widget
+     :watch [idx selected-index]
+     (m/Scaffold
+      .appBar (m/AppBar .title (m/Text "Bottom Navigation"))
+      .body (m/Center .child (get pages idx))
+      .bottomNavigationBar
+      (m/BottomNavigationBar
+       .currentIndex idx
+       .onTap #(reset! selected-index %)
+       .items
+       [(m/BottomNavigationBarItem .icon (m/Icon m/Icons.directions_car) .label "Car")
+        (m/BottomNavigationBarItem .icon (m/Icon m/Icons.directions_transit) .label "Transit")
+        (m/BottomNavigationBarItem .icon (m/Icon m/Icons.directions_bike) .label "Bike")])))))
 
-      .home
-      (m/Scaffold
-
-       .appBar
-       (m/AppBar
-        .title
-        (m/Text "BottomNavigationBar"))
-
-       .body
-       (m/Center
-        .child
-        (f/widget :watch [current-index selected-index] (get pages current-index)))
-
-       .bottomNavigationBar
-       (f/widget
-        :watch [current-index selected-index]
-        (m/BottomNavigationBar
-         .items [(m/BottomNavigationBarItem .icon (m/Icon. m/Icons.directions_car) .label "directions_car")
-                 (m/BottomNavigationBarItem .icon (m/Icon. m/Icons.directions_transit) .label "directions_transit")
-                 (m/BottomNavigationBarItem .icon (m/Icon. m/Icons.directions_bike) .label "directions_bike")]
-         .currentIndex current-index
-         .onTap (fn [index] (reset! selected-index index))))))))
+(defn main []
+  (f/run
+   (m/MaterialApp .title "Bottom Navigation Bar Demo")
+   .home (bottom-nav-widget)))

samples/counter/src/sample/counter.cljd

@@ -4,27 +4,32 @@
    ["package:flutter/material.dart" :as m]
    [cljd.flutter :as f]))
 
-(defn main []
+(defn counter-widget
+  "Reusable counter widget that can be embedded in any app."
+  []
   (let [counter (atom 0)]
-    (f/run
-      (m/MaterialApp
-        .title "Cljd Demo"
-        .theme (m/ThemeData .primarySwatch m/Colors.blue))
-      .home
-      (m/Scaffold
-        .appBar (m/AppBar .title (m/Text "ClojureDart Home Page"))
-        .floatingActionButton
-        (f/widget
-          (m/FloatingActionButton
-            .onPressed #(swap! counter inc)
-            .tooltip "Increment")
-          (m/Icon m/Icons.add)))
-      .body
-      m/Center
-      (m/Column .mainAxisAlignment m/MainAxisAlignment.center)
-      .children
-      [(m/Text "You have pushed the button this many times:")
-       (f/widget
-         :get {{{:flds [displayLarge]} .-textTheme} m/Theme}
-         :watch [N counter]
-         (m/Text (str N) .style displayLarge))])))
+    (f/widget
+     (m/Scaffold
+      .appBar (m/AppBar .title (m/Text "Counter Demo"))
+      .floatingActionButton
+      (f/widget
+       (m/FloatingActionButton
+        .onPressed #(swap! counter inc)
+        .tooltip "Increment")
+       (m/Icon m/Icons.add)))
+     .body
+     m/Center
+     (m/Column .mainAxisAlignment m/MainAxisAlignment.center)
+     .children
+     [(m/Text "You have pushed the button this many times:")
+      (f/widget
+       :get {{{:flds [displayLarge]} .-textTheme} m/Theme}
+       :watch [N counter]
+       (m/Text (str N) .style displayLarge))])))
+
+(defn main []
+  (f/run
+   (m/MaterialApp
+    .title "Cljd Demo"
+    .theme (m/ThemeData .primarySwatch m/Colors.blue))
+   .home (counter-widget)))

samples/fetch-data/src/sample/fetch_data.cljd

@@ -6,18 +6,22 @@
    ["package:http/http.dart" :as http]
    [cljd.flutter :as f]))
 
+(def fetch-data-widget
+  "Reusable fetch data widget that can be embedded in any app."
+  (f/widget
+   (m/Scaffold .appBar (m/AppBar .title (m/Text "Fetch Data Example")))
+   .body
+   m/Center
+   :watch [response (http/get (Uri/parse "https://jsonplaceholder.typicode.com/albums/1"))]
+   (if-some [{sc .-statusCode body .-body} ^http/Response response]
+     (case sc
+       200 (m/Text (get (c/json.decode body) "title"))
+       (m/Text (str "Something wrong happened, status code: " sc)))
+     (m/CircularProgressIndicator))))
+
 (defn main []
   (f/run
-    (m/MaterialApp
-      .title "Fetch Data Example"
-      .theme (m/ThemeData .primarySwatch m/Colors.blue))
-    .home
-    (m/Scaffold .appBar (m/AppBar .title (m/Text "Fetch Data Example")))
-    .body
-    m/Center
-    :watch [response (http/get (Uri/parse "https://jsonplaceholder.typicode.com/albums/1"))]
-    (if-some [{sc .-statusCode body .-body} ^http/Response response] ;; type hint is not necessary here, it removes compiler warnings
-      (case sc
-        200 (m/Text (get (c/json.decode body) "title"))
-        (m/Text (str "Something wrong happened, status code: " sc)))
-      (m/CircularProgressIndicator))))
+   (m/MaterialApp
+    .title "Fetch Data Example"
+    .theme (m/ThemeData .primarySwatch m/Colors.blue))
+   .home fetch-data-widget))

samples/fizzbuzz/src/sample/fizzbuzz.cljd

@@ -5,26 +5,30 @@
 
 (def ^m/TextStyle text-style (m/TextStyle .fontWeight m/FontWeight.w700 .fontSize 32))
 
+(def fizzbuzz-widget
+  "Reusable fizzbuzz widget that can be embedded in any app."
+  (f/widget
+   (m/Scaffold .appBar (m/AppBar .title (m/Text "Fizz Buzz Demo")))
+   .body
+   :let [s1 (-> (Stream/periodic (Duration .seconds 1) identity) .asBroadcastStream)
+         s3 (Stream/periodic (Duration .seconds 3) #(* 3 (inc %)))
+         s5 (Stream/periodic (Duration .seconds 5) #(* 5 (inc %)))]
+   (m/Column .mainAxisAlignment m/MainAxisAlignment.center .crossAxisAlignment m/CrossAxisAlignment.stretch)
+   .children
+   [(f/widget
+     :watch [n s1
+             :default 0]
+     (m/Text (str n) .textAlign m/TextAlign.center .style text-style))
+    (f/widget
+     :watch [n (f/sub [s1 s3] (fn [[n n3]] (if (= n n3) "Fizz" " ")))
+             :default " "]
+     (m/Text n .textAlign m/TextAlign.center .style (.apply text-style .color m/Colors.red.shade200)))
+    (f/widget
+     :watch [n (f/sub [s1 s5] (fn [[n n5]] (if (= n n5) "Buzz" " ")))
+             :default " "]
+     (m/Text n .textAlign m/TextAlign.center .style (.apply text-style .color m/Colors.green.shade200)))]))
+
 (defn main []
   (f/run
-    (m/MaterialApp .title "Fizz buzz Demo")
-    .home
-    (m/Scaffold .appBar (m/AppBar .title (m/Text "Fizz buzz Demo")))
-    .body
-    :let [s1 (-> (Stream/periodic (Duration .seconds 1) identity) .asBroadcastStream)
-          s3 (Stream/periodic (Duration .seconds 3) #(* 3 (inc %)))
-          s5 (Stream/periodic (Duration .seconds 5) #(* 5 (inc %)))]
-    (m/Column .mainAxisAlignment m/MainAxisAlignment.center .crossAxisAlignment m/CrossAxisAlignment.stretch)
-    .children
-    [(f/widget
-       :watch [n s1
-               :default 0]
-       (m/Text (str n) .textAlign m/TextAlign.center .style text-style))
-     (f/widget
-       :watch [n (f/sub [s1 s3] (fn [[n n3]] (if (= n n3) "Fizz" " ")))
-               :default " "]
-       (m/Text n .textAlign m/TextAlign.center .style (.apply text-style .color m/Colors.red.shade200)))
-     (f/widget
-       :watch [n (f/sub [s1 s5] (fn [[n n5]] (if (= n n5) "Buzz" " ")))
-               :default " "]
-       (m/Text n .textAlign m/TextAlign.center .style (.apply text-style .color m/Colors.green.shade200)))]))
+   (m/MaterialApp .title "Fizz Buzz Demo")
+   .home fizzbuzz-widget))

samples/form_handle_change_textfield/src/sample/form_handle_change.cljd

@@ -0,0 +1,28 @@
+(ns sample.form-handle-change
+  "Faithful port of https://docs.flutter.dev/cookbook/forms/text-field-changes"
+  (:require ["package:flutter/material.dart" :as m]
+            [cljd.flutter :as f]))
+
+(def form-handle-change-widget
+  "Reusable form handle change widget that can be embedded in any app."
+  (f/widget
+   (m/Scaffold .appBar (m/AppBar .title (m/Text "Handle Text Changes")))
+   .body
+   (m/Padding .padding (m/EdgeInsets.all 16.0))
+   :managed [text-controller (m/TextEditingController)]
+   :bg-watcher ([^m/TextEditingValue {second-input-text .-text} text-controller]
+                (dart:core/print (str "Second text field: " second-input-text)))
+   m/Column
+   .children
+   [(m/TextField
+     .decoration (m/InputDecoration .labelText "First field (onChanged)")
+     .onChanged (fn [text] (dart:core/print (str "First text field: " text))))
+    (m/SizedBox .height 16)
+    (m/TextField
+     .decoration (m/InputDecoration .labelText "Second field (controller)")
+     .controller text-controller)]))
+
+(defn main []
+  (f/run
+   (m/MaterialApp .title "Handle Text Changes")
+   .home form-handle-change-widget))

samples/form_retrieve_input/src/sample/form_retrieve_input.cljd

@@ -0,0 +1,32 @@
+(ns sample.form-retrieve-input
+  "Faithful port of https://docs.flutter.dev/cookbook/forms/retrieve-input"
+  (:require ["package:flutter/material.dart" :as m]
+            [cljd.flutter :as f]))
+
+(defn form-retrieve-input-widget
+  "Reusable form retrieve input widget that can be embedded in any app."
+  []
+  (f/widget
+   :context ctx
+   :managed [tc (m/TextEditingController)]
+   (m/Scaffold
+    .appBar (m/AppBar .title (m/Text "Retrieve Text Input"))
+    .body
+    (m/Padding. .padding (m/EdgeInsets.all 16.0)
+                .child (m/TextField .controller tc))
+    .floatingActionButton
+    (m/FloatingActionButton
+     .onPressed (fn []
+                  (m/showDialog
+                   .context ctx
+                   .builder
+                   (f/build
+                    :let [{:flds [text]} tc]
+                    (m/AlertDialog .content (m/Text text)))) nil)
+     .tooltip "Show me the value!"
+     .child (m/Icon m/Icons.text_fields)))))
+
+(defn main []
+  (f/run
+   (m/MaterialApp .title "Retrieve text input")
+   .home (form-retrieve-input-widget)))

samples/form_validate/src/sample/form_validate.cljd

@@ -0,0 +1,32 @@
+(ns sample.form-validate
+  "Faithful port of https://docs.flutter.dev/cookbook/forms/validation"
+  (:require ["package:flutter/material.dart" :as m]
+            [cljd.flutter :as f]
+            [cljd.string :as str]))
+
+(defn form-validate-widget
+  "Reusable form validation widget that can be embedded in any app."
+  []
+  (let [form-key (#/(m/GlobalKey m/FormState))]
+    (f/widget
+     :get [m/ScaffoldMessenger]
+     (m/Scaffold .appBar (m/AppBar .title (m/Text "Form Validation")))
+     .body
+     (m/Form .key form-key)
+     (m/Padding .padding (m/EdgeInsets.all 16))
+     (m/Column .crossAxisAlignment m/CrossAxisAlignment.start)
+     .children
+     [(m/TextFormField
+       .decoration (m/InputDecoration .labelText "Enter some text")
+       .validator (fn [value] (when (str/blank? value) "Please enter some text")))
+      (m/SizedBox .height 16)
+      (m/ElevatedButton
+       .onPressed #(when (.validate (.-currentState form-key))
+                     (.showSnackBar scaffold-messenger (m/SnackBar .content (m/Text "Processing Data")))
+                     nil)
+       .child (m/Text "Submit"))])))
+
+(defn main []
+  (f/run
+   (m/MaterialApp .title "Form Validation Demo")
+   .home (form-validate-widget)))

samples/gridlist/src/sample/gridlist.cljd

@@ -4,16 +4,19 @@
    ["package:flutter/material.dart" :as m]
    [cljd.flutter :as f]))
 
+(def gridlist-widget
+  "Reusable grid list widget that can be embedded in any app."
+  (f/widget
+   (m/Scaffold .appBar (m/AppBar .title (m/Text "Grid List")))
+   .body
+   :get {{{:flds [headlineMedium]} .-textTheme} m/Theme}
+   (m/GridView.count .crossAxisCount 2)
+   .children
+   (for [i (range 100)]
+     (m/Center .child (m/Text (str "Item " i) .style headlineMedium)))))
+
 (defn main []
-  (let [title "Grid List"]
-    (m/runApp
-     (f/widget
-      (m/MaterialApp .title title)
-      .home
-      (m/Scaffold .appBar (m/AppBar .title (m/Text title)))
-      .body
-      :get {{{:flds [headline3]} .-textTheme} m/Theme}
-      (m/GridView.count .crossAxisCount 2)
-      .children
-      (for [i (range 100)]
-        (m/Center .child (m/Text (str "Item " i) .style headline3)))))))
+  (m/runApp
+   (f/widget
+    (m/MaterialApp .title "Grid List")
+    .home gridlist-widget)))