https://github.com/cem256/json-dynamic-widget-helper

Visual Studio Code extension designed to assist developers working with the json_dynamic_widget package for Flutter
https://github.com/cem256/json-dynamic-widget-helper

dart flutter json-dynamic-widget vscode-extension

Last synced: about 2 months ago
JSON representation

Visual Studio Code extension designed to assist developers working with the json_dynamic_widget package for Flutter

• Host: GitHub
• URL: https://github.com/cem256/json-dynamic-widget-helper
• Owner: cem256
• License: mit
• Created: 2024-10-16T18:54:27.000Z (2 months ago)
• Default Branch: master
• Last Pushed: 2024-10-21T08:56:44.000Z (2 months ago)
• Last Synced: 2024-10-22T12:00:39.596Z (2 months ago)
• Topics: dart, flutter, json-dynamic-widget, vscode-extension
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=cem256.json-dynamic-widget-helper
• Size: 1.58 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JSON Dynamic Widget Helper

## Overview

JSON Dynamic Widget Helper is a Visual Studio Code extension designed to assist developers working with the [`json_dynamic_widget`](https://pub.dev/packages/json_dynamic_widget) package for Flutter. This extension provides tools to manipulate JSON, making it easier to work with dynamic widgets in your Flutter projects.

## Demo

![JSON Dynamic Widget Helper Demo](https://raw.githubusercontent.com/cem256/json-dynamic-widget-helper/master/assets/gif/usage.gif)

## Features

- Wrap existing widgets with new parent widgets (e.g., Column, Row, Container, or custom widgets)

- Remove selected widgets from the widget tree

- Quick and easy manipulation of JSON for [`json_dynamic_widget`](https://pub.dev/packages/json_dynamic_widget)

## Usage

1. Open a JSON file containing `json_dynamic_widget` structures in VS Code.

2. Select a line that contains `"type"` key of the widget you want to modify.

3. Press `Cmd + .` (Mac) or `Ctrl + .` (Windows/Linux) to open the code actions menu.

4. Choose from the available options:

   - Wrap with Column

   - Wrap with Row

   - Wrap with Container

   - Wrap with Center

   - Wrap with custom widget...

   - Remove this widget

### Wrapping a Widget

1. Select the line that contains `"type"` key of the widget you want to wrap.

2. Open the code actions menu.

3. Choose "Wrap with..." and select the desired wrapper widget.

4. The extension will automatically wrap your selected widget with the chosen parent widget.

### Removing a Widget

1. Select the line that contains `"type"` key of the widget you want to remove.

2. Open the code actions menu.

3. Choose "Remove this widget".

4. The extension will remove the selected widget from the JSON structure.

## Contributing

Contributions are welcome! If you'd like to contribute to this project, please feel free to submit pull requests or open issues on the GitHub repository.