Flutter Widget Wrapper

A Visual Studio Code extension that enhances productivity for Flutter developers by providing quick and easy ways to wrap Flutter widgets with commonly used widgets like Expanded, Stack, Positioned, and many more.

Features

• 🔄 Wrap selected Flutter widgets with 25+ common widgets with a single command
• ✨ Smart widget selection with bracket matching
• 🛠️ Create and manage custom widget wrappers for your project's specific needs
• 🧩 Support for state management libraries (MobX and GetX)
• ⚡ Keyboard shortcuts for fast access
• 🖱️ Context menu integration for quick access
• 💡 Quick Pick menu with a comprehensive list of widgets to choose from
• 🔧 Configurable quick fix menu to show only your most-used widgets

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Flutter Widget Wrapper"
4. Click Install

Usage

Selecting a Widget

1. Place your cursor at any position in a Flutter widget
2. Press Alt+W (Windows/Linux) or Option+W (Mac)
3. The extension will smartly select the entire widget between parentheses

Wrapping a Widget

Method 1: Using Quick Pick Menu

1. Select a widget or place your cursor inside a widget
2. Press Shift+Alt+W (Windows/Linux) or Shift+Option+W (Mac)
3. Choose from the list of available widgets to wrap with

Method 2: Using Context Menu

1. Select a widget
2. Right-click and choose from the various "Wrap with..." options

Method 3: Using Command Palette

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Flutter wrapper" to see all available wrap commands

Available Widget Wrappers

• Align
• ClipRRect
• ColoredBox
• ConstrainedBox
• DecoratedBox
• Expanded
• Flexible
• Form
• GestureDetector
• Hero
• InkWell
• IntrinsicHeight
• IntrinsicWidth
• LayoutBuilder
• LayoutBuilder with SingleChildScrollView
• Observer (MobX)
• Obx (GetX)
• Positioned
• SafeArea
• SingleChildScrollView
• Stack
• ValueListenableBuilder
• Visibility
• WillPopScope
• Consumer
• CustomScrollView with SliverList
• SliverList
• Offstage
• SliverToBoxAdapter
• SliverPadding
• SliverGrid
• SliverAppBar And many more...

Custom Widget Templates

You can create your own custom widget templates to reuse frequently used widget patterns.

Adding a Custom Widget

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Add Custom Widget" and select the command
3. Enter a name for your custom widget
4. Choose whether to create a simple widget or edit directly in the file
5. If creating a simple widget, enter the template code using ${widget} as a placeholder for where your selected widget should go

Editing Custom Widgets

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Edit Custom Widgets" and select the command
3. Edit the JSON file that opens in the editor

Customizing Quick Fix Menu

The extension allows you to customize which widgets appear in the Quick Fix menu (the lightbulb that appears when you select code):

Configuring Quick Fix Widgets

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Flutter Widget Wrapper: Configure Quick Fix Menu Widgets" and select the command
3. In the multi-select menu that appears, select the widgets you want to include in the quick fix menu
4. Press Enter to save your selection

You can choose from all available built-in widgets as well as any custom widgets you've created. This allows you to streamline the quick fix menu to show only the widgets you use most frequently.

Default Quick Fix Widgets

By default, the following widgets are included in the quick fix menu:

• Stack
• Expanded
• Flexible
• ColoredBox
• DecoratedBox
• Visibility
• Positioned
• CircleAvatar
• WillPopScope

Configuration

The extension supports configuration through VS Code settings:

[
    {
      "name": "MyCustomContainer",
      "template": "Container(\n  color: Colors.blue,\n  child: ${widget},\n)",
      "description": "Wraps with a blue Container"
    },
    {
      "name": "MyCustomExpanded",
      "template": "Expanded(\n  child: ${widget},\n)",
      "description": "Wraps with an Expanded widget"
    }
    // Add more custom widgets here
  ]

Or

[
    {
      "name": "MyCustomContainer",
      "template": [
        "Container(",
        "  color: Colors.blue,",
        "  child: ${widget},",
        ")"
      ],
      "description": "Wraps with a blue Container"
    },
    {
      "name": "MyCustomExpanded",
      "template": [
        "Expanded(",
        "  child: ${widget},",
        ")"
      ],
      "description": "Wraps with an Expanded widget"
    }
    // Add more custom widgets here
  ]

Keyboard Shortcuts

License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by Taha Darwish