-
-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathfluttertemplate.html
More file actions
301 lines (279 loc) · 12.2 KB
/
Copy pathfluttertemplate.html
File metadata and controls
301 lines (279 loc) · 12.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flutter Template Plugin Documentation</title>
<style>
:root {
--bg: #ffffff;
--fg: #111111;
--muted: #555555;
--accent: #0553b1;
--accent-light: #eaf2fc;
--border: #d0d7de;
--code-bg: #f4f6f8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--fg);
background: var(--bg);
line-height: 1.6;
max-width: 52rem;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
header { border-bottom: 3px solid var(--accent); padding-bottom: 1.2rem; margin-bottom: 2rem; }
header h1 { font-size: 2rem; color: var(--accent); }
header p.subtitle { color: var(--muted); margin-top: 0.3rem; }
header .meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
nav { background: var(--accent-light); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.5rem; margin-bottom: 2.5rem; }
nav h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 0.5rem; }
nav ol { padding-left: 1.3rem; }
nav li { margin: 0.25rem 0; }
nav a { color: var(--accent); text-decoration: none; }
nav a:hover { text-decoration: underline; }
section { margin-bottom: 2.5rem; }
h2 { font-size: 1.4rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; margin-bottom: 1rem; }
h3 { font-size: 1.1rem; margin: 1.2rem 0 0.5rem; }
p, li { margin-bottom: 0.5rem; }
ul, ol { padding-left: 1.4rem; }
code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
background: var(--code-bg);
padding: 0.15em 0.35em;
border-radius: 3px;
font-size: 0.9em;
}
pre {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1rem 1.2rem;
overflow-x: auto;
font-size: 0.88rem;
line-height: 1.5;
margin: 0.8rem 0 1rem;
}
pre code { background: none; padding: 0; }
table { width: 100%; border-collapse: collapse; margin: 0.8rem 0 1rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.8rem; border: 1px solid var(--border); }
th { background: var(--accent-light); font-weight: 600; }
.diagram {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.2rem;
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.85rem;
line-height: 1.55;
overflow-x: auto;
white-space: pre;
margin: 0.8rem 0 1rem;
}
.callout {
background: var(--accent-light);
border-left: 4px solid var(--accent);
padding: 0.8rem 1rem;
border-radius: 0 6px 6px 0;
margin: 1rem 0;
}
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); }
</style>
</head>
<body>
<header>
<h1>Flutter Template</h1>
<p class="subtitle">Adds Flutter starter project templates to Code on the Go's New Project screen</p>
<div class="meta">Version 2.0.0 · Author: RJ Ali · Package: <code>com.ali.fluttertemplate</code></div>
</header>
<nav>
<h2>Contents</h2>
<ol>
<li><a href="#overview">Executive Overview</a></li>
<li><a href="#functionality">Core Functionality</a></li>
<li><a href="#architecture">Technical Architecture</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#benefits">Key Benefits</a></li>
<li><a href="#limitations">Limitations & Scope</a></li>
<li><a href="#credits">Credits</a></li>
</ol>
</nav>
<section id="overview">
<h2>1. Executive Overview</h2>
<p>
Flutter Template is a Code on the Go plugin that adds ready-to-use <strong>Flutter starter
project templates</strong> to the IDE's New Project screen, sitting alongside the built-in
core (Android) templates. Instead of starting from an empty folder, a developer picks a
Flutter template, enters an app name and package name, and the IDE generates a complete,
idiomatic Flutter project skeleton.
</p>
<p>
The plugin contributes five templates — one for a plain Flutter app and four wired to
popular state-management libraries — so a project starts with the chosen architecture
already in place.
</p>
<p>
It is a <strong>headless installer</strong>: it has no screens of its own. When enabled, it
registers its templates with the IDE through the public <code>plugin-api</code> template
service; when disabled, it removes them cleanly.
</p>
</section>
<section id="functionality">
<h2>2. Core Functionality</h2>
<h3>The five templates</h3>
<table>
<thead>
<tr><th>Template</th><th>State management</th><th>Key dependency</th></tr>
</thead>
<tbody>
<tr><td>Flutter Basic</td><td>None (plain <code>setState</code>)</td><td>—</td></tr>
<tr><td>Flutter BLoC</td><td>BLoC pattern</td><td><code>flutter_bloc</code></td></tr>
<tr><td>Flutter Provider</td><td>Provider</td><td><code>provider</code></td></tr>
<tr><td>Flutter GetX</td><td>GetX</td><td><code>get</code></td></tr>
<tr><td>Flutter Riverpod</td><td>Riverpod</td><td><code>flutter_riverpod</code></td></tr>
</tbody>
</table>
<h3>What each template generates</h3>
<p>
Every template produces a small counter app so the chosen pattern is demonstrated end to end:
</p>
<ul>
<li><code>pubspec.yaml</code> — project name (lower-cased from the app name), the SDK
constraint, and the state-management dependency.</li>
<li><code>lib/main.dart</code> — the app entry point and home screen.</li>
<li>A pattern-specific source file where applicable — e.g.
<code>lib/blocs/counter_bloc.dart</code>, <code>lib/providers/counter_provider.dart</code>,
or <code>lib/controllers/counter_controller.dart</code>.</li>
<li><code>analysis_options.yaml</code> — a lint baseline.</li>
<li><code>README.md</code> — getting-started notes for the generated project.</li>
</ul>
<h3>Parameter substitution</h3>
<p>
The app name and package name entered in the New Project dialog are substituted into the
generated files. The app name also drives <code>pubspec.yaml</code>'s <code>name:</code>
field, lower-cased to satisfy Dart's package-name rules.
</p>
</section>
<section id="architecture">
<h2>3. Technical Architecture</h2>
<h3>Template system integration</h3>
<p>
Code on the Go discovers project templates by scanning a templates directory for <code>.cgt</code>
archives. A plugin adds its own by calling <code>IdeTemplateService.registerTemplate()</code>,
which places the archive where the IDE will find it and reloads the template list — so the
plugin's templates appear next to the core ones with no host changes.
</p>
<h3>Authoring with Pebble</h3>
<p>
Each template is authored as a project skeleton bundled in the plugin's assets. Files ending in
<code>.peb</code> are processed by the Pebble template engine at project-creation time
(<code>${{APP_NAME}}</code>, <code>${{PACKAGE_NAME}}</code> and friends are substituted); other
files are copied verbatim. This is the same authoring format the core templates use. Dart's own
<code>$variable</code> string interpolation passes through untouched because it does not match
Pebble's <code>${{ }}</code> delimiter.
</p>
<h3>Lifecycle</h3>
<div class="diagram">
initialize(context)
| acquire IdeTemplateService + IdeFileService
v
activate()
| for each of the 5 variants:
| createTemplateBuilder(name)
| .description(...).showPackageNameOption()
| .thumbnailFromAssets(...)
| .addStaticFromAssets(each bundled file)
| build() -> .cgt -> registerTemplate(.cgt)
v
(templates now visible on the New Project screen)
|
v
deactivate()
| unregisterTemplate(name) + delete staged .cgt for each
v
dispose() -> release service references</div>
<h3>Extension interfaces & services</h3>
<table>
<thead>
<tr><th>Type</th><th>Role</th></tr>
</thead>
<tbody>
<tr><td><code>IPlugin</code></td><td>Lifecycle: <code>initialize</code> / <code>activate</code> / <code>deactivate</code> / <code>dispose</code>.</td></tr>
<tr><td><code>IdeTemplateService</code></td><td>Build and register/unregister the <code>.cgt</code> templates.</td></tr>
<tr><td><code>IdeFileService</code></td><td>Delete staged template files on deactivation.</td></tr>
</tbody>
</table>
<h3>Permissions</h3>
<p>
The plugin requests only <code>filesystem.read</code> and <code>filesystem.write</code> —
what the template service needs to stage and register archives. No network, no native code, no
system commands.
</p>
</section>
<section id="usage">
<h2>4. Usage</h2>
<h3>Install</h3>
<ol>
<li>Build the plugin: <code>cd flutter-template && ./gradlew clean assemblePlugin</code>
(produces <code>build/plugin/fluttertemplate.cgp</code>).</li>
<li>In Code on the Go, open <em>Preferences → Plugin Manager → +</em> and select the
<code>fluttertemplate.cgp</code> file.</li>
<li>Enable the plugin. Its templates register automatically.</li>
</ol>
<h3>Create a project</h3>
<ol>
<li>Open <strong>New Project</strong>.</li>
<li>Pick one of the <strong>Flutter</strong> templates (Basic, BLoC, Provider, GetX, Riverpod).</li>
<li>Enter an <strong>app name</strong> (a valid Dart package identifier — lowercase, no
spaces; underscores are fine) and a <strong>package name</strong>.</li>
<li>Finish the wizard. The generated project appears in your workspace.</li>
</ol>
<div class="callout">
<strong>Building the generated project</strong> requires the Flutter SDK, which Code on the Go
does not yet provide on-device. Run <code>flutter pub get</code> / <code>flutter run</code> on a
machine with Flutter installed, or once an on-device Flutter SDK becomes available.
</div>
</section>
<section id="benefits">
<h2>5. Key Benefits</h2>
<ul>
<li><strong>First-class integration.</strong> Templates appear on the standard New Project
screen next to the core templates — no separate UI to learn.</li>
<li><strong>Architecture on day one.</strong> Pick your state-management approach up front and
start from working, idiomatic boilerplate.</li>
<li><strong>Parameterized.</strong> App name and package name flow into the generated files,
including a Dart-valid <code>pubspec.yaml</code> name.</li>
<li><strong>Clean and reversible.</strong> A headless installer that registers on enable and
fully unregisters on disable — no leftover state.</li>
<li><strong>Plugin-API only.</strong> Built entirely on the stable <code>plugin-api</code>
contract, using the same Pebble template format as the built-in templates.</li>
</ul>
</section>
<section id="limitations">
<h2>6. Limitations & Scope</h2>
<ul>
<li>The plugin <strong>scaffolds project files only</strong>; it does not install the
Flutter/Dart SDK or build/run Flutter projects on-device.</li>
<li>Code on the Go's editor does not currently provide Dart syntax highlighting, completion, or
analysis — these templates create the files, but rich Dart editing is outside the IDE's
current language support.</li>
<li>On-device Flutter toolchain support is a separate, larger effort tracked independently.</li>
</ul>
</section>
<section id="credits">
<h2>7. Credits</h2>
<ul>
<li><strong>Original idea:</strong> Raju Kumar
(<a href="https://appdevforall.atlassian.net/browse/ADFA-2599">ADFA-2599</a>).</li>
<li><strong>Author / implementation:</strong> RJ Ali <rjali3232@gmail.com>, contributed via
the Code on the Go community submission process and rebuilt on the IDE's template system
(<a href="https://appdevforall.atlassian.net/browse/ADFA-3857">ADFA-3857</a>).</li>
</ul>
</section>
<footer>
Flutter Template Plugin Documentation · Version 2.0.0 · com.ali.fluttertemplate
</footer>
</body>
</html>