Images and code for Control descriptions (#5691)

* Update checkbox docs and tests to use PNG images

Replaced GIF images with PNGs in checkbox documentation and updated references accordingly. Added new PNG screenshot for handling events. Refactored test functions in button and checkbox integration tests to use function-scoped fixtures and renamed parameters for clarity. Commented out handling_events test in checkbox tests.

* Add Card integration tests and update docs

Introduced integration tests for the Card control with golden images for documentation. Updated Card and Checkbox docstrings with code examples, improved Card documentation to use new screenshots, and made music_info.py executable as a script.

* Update Card example and test with ListTile content

Replaces the Card example and integration test to use a ListTile with icon and title, updates styling properties, and refreshes the golden image for documentation. This improves the demonstration of Card usage and aligns the test with the new example.

* Enable and test checkbox event handling in integration tests

Uncommented and activated the test for checkbox event handling in test_checkbox.py, updated the golden screenshot for event handling, and ensured the test app pumps and settles after app initialization for more reliable UI state in tests.

* Update checkbox example and docs with submit action

Refactored the checkbox example to improve message formatting and updated the documentation images with captions reflecting the state after clicking Submit. Integration test now simulates clicking the Submit button before taking a screenshot to match the updated documentation.

* Update TextField docs and add integration test

Updated the TextField documentation to use a new example image and clarified image paths. Added a screenshot integration test and corresponding image for documentation purposes. Also included a code example in the TextField class docstring for better usage clarity.

* Update Text control docs and add integration test

Updated the Text control documentation to use a new example image and clarified image/media paths. Added a code example to the Text class docstring. Introduced an integration test and corresponding golden image for the Text control.

* Update Chip docs and add integration test

Updated chip.md to improve example image references and captions. Added a new screenshot image and integration test for Chip control. Enhanced Chip class docstring with a code example.

* Update CircleAvatar docs and add integration test

Improved documentation for CircleAvatar by updating example images and captions, and added a code example to the class docstring. Introduced an integration test and corresponding golden image for CircleAvatar to ensure visual correctness.

* Update Column docs and add integration test

Updated the Column documentation to use a new example image and clarified image/media paths. Added an integration test and golden image for the Column control. Improved the Column class docstring with a code example for better clarity.

* Update CupertinoButton docs and add integration test

Updated documentation for CupertinoButton to include a new example image and improved example references. Added an integration test and golden image for documentation purposes. Also included a code snippet in the class docstring for better usage clarity.

* Add docs and tests for CupertinoCheckbox

Updated CupertinoCheckbox documentation with new example image and code snippet. Added integration test and golden image for documentation purposes.

* Add example and test for CupertinoFilledButton

Updated documentation to include a basic usage example and image for CupertinoFilledButton. Added an integration test to generate the screenshot used in docs, and included the corresponding golden image. Minor doc improvements for clarity.

* Add CupertinoRadio example and integration test

Updated documentation to include a new example image and code snippet for CupertinoRadio. Added an integration test to generate the example screenshot and included the corresponding image file.

* Add example and test for CupertinoSegmentedButton

Updated documentation to include a code example and image for CupertinoSegmentedButton. Added a screenshot test and corresponding golden image for integration testing.

* Add example and test for CupertinoSlider docs

Updated CupertinoSlider documentation to include a new example image and code snippet. Added a screenshot test and image for documentation purposes, and improved image/media references in the markdown file.

* Add example and test for CupertinoSlidingSegmentedButton

Updated documentation to include a screenshot and code example for CupertinoSlidingSegmentedButton. Added an integration test to generate the image used in docs and improved doc references to example images and media.

* Add example and test for CupertinoSwitch control

Updated documentation for CupertinoSwitch to include a new example image and code snippet. Added a golden image and integration test for the control to improve test coverage and documentation clarity.

* Add example and test for CupertinoTextField docs

Updated CupertinoTextField documentation to include a new example image and code snippet. Added a golden image and integration test to verify the visual appearance of the control. Minor doc improvements for clarity.

* Add example and test for CupertinoTintedButton

Updated documentation for CupertinoTintedButton to include a usage example and image. Added an integration test and corresponding golden image for the button. Enhanced docstring with a code snippet for clarity.

* Add example and test for CupertinoListTile

Updated documentation for CupertinoListTile to include a new example image and code snippet. Added an integration test to generate the example screenshot and included the corresponding image file for documentation purposes.

* Add DataTable doc image and example test

Added a screenshot image for DataTable documentation and an integration test to generate it. Updated documentation to reference the new image and improved example references. Also included a code example in the DataTable class docstring.

* Add Divider control example and integration test

Updated Divider documentation to include a new example image and code snippet. Added an integration test for the Divider control and included a corresponding golden image for screenshot comparison.

* Add example and test for Dropdown control

Updated Dropdown documentation to include a new example image and code snippet. Added a screenshot test for the Dropdown control and included the corresponding golden image. Improved clarity and demonstration of basic Dropdown usage.

* Update DropdownM2 docs and add integration test

Updated the DropdownM2 documentation to use a new example image and clarified image/media paths. Added a screenshot integration test and example image for documentation. Included a basic usage example in the DropdownM2 class docstring.

* Add ExpansionPanel example and test

Updated ExpansionPanel documentation to include a code example and image. Added a screenshot test and golden image for ExpansionPanel to integration tests. The example demonstrates basic usage with two panels, one expanded by default.

* Add ExpansionPanelList doc image and test

Added a screenshot image and integration test for ExpansionPanelList documentation. Updated the markdown to reference the new image and improved the example code in the class docstring.

* Add ExpansionTile example and test image

Updated ExpansionTile documentation to include a new example image and code snippet. Added a screenshot test and image for documentation purposes, and adjusted image references in the docs for clarity.

* Update FilledButton docs and add integration test

Improved FilledButton documentation with updated example images and a new screenshot for docs. Added an integration test for FilledButton and included a code example in the class docstring.

* Add FilledIconButton example and integration test

Updated documentation for FilledIconButton with a new example image and code snippet. Added an integration test and corresponding golden image for visual regression testing.

* Add screenshot test and update FilledTonalButton docs

Added a screenshot test and image for FilledTonalButton in integration tests. Updated documentation to reference the new image and improved example references. Also included a code snippet in the FilledTonalButton class docstring.

* Add FilledTonalIconButton example and test

Updated documentation for FilledTonalIconButton with a new example image and code snippet. Added an integration test and corresponding golden image for the example.

* Refactor text style and value handling in DropdownM2

Improves text style logic by separating font size, color, and focused color handling for clarity and correctness. Replaces 'value' with 'initialValue' in DropdownButtonFormField to match updated API usage.

* Add FloatingActionButton doc image and test

Updated documentation for FloatingActionButton to include a new example image and code snippet. Added a screenshot test and corresponding image for documentation purposes.

* Update dropdown material test image

Replaces the golden image for the macOS dropdown material integration test to reflect updated UI or documentation requirements.

* Add GridView example and integration test

Updated GridView documentation to include a new example image and code snippet. Added an integration test for GridView and the corresponding golden image for screenshot testing.

* Update Icon docs and add integration test

Improves the Icon documentation with a new example image and code snippet. Adds an integration test and corresponding golden image for the Icon control to verify its appearance.

* Add example and test for IconButton documentation

Updated IconButton documentation to include a new example image and code snippet. Added a screenshot test and corresponding image for documentation purposes.

* Add image example and update documentation

Added a new image example and corresponding assets for documentation and integration tests. Updated image.md to reference new example images and included a code snippet in image.py for clarity.

* Enable image tests and update golden images

Re-enabled previously skipped image and image_base64 integration tests by removing skip decorators. Updated macOS golden images and added pump_times and pump_duration parameters to improve test reliability.

* Update image test to use online image source

Removed local sample_image.jpg and updated test_image.py to use an online image for testing. Adjusted image properties and screenshot parameters for improved reliability. Updated golden image to reflect new test output.

* Update Image control example in docstring

Revised the example in the Image control docstring to use a remote image URL, adjusted width and height to 100, and added the fit property for clarity.

* Add ListTile doc image and example test

Added a new screenshot image for ListTile documentation and an integration test to generate it. Updated the ListTile documentation to reference the new image and improved the example section. Also included a code snippet in the ListTile class docstring for clarity.

---------

Co-authored-by: Feodor Fitsner <[email protected]>

Author: InesaFitsner

client/pubspec.lock

@@ -682,10 +682,10 @@ packages:
     dependency: transitive
     description:
       name: logger
-      sha256: "55d6c23a6c15db14920e037fe7e0dc32e7cdaf3b64b4b25df2d541b5b6b81c0c"
+      sha256: a7967e31b703831a893bbc3c3dd11db08126fe5f369b5c648a36f821979f5be3
       url: "https://pub.dev"
     source: hosted
-    version: "2.6.1"
+    version: "2.6.2"
   logging:
     dependency: transitive
     description:
@@ -730,18 +730,18 @@ packages:
     dependency: transitive
     description:
       name: media_kit
-      sha256: "48c10c3785df5d88f0eef970743f8c99b2e5da2b34b9d8f9876e598f62d9e776"
+      sha256: "52a8e989babc431db0aa242f32a4a08e55f60662477ea09759a105d7cd6410da"
       url: "https://pub.dev"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   media_kit_libs_android_video:
     dependency: transitive
     description:
       name: media_kit_libs_android_video
-      sha256: adff9b571b8ead0867f9f91070f8df39562078c0eb3371d88b9029a2d547d7b7
+      sha256: "3f6274e5ab2de512c286a25c327288601ee445ed8ac319e0ef0b66148bd8f76c"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.7"
+    version: "1.3.8"
   media_kit_libs_ios_video:
     dependency: transitive
     description:
@@ -770,10 +770,10 @@ packages:
     dependency: transitive
     description:
       name: media_kit_libs_video
-      sha256: "958cc55e7065d9d01f52a2842dab2a0812a92add18489f1006d864fb5e42a3ef"
+      sha256: "2b235b5dac79c6020e01eef5022c6cc85fedc0df1738aadc6ea489daa12a92a9"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.6"
+    version: "1.0.7"
   media_kit_libs_windows_video:
     dependency: transitive
     description:
@@ -786,10 +786,10 @@ packages:
     dependency: transitive
     description:
       name: media_kit_video
-      sha256: a656a9463298c1adc64c57f2d012874f7f2900f0c614d9545a3e7b8bb9e2137b
+      sha256: "813858c3fe84eb46679eb698695f60665e2bfbef757766fac4d2e683f926e15a"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   meta:
     dependency: transitive
     description:
@@ -1026,18 +1026,18 @@ packages:
     dependency: transitive
     description:
       name: record_android
-      sha256: "854627cd78d8d66190377f98477eee06ca96ab7c9f2e662700daf33dbf7e6673"
+      sha256: f05677eeed074898327f890f232f9eb49cd99d1c20d0daaf22b5612f4b2301bb
       url: "https://pub.dev"
     source: hosted
-    version: "1.4.2"
+    version: "1.4.3"
   record_ios:
     dependency: transitive
     description:
       name: record_ios
-      sha256: "13e241ed9cbc220534a40ae6b66222e21288db364d96dd66fb762ebd3cb77c71"
+      sha256: "765b42ac1be019b1674ddd809b811fc721fe5a93f7bb1da7803f0d16772fd6d7"
       url: "https://pub.dev"
     source: hosted
-    version: "1.1.2"
+    version: "1.1.4"
   record_linux:
     dependency: transitive
     description:
@@ -1050,10 +1050,10 @@ packages:
     dependency: transitive
     description:
       name: record_macos
-      sha256: "2849068bb59072f300ad63ed146e543d66afaef8263edba4de4834fc7c8d4d35"
+      sha256: "842ea4b7e95f4dd237aacffc686d1b0ff4277e3e5357865f8d28cd28bc18ed95"
       url: "https://pub.dev"
     source: hosted
-    version: "1.1.1"
+    version: "1.1.2"
   record_platform_interface:
     dependency: transitive
     description:

packages/flet/lib/src/controls/dropdownm2.dart

@@ -70,11 +70,23 @@ class _DropdownM2ControlState extends State<DropdownM2Control> {
 
     var textStyle = widget.control
         .getTextStyle("text_style", Theme.of(context), const TextStyle())!;
-    if (textSize != null || color != null || focusedColor != null) {
+
+    if (textSize != null) {
+      textStyle = textStyle.copyWith(fontSize: textSize);
+    }
+
+    if (focusedColor != null) {
       textStyle = textStyle.copyWith(
-          fontSize: textSize,
-          color: (_focused ? (focusedColor ?? color) : color) ??
-              Theme.of(context).colorScheme.onSurface);
+          color: _focused ? focusedColor : (color ?? textStyle.color));
+    }
+
+    if (color != null) {
+      textStyle = textStyle.copyWith(color: color);
+    }
+
+    if (textStyle.color == null) {
+      textStyle =
+          textStyle.copyWith(color: Theme.of(context).colorScheme.onSurface);
     }
 
     var items = widget.control
@@ -113,7 +125,7 @@ class _DropdownM2ControlState extends State<DropdownM2Control> {
       style: textStyle,
       autofocus: widget.control.getBool("autofocus", false)!,
       focusNode: _focusNode,
-      value: _value,
+      initialValue: _value,
       dropdownColor: widget.control.getColor("bgcolor", context),
       enableFeedback: widget.control.getBool("enable_feedback"),
       elevation: widget.control.getInt("elevation", 8)!,

sdk/python/examples/controls/card/__init__.py

@@ -35,4 +35,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/card/music_info.py

@@ -3,8 +3,10 @@
 
 def main(page: ft.Page):
     def handle_button_click(e: ft.Event[ft.Button]):
-        message.value = f"Checkboxes values are:  {c1.value}, {c2.value}, {c3.value}, "
-        f"{c4.value}, {c5.value}."
+        message.value = (
+            f"Checkboxes values are:  {c1.value}, {c2.value}, {c3.value}, "
+            f"{c4.value}, {c5.value}."
+        )
         page.update()
 
     page.add(

sdk/python/examples/controls/checkbox/basic.py

@@ -1,10 +1,10 @@
 ---
 class_name: flet.Card
 examples: ../../examples/controls/card
-example_images: ../examples/controls/card/media
+example_images: ../test-images/examples/material/golden/macos/card
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic card") }}
 
 ## Examples
 
@@ -14,7 +14,7 @@ example_images: ../examples/controls/card/media
 --8<-- "{{ examples }}/music_info.py"
 ```
 
-{{ image(example_images + "/music_info.gif", alt="music-info", width="80%") }}
+{{ image(example_images + "/music_info.png", alt="music-info", width="50%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/card.md

@@ -16,7 +16,7 @@ example_images: ../test-images/examples/material/golden/macos/checkbox
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="50%") }}
+{{ image(example_images + "/basic.png", alt="basic", width="50%", caption="After clicking Submit") }}
 
 
 ### Handling events
@@ -25,7 +25,7 @@ example_images: ../test-images/examples/material/golden/macos/checkbox
 --8<-- "{{ examples }}/handling_events.py"
 ```
 
-{{ image(example_images + "/handling_events.gif", alt="handling-events", width="50%") }}
+{{ image(example_images + "/handling_events.png", alt="handling-events", width="50%", caption="After three clicks") }}
 
 
 ### Styled checkboxes
@@ -34,6 +34,6 @@ example_images: ../test-images/examples/material/golden/macos/checkbox
 --8<-- "{{ examples }}/styled.py"
 ```
 
-{{ image(example_images + "/styled_checkboxes.gif", alt="Styled checkboxes", width="50%") }}
+{{ image(example_images + "/styled_checkboxes.png", alt="Styled checkboxes", width="50%") }}
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/checkbox.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.Chip
 examples: ../../examples/controls/chip
-example_images: ../examples/controls/chip/media
+example_images: ../test-images/examples/material/golden/macos/chip
+example_media: ../examples/controls/chip/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Chip") }}
 
 ## Examples
 
@@ -22,7 +23,7 @@ An alternative to assist chips are [buttons](buttons/index.md), which should app
 --8<-- "{{ examples }}/assist_chips.py"
 ```
 
-{{ image(example_images + "/assist_chips.png", alt="assist-chips", width="80%") }}
+{{ image(example_media + "/assist_chips.png", alt="assist-chips", width="80%") }}
 
 
 ### Filter chips
@@ -36,7 +37,7 @@ They can be a good alternative to switches or checkboxes.
 --8<-- "{{ examples }}/filter_chips.py"
 ```
 
-{{ image(example_images + "/filter_chips.png", alt="filter-chips", width="80%") }}
+{{ image(example_media + "/filter_chips.png", alt="filter-chips", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/chip.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.CircleAvatar
 examples: ../../examples/controls/circle_avatar
-example_images: ../examples/controls/circle_avatar/media
+example_images: ../test-images/examples/material/golden/macos/circle_avatar
+example_media: ../examples/controls/circle_avatar/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic CircleAvatar") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/circle_avatar/media
 --8<-- "{{ examples }}/user_avatars.py"
 ```
 
-{{ image(example_images + "/user_avatars.png", alt="user-avatars", width="80%") }}
+{{ image(example_media + "/user_avatars.png", alt="user-avatars", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/circleavatar.md

@@ -1,10 +1,11 @@
 ---
 class_name: flet.Column
 examples: ../../examples/controls/column
-example_images: ../examples/controls/column/media
+example_images: ../test-images/examples/material/golden/macos/column
+example_media: ../examples/controls/column/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Column with Text controls") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/column/media
 --8<-- "{{ examples }}/spacing.py"
 ```
 
-{{ image(example_images + "/spacing.gif", alt="spacing", width="80%") }}
+{{ image(example_media + "/spacing.gif", alt="spacing", width="80%") }}
 
 
 ### Column wrapping
@@ -25,7 +26,7 @@ example_images: ../examples/controls/column/media
 --8<-- "{{ examples }}/wrap.py"
 ```
 
-{{ image(example_images + "/wrap.gif", alt="wrap", width="80%") }}
+{{ image(example_media + "/wrap.gif", alt="wrap", width="80%") }}
 
 
 ### Column vertical alignments
@@ -34,7 +35,7 @@ example_images: ../examples/controls/column/media
 --8<-- "{{ examples }}/alignment.py"
 ```
 
-{{ image(example_images + "/alignment.png", alt="alignment", width="80%") }}
+{{ image(example_media + "/alignment.png", alt="alignment", width="80%") }}
 
 
 ### Column horizontal alignments
@@ -43,7 +44,7 @@ example_images: ../examples/controls/column/media
 --8<-- "{{ examples }}/horizontal_alignment.py"
 ```
 
-{{ image(example_images + "/horizontal_alignment.png", alt="horizontal-alignment", width="80%") }}
+{{ image(example_media + "/horizontal_alignment.png", alt="horizontal-alignment", width="80%") }}
 
 
 ### Infinite scrolling
@@ -63,7 +64,7 @@ This example shows how to use [`scroll_to()`][flet.Column.scroll_to] to programm
 --8<-- "{{ examples }}/programmatic_scroll.py"
 ```
 
-{{ image(example_images + "/programmatic_scroll.png", alt="programmatic-scroll", width="80%") }}
+{{ image(example_media + "/programmatic_scroll.png", alt="programmatic-scroll", width="80%") }}
 
 
 [//]: # (### Custom scrollbar)