feat: Add "Wrap with RepaintBoundary" command

This commit adds a new command, "Wrap with RepaintBoundary", to the Flutter development extension. The command allows users to easily wrap any widget with a `RepaintBoundary` widget, which isolates the repaint process of the wrapped widget. This can improve performance in complex UIs.

Note: This commit message follows the established convention of using a "feat" prefix for new feature additions.

Author: PlugFox

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 ## How to add widget wrappper
 
-1. Add command to package.json
+1. Add command to `package.json`
 
 ```json
 {
@@ -17,7 +17,7 @@
 }
 ```
 
-2. Add snippet to src/commands/wrap-with.command.ts
+2. Add snippet to `src/commands/wrap-with.command.ts`
 
 ```ts
 const snippetListenableBuilder = (widget: string) => {
@@ -32,7 +32,18 @@ export const wrapWithListenableBuilder = async () =>
   wrapWith(snippetListenableBuilder);
 ```
 
-3. Add command to src/extension.ts
+3. Add action to `src/code-actions/code-action-wrap.ts`
+
+```ts
+  return [
+      {
+          command: "flutter-plus.wrap-listenablebuilder",
+          title: "Wrap with ListenableBuilder",
+      }
+  ]
+```
+
+4. Add command to `src/extension.ts`
 
 ```ts
 export function activate(context: vscode.ExtensionContext) {

README.md

@@ -2,6 +2,17 @@
 
 Extension add some useful commands to Flutter development in Visual Studio Code.
 
+## Wrap with...
+
+This package extends your Flutter development experience by providing convenient snippets and commands for wrapping widgets with other commonly used Flutter widgets, similar to the "Wrap with..." functionality in Flutter's built-in extension for VS Code. These additions streamline the process of encapsulating your widgets within other widgets that enhance functionality or control, such as state management, repaint isolation, and more.
+
+Simply select the widget you want to wrap, and choose the appropriate "Wrap with..." command from the command palette, or use the provided snippets to quickly insert the desired wrapper code into your widget tree.
+
+- **Wrap with ListenableBuilder**: Easily wrap any widget with a `ListenableBuilder` to rebuild the widget based on changes in a `Listenable` object.
+- **Wrap with ValueListenableBuilder<T>**: Automatically wrap your widget with a `ValueListenableBuilder` to react to changes in a `ValueListenable<T>`.
+- **Wrap with RepaintBoundary**: Encapsulate your widget within a `RepaintBoundary` to isolate its repaint process, improving performance in complex UIs.
+
+
 ## Markdown snippets
 
 | Shortcut            | Description                                                                                                                                                                             |
@@ -89,4 +100,4 @@ Extension add some useful commands to Flutter development in Visual Studio Code.
 | col                 | Creates a `Column` widget, which displays its children in a vertical array.                                                                                                             |
 | wrap                | Creates a `Wrap` widget, which displays its children in multiple horizontal or vertical runs, wrapping to the next line when necessary.                                                 |
 | stack               | Creates a `Stack` widget, which allows you to place widgets on top of each other in a z-order.                                                                                          |
-| fittedbox           | Creates a `FittedBox` widget, which scales and positions its child within itself according to the specified fit.                                                                        |
+| fittedbox           | Creates a `FittedBox` widget, which scales and positions its child within itself according to the specified fit.                                                                        |

package.json

@@ -46,6 +46,10 @@
       {
         "command": "flutter-plus.wrap-valuelistenablebuilder",
         "title": "Wrap with ValueListenableBuilder<T>"
+      },
+      {
+        "command": "flutter-plus.wrap-repaintboundary",
+        "title": "Wrap with RepaintBoundary"
       }
     ],
     "submenus": [

src/code-actions/code-action-wrap.ts

@@ -4,7 +4,6 @@ import { CodeAction, CodeActionKind, CodeActionProvider, window } from "vscode";
 import { getSelectedText } from "../utils";
 
 export class CodeActionWrap implements CodeActionProvider {
-
     public provideCodeActions(): CodeAction[] {
         const editor = window.activeTextEditor;
         if (!editor) return [];
@@ -22,6 +21,10 @@ export class CodeActionWrap implements CodeActionProvider {
                 title: "Wrap with ValueListenableBuilder<T>",
             },
             /* TODO: Convert between ListenableBuilder <--> ValueListenableBuilder */
+            {
+                command: "flutter-plus.wrap-repaintboundary",
+                title: "Wrap with RepaintBoundary",
+            }
         ].map((c) => {
             let action = new CodeAction(c.title, CodeActionKind.Refactor);
             action.command = {

src/commands/wrap-with.command.ts

@@ -16,6 +16,14 @@ const snippetValueListenableBuilder = (widget: string) => {
 )`;
 };
 
+const snippetRepaintBoundary = (widget: string) => {
+  return `RepaintBoundary(
+  child: ${widget},
+)`;
+};
+
 export const wrapWithListenableBuilder = async () => wrapWith(snippetListenableBuilder);
 
-export const wrapWithValueListenableBuilder = async () => wrapWith(snippetValueListenableBuilder);
+export const wrapWithValueListenableBuilder = async () => wrapWith(snippetValueListenableBuilder);
+
+export const wrapWithRepaintBoundary = async () => wrapWith(snippetRepaintBoundary);

src/extension.ts

@@ -8,6 +8,7 @@ import {
 import {
 	sealedStates,
 	wrapWithListenableBuilder,
+	wrapWithRepaintBoundary,
 	wrapWithValueListenableBuilder,
 } from "./commands";
 
@@ -27,6 +28,7 @@ export function activate(context: vscode.ExtensionContext) {
 		commands.registerCommand("flutter-plus.sealed-states", sealedStates),
 		commands.registerCommand("flutter-plus.wrap-listenablebuilder", wrapWithListenableBuilder),
 		commands.registerCommand("flutter-plus.wrap-valuelistenablebuilder", wrapWithValueListenableBuilder),
+		commands.registerCommand("flutter-plus.wrap-repaintboundary", wrapWithRepaintBoundary),
 
 		languages.registerCodeActionsProvider(
 			DART_MODE,