Here we will deep dive into the widget designer, which allows the user to interact with the widget under various configurations.
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 in
devicesview 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 the
ThemeData.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
- Locale mode: select the default locale mode to be used in all view modes except
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 view mode, the canvas frame is a constraint container where the widget is placed in the center.
You can adjust the canvas' border by dragging the frame border adjusters as shown below.
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.
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.
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.
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.