Widget designer
Here we will deep dive into the widget designer, which allows the user to interact with the widget under various configurations.
Toolbar​
You can configure and switch the states of each widget designer locally using the controls on the toolbar.


- View mode: switch the frame view mode which contains the widget.
canvas
: show the widget centerly on an adjustable canvas.devices
: show the widget centerly in selected devices. You can further specify the device using the drop down button below the toolbar when you are indevices
view mode. The default selected devices could be configured in the global settings.themes
: show the widget centerly under all provided themes in a default device. Likewise, this can be configured globally. The theme selection color uses theThemeData.scaffoldBackgroundColor
. You can also hover to see the theme's name.locales
: show the widget centerly under all provided locales in a default device. Likewise, this can be configured globally. The current locale is displayed on the top left of the device frame.
- Theme mode: select the default theme mode to be used in all view modes except
themes
. - Locale mode: select the default locale mode to be used in all view modes except
locales
.
Widget frame view​
The widget is displayed in different frames according to the current view mode
configurable in the toolbar. As mentioned before, there are 4 view modes
which utilize the following 2 type of frames to display the widget:
Canvas frame​
Used by canvas
view mode, the canvas frame is a constraint container where the widget is placed in the center.
tip
You can adjust the canvas' border by dragging the frame border adjusters as shown below.


Device frame​
Used by devices
, themes
, locales
view modes, the device frame is a fixed-height container with the give aspect ratio of the selected device where the widget is placed in the center.
tip
All basic gestures are synchronized across all device frames: tap, drag, drop, move. For desktop/web applications, the "drag" scroll behavior is enabled and is encouraged instead of touchpad/mouse wheel scrolling since it is synchronized. However, note that the synchronization uses the exact relative coordinates of the gesture event, hence the behavior might not be optmized on devices with vastly different screensize.


Code view​
You can see the actual code snippet of the widget as well as the constructor used to render the widget in the widget designer in the code view.
note
The source is extracted via the abstract syntax tree (AST) and formatted using dart_style with some auto injected commas. Hence the code might be a bit different than what you have actually written. For more information, please refer to Generators: Component section


Data builder view​
The data builder view allows you to configure at runtime the fields passed to the widget's constructor. A set of predefined builders for common types are provided. You can also create and use your own builders.
Since the data builder view is quite complex, there is a dedicated section for it: Data builder.