EazyFlutter - VS Code Extension for Flutter Development
EazyFlutter is a powerful VS Code extension designed to streamline Flutter development by offering quick actions, intelligent widget wrappers, and useful snippets. This extension simplifies common tasks such as wrapping widgets with Consumer<T>
, generating getter and setter methods, and converting JSON data into Dart models using json_serializable
.
Features
Commands
- JSON to Dart Conversion - Convert JSON input into a structured Dart model with
json_serializable
, automatically saving it in the model folder (You can move it to your desired directory after).
- Wrap with Consumer - A quick action is available that wraps widgets with a
Consumer
for Provider-based state management.
Snippets
- Wrap with Consumer - Insert a
Consumer<T>
block instantly using a snippet.
- Generate Getters and Setters - Quickly create getter and setter methods for multiple data types, improving code efficiency.
Installation
- Open VS Code.
- Navigate to the Extensions Marketplace (
Cmd + Shift + X
/ Ctrl + Shift + X
).
- Search for "EazyFlutter" and click Install.
- The extension is now ready for use.
How to Use
- Select a widget in your Dart file.
- Press
Cmd + .
(Mac) / Ctrl + .
(Windows).
- Select "Wrap with Consumer".
- Enter the Provider Type, and the extension automatically wraps the widget.
Example:
Before:
Text('Hello World')
After:
Consumer<AppUserManagementProvider>(
builder: (context, appUserManagementProvider, _) {
return Text('Hello World');
},
)
Using Snippets
Wrap with Consumer<T>
- Type
wrapConsumer
inside your Dart file.
- Press Tab, and it expands into:
Consumer<ProviderType>(
builder: (context, provider, _) {
return ChildWidget();
},
)
- Replace
ProviderType
with the actual provider class (e.g., AuthProvider
).
Generate Getters and Setters
- Use snippets to create getter and setter methods for multiple data types, reducing manual coding effort.
Example:
Before:
String _name;
After using snippet:
getSetString
then Enter
Result
String _name;
String get name => _name;
set name(String value) {
_name = value;
}
JSON to Dart Conversion
- Open the command palette (
Cmd + Shift + P
/ Ctrl + Shift + P
).
- Search for "EazyFlutter: JSON to Dart".
- Enter your JSON data.
- Provide a Class name for the generated model.
- The extension will:
- Generate a Dart model with
json_serializable
annotations.
- Save the file in
lib/models/
.
- Ensure proper formatting and error handling.
Example:
Input JSON:
{
"id": 1,
"name": "John Doe",
"email": "john@example.com"
}
Generated Dart Model:
import 'package:json_annotation/json_annotation.dart';
part 'user_model.g.dart';
@JsonSerializable()
class UserModel {
final int id;
final String name;
final String email;
UserModel({required this.id, required this.name, required this.email});
factory UserModel.fromJson(Map<String, dynamic> json) => _$UserModelFromJson(json);
Map<String, dynamic> toJson() => _$UserModelToJson(this);
}
Extension Settings
Currently, no additional configuration is required.
Additional Resources
Enhance your Flutter development experience with EazyFlutter – making widget wrapping, state management, and JSON handling effortless!