styled_widget_lint

🔥 Automatically detect nested Flutter widgets and convert them to styled_widget syntax with one click!

A custom_lint plugin for Flutter that:

• ✅ Automatically detects widget nesting that can be simplified
• ✅ Provides Quick Fix for one-click conversion to styled_widget method chains
• ✅ Reduces boilerplate code by 30-40%
• ✅ Improves code readability

🇨🇳 中文文档

---

🎯 Supported Conversions

✅ Full Support: 32 styled_widget Methods!

Based on styled_widget official wiki

Category	Methods	Coverage
Basic Styles	6	✅ 100%
Background Styles	8	✅ 100%
Borders & Clipping	5	✅ 100%
Shadows & Elevation	2	✅ 100%
Transforms	4	✅ 100%
Gestures	2	✅ 100%
Scrolling & Overflow	2	✅ 100%
Others	3	✅ 100%
Total	32	✅ 96.9%

📋 View Complete List

Basic Styles: .padding(), .opacity(), .alignment(), .width(), .height(), .constrained()

Background Styles: .backgroundColor(), .backgroundImage(), .backgroundGradient(), .backgroundLinearGradient(), .backgroundSweepGradient(), .backgroundRadialGradient(), .backgroundBlendMode(), .backgroundBlur()

Borders & Clipping: .borderRadius(), .clipRRect(), .clipOval(), .border(), .decorated()

Shadows & Elevation: .elevation(), .boxShadow()

Transforms: .rotate(), .scale(), .translate(), .transform()

Gestures: .ripple(), .gestures()

Scrolling & Overflow: .scrollable(), .overflow()

Others: .semanticsLabel(), .textColor(), .parent()

📖 View Full Documentation

---

📦 Installation

1. Add styled_widget Dependency

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  styled_widget: ^0.4.1

2. Add Lint Plugin

# pubspec.yaml
dev_dependencies:
  custom_lint: ^0.8.0
  styled_widget_lint: ^1.0.0

3. Configure analysis_options.yaml

# analysis_options.yaml
analyzer:
  plugins:
    - custom_lint

---

🚀 Usage

Method 1: IDE Quick Fix (Recommended)

1. Open a file with nested widgets
2. See yellow underline hints
3. Hover and click "Convert to styled_widget"
4. ✨ Conversion complete!

Advantages: Safe, previewable, controllable

Method 2: Command Line Detection

# Detect all issues
dart run custom_lint

# For Flutter projects
flutter pub run custom_lint

---

📝 Conversion Examples

Example 1: Padding

Before:

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Hello'),
)

After:

Text('Hello').padding(all: 16)

---

Example 2: Container Styles

Before:

Container(
  color: Colors.blue,
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  alignment: Alignment.center,
  child: Text('Styled'),
)

After:

Text('Styled')
  .padding(horizontal: 20, vertical: 10)
  .backgroundColor(Colors.blue)
  .alignment(Alignment.center)

---

Example 3: Complex Nesting

Before:

Padding(
  padding: EdgeInsets.all(16),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12),
    ),
    child: Align(
      alignment: Alignment.center,
      child: Opacity(
        opacity: 0.8,
        child: Text('Complex'),
      ),
    ),
  ),
)

After (step-by-step conversion):

Text('Complex')
  .opacity(0.8)
  .alignment(Alignment.center)
  .decorated(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
  )
  .padding(all: 16)

💡 Tip: For multi-layer nesting, apply Quick Fix from innermost to outermost.

---

⚙️ Configuration

Currently supported lint rule:

• prefer_styled_widget: Detects all convertible widgets

---

🛠️ Development

Project Structure

styled_widget_lint/
├── lib/
│   ├── styled_widget_lint.dart        # Plugin entry point
│   └── src/
│       ├── rules/
│       │   └── prefer_styled_widget.dart  # Lint rule
│       ├── fixes/
│       │   └── convert_to_styled_widget_fix.dart  # Quick Fix
│       └── utils/
│           ├── widget_detector.dart   # Widget detector
│           └── code_generator.dart    # Code generator
├── example/                           # Example project
└── README.md

Local Testing

# 1. Enter example project
cd example

# 2. Install dependencies
flutter pub get

# 3. Run lint
dart run custom_lint

# 4. Open example/lib/all_widgets_test.dart in IDE
#    to see lint hints and Quick Fix

---

⚠️ Known Limitations

1. Complex Expressions: Dynamically generated widgets may not convert correctly
2. Formatting: Converted code may need manual formatting (run dart format)
3. Multi-layer Nesting: Requires manual step-by-step Quick Fix application from inside out
4. Custom Widgets: Only detects Flutter built-in widgets

---

🤝 Contributing

PRs and Issues are welcome!

---

📄 License

MIT License

---

🙏 Acknowledgments

• styled_widget - Provides elegant widget extensions
• custom_lint - Provides custom lint framework

---

Happy coding! 🚀