You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This guide explains how to add support for a new widget to the Flutter SDUI package, including JSON and proto (gRPC) support. The process ensures your widget can be described by the server, parsed on the client, and rendered as a real Flutter widget.
3
+
This guide explains how to add support for a new widget to the Flutter Glimpse package, including JSON and proto (gRPC) support. The process ensures your widget can be described by the server, parsed on the client, and rendered as a real Flutter widget.
4
4
5
5
---
6
6
7
-
## 1. Create the SDUI Widget Class
7
+
## 1. Create the Glimpse Widget Class
8
8
9
9
-**Where:**`lib/src/widgets/`
10
-
-**What:** Create a Dart class (e.g., `SduiMyWidget`) that extends `SduiWidget`.
11
-
-**Why:** This class acts as the runtime representation of your widget in the SDUI system. It bridges the data-driven world (JSON/proto) and the actual Flutter widget tree.
12
-
-**How:**
10
+
-**What:** Create a Dart class (e.g., `GlimpseMyWidget`) that extends `GlimpseWidget`.
11
+
-**Why:** This class acts as the runtime representation of your widget in the Glimpse system. It bridges the data-driven world (JSON/proto) and the actual Flutter widget tree.
12
+
-**How:**
13
13
- Add all properties your widget needs (e.g., text, color, children).
14
-
- Implement the `toFlutterWidget()` method to convert your SDUI widget to a real Flutter widget.
14
+
- Implement the `toFlutterWidget()` method to convert your Glimpse widget to a real Flutter widget.
15
15
- If your widget has children, make sure to recursively call `toFlutterWidget()` on them.
16
16
17
17
**Example:**
18
+
18
19
```dart
19
20
import 'package:flutter/widgets.dart';
20
-
import 'sdui_widget.dart';
21
+
import 'glimpse_widget.dart';
21
22
22
-
class SduiMyWidget extends SduiWidget {
23
+
class GlimpseMyWidget extends GlimpseWidget {
23
24
final String title;
24
25
final Color? color;
25
-
final List<SduiWidget> children;
26
+
final List<GlimpseWidget> children;
26
27
// Add other properties as needed
27
28
28
-
SduiMyWidget({
29
+
GlimpseMyWidget({
29
30
required this.title,
30
31
this.color,
31
32
this.children = const [],
@@ -41,27 +42,29 @@ class SduiMyWidget extends SduiWidget {
41
42
}
42
43
}
43
44
```
44
-
*Tip: Look at existing SDUI widgets for structure and naming conventions. Try to keep your API as close as possible to the real Flutter widget for familiarity.*
45
+
46
+
_Tip: Look at existing Glimpse widgets for structure and naming conventions. Try to keep your API as close as possible to the real Flutter widget for familiarity._
-**What:** Add logic to parse your widget from proto and serialize it back.
78
-
-**Why:** This allows the SDUI system to construct your widget from gRPC/proto data, and to serialize it back for server communication or round-tripping.
81
+
-**Why:** This allows the Glimpse system to construct your widget from gRPC/proto data, and to serialize it back for server communication or round-tripping.
79
82
-**How:**
80
83
- Add a case for your widget in the `parseProto` and `fromProto` methods.
81
-
- Implement `_parseProtoMyWidget(SduiWidgetData data)` and `myWidgetFromProto` to extract all properties from the proto message and construct your SDUI widget.
82
-
- Add `myWidgetToProto` for proto serialization (convert your SDUI widget to a proto message).
84
+
- Implement `_parseProtoMyWidget(GlimpseWidgetData data)` and `myWidgetFromProto` to extract all properties from the proto message and construct your Glimpse widget.
85
+
- Add `myWidgetToProto` for proto serialization (convert your Glimpse widget to a proto message).
83
86
- Use helper methods for enums, colors, and nested children as needed.
*Tip: Use the helpers and patterns from other widgets to handle enums, colors, and nested children. Consistency makes the codebase easier to maintain.*
100
+
_Tip: Use the helpers and patterns from other widgets to handle enums, colors, and nested children. Consistency makes the codebase easier to maintain._
97
101
98
102
---
99
103
100
104
## 3. Update the Widget Type Enum
101
105
102
-
-**Where:**`sdui.proto` (your proto definitions)
106
+
-**Where:**`glimpse.proto` (your proto definitions)
103
107
-**What:** Add your widget to the `WidgetType` enum.
104
108
-**Why:** This allows the server and client to communicate about your new widget type in a type-safe way.
105
-
-**How:**
109
+
-**How:**
106
110
- Add a new value (e.g., `MY_WIDGET`) to the `WidgetType` enum in your proto file.
107
111
- Regenerate Dart code from your proto files (see README for instructions, usually a script in `tool/`).
108
112
109
113
**Example:**
114
+
110
115
```protobuf
111
116
enum WidgetType {
112
117
// ... existing types ...
113
118
MY_WIDGET = 42;
114
119
}
115
120
```
116
121
117
-
*Tip: Make sure the enum value is unique and does not conflict with existing types.*
122
+
_Tip: Make sure the enum value is unique and does not conflict with existing types._
118
123
119
124
---
120
125
121
-
## 4. Add to Flutter-to-SDUI Converter
126
+
## 4. Add to Flutter-to-Glimpse Converter
122
127
123
-
-**Where:**`lib/src/parser/flutter_to_sdui.dart`
124
-
-**What:** Add a case to convert a real Flutter widget to your SDUI widget.
125
-
-**Why:** This enables tools and tests to convert existing Flutter code to SDUI format, and helps with migration or round-trip testing.
@@ -147,11 +153,11 @@ else if (widget is MyWidget) {
147
153
-**Why:** Testing catches bugs early and ensures your widget behaves as expected in all supported formats.
148
154
-**How:**
149
155
- Add unit tests for JSON and proto parsing/serialization.
150
-
- Add tests for Flutter-to-SDUI conversion.
156
+
- Add tests for Flutter-to-Glimpse conversion.
151
157
- Create sample JSON and proto definitions for your widget and verify they render correctly in a demo app or test harness.
152
158
- Test edge cases (missing properties, nulls, invalid values).
153
159
154
-
*Tip: Use the sample files and test cases for existing widgets as a template. Automated tests are preferred, but manual testing in a demo app is also valuable.*
160
+
_Tip: Use the sample files and test cases for existing widgets as a template. Automated tests are preferred, but manual testing in a demo app is also valuable._
155
161
156
162
---
157
163
@@ -169,24 +175,25 @@ else if (widget is MyWidget) {
169
175
## Example Checklist
170
176
171
177
-[ ] Widget class in `lib/src/widgets/`
172
-
-[ ] JSON parse/serialize in `sdui_proto_parser.dart`
173
-
-[ ] Proto parse/serialize in `sdui_proto_parser.dart`
178
+
-[ ] JSON parse/serialize in `glimpse_proto_parser.dart`
179
+
-[ ] Proto parse/serialize in `glimpse_proto_parser.dart`
174
180
-[ ] Enum in proto and regenerated Dart code
175
-
-[ ] Flutter-to-SDUI conversion
181
+
-[ ] Flutter-to-Glimpse conversion
176
182
-[ ] Tests and sample data
177
183
-[ ] Documentation
178
184
179
185
---
180
186
181
187
**Tips & Best Practices:**
188
+
182
189
- Follow the structure and naming conventions of existing widgets for consistency.
183
190
- Keep your widget’s API as close as possible to the real Flutter widget for familiarity.
184
-
- Only map properties that are supported by both SDUI and the underlying Flutter widget.
191
+
- Only map properties that are supported by both Glimpse and the underlying Flutter widget.
185
192
- If your widget has complex properties (e.g., enums, nested objects), add helper methods for parsing/serialization.
186
193
- If you’re unsure, look at how similar widgets are implemented in the codebase.
187
194
- Use clear error messages for unsupported or unimplemented features.
188
195
- Test with both minimal and maximal property sets.
189
196
190
197
---
191
198
192
-
If you have questions, check the code for similar widgets or open an issue!
199
+
If you have questions, check the code for similar widgets or open an issue!
0 commit comments