flutter_widget_skewer

A Dart code generator that lets you build Flutter widget trees using method chaining.
No more declarative UI β€” just chain widgets like skewered food 🍒.

⚠️ If you encounter dependency or analyzer version conflicts, please check the Troubleshooting section.


✨ Features

  • Chain any widget constructor as an extension method
  • Cleaner syntax, less boilerplate
  • Supports both Widget and List<Widget>
  • Works with most Flutter SDK widgets
  • Type-safe, since everything is generated from Flutter SDK

πŸš€ Getting Started

Add to your pubspec.yaml:

dependencies:
  flutter_widget_skewer:

Run build runner:

flutter pub run build_runner build

or

dart run build_runner build

Import generated extensions:

import 'package:YOUR_PACKAGE/gen/flutter_widget_skewer.g.dart'';

πŸ›  Usage

With flutter_widget_skewer, you can write:

    Text('Hello Widget')
        .container(
            padding: const EdgeInsets.all(8),
            color: Colors.grey,
            alignment: Alignment.center)
        .opacity(opacity: 0.5)
        .rotatedBox(quarterTurns: 1)
        .card(margin: EdgeInsets.all(16), clipBehavior: Clip.antiAlias)
        .inkWell(onTap: () {}, focusNode: FocusNode())
        .ignorePointer(ignoring: false)
        .hero(tag: UniqueKey());

Instead of writing:

    Hero(
      tag: UniqueKey(),
      child: IgnorePointer(
        ignoring: false,
        child: InkWell(
          onTap: () {},
          focusNode: FocusNode(),
          child: Card(
            margin: EdgeInsets.all(16),
            clipBehavior: Clip.antiAlias,
            child: RotatedBox(
              quarterTurns: 1,
              child: Opacity(
                opacity: 0.5,
                child: Container(
                  padding: const EdgeInsets.all(8),
                  color: Colors.grey,
                  alignment: Alignment.center,
                  child: Text('Hello Widget'),
                ),
              ),
            ),
          ),
        ),
      ),
    );

πŸ†š Comparison

Cleaner, flatter, easier to read.
No more bracket hell πŸŽ‰


⛓️ Chaining with List<Widget>

flutter_widget_skewer not only supports chaining on a single Widget,
but also on a List<Widget> β€” useful for constructors that take multiple children.

For example:

final items = [
  Text('Item 1'),
  Text('Item 2'),
  Text('Item 3'),
];

/// Instead of:
Column(
  children: items,
);

/// You can chain directly:
items.column();

This also works with widgets that take slivers:

final slivers = [
  SliverAppBar(title: Text('Hello')),
  SliverList(delegate: SliverChildListDelegate([...]))
];

slivers.customScrollView();

πŸ‘‰ This makes it easy to go from a list of widgets straight into layout widgets without extra boilerplate.


πŸ” How Flutter version is detected

The generator determines the Flutter SDK version in the following priority order:

  1. fvm – if available, always preferred

  2. .dart_tool/package_config.json

  3. Platform.environment'FLUTTER_ROOT'

  4. System path (where flutter on Windows / which flutter on macOS/Linux)

This ensures compatibility across different environments and Flutter setups.


⚠️ Limitations

Currently, the following widgets are not generated by flutter_widget_skewer:

  • CupertinoTextSelectionToolbar
  • TextSelectionToolbar
  • CupertinoScrollbar

These widgets have unique constructor, which make them technically difficult to support with the current generator.

(They are not commonly used in widget composition, but if you need them, feel free to open an issue or contribute a PR!)


πŸ›  Troubleshooting

If you encounter issues (e.g., analyzer conflicts or build_runner errors), here are some possible solutions:

  1. Match your Flutter version in the example project

    • This package focuses on the Flutter version of your project.

    • If the code generation fails, open the example/ folder of widget_skewer, and set its Flutter SDK version to match your own project.

    • Run:

      dart run build_runner build
      
    • Then copy the generated file gen/flutter_widget_skewer.g.dart into your project and use it directly.

  2. Alternative: create a new Flutter project

    • You may create a minimal Flutter project with your exact Flutter SDK version.

    • Add flutter_widget_skewer to its pubspec.yaml, run code generation, and copy the generated file (gen/flutter_widget_skewer.g.dart) into your actual project.


🀝 Contributing

Issues and PRs are welcome!
If you find unsupported widgets or have ideas for improvement, feel free to contribute.


πŸ“„ License

MIT

Libraries

flutter_widget_skewer
Support for doing something awesome.