skills.rest
hunmer
hunmerCOMMUNITY
Explore all skills by this author →
GitHub

create-common-widget-from-renderer

Convert a plugin's dataRenderer UI into a reusable public widget.

70|12|Updated Apr 1, 2025
Search Tags:#UI#migration#Flutter#plugin#widget#dataRenderer
One-click install
npx skills add https://github.com/hunmer/Memento --skill create-common-widget-from-renderer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-common-widget-from-renderer
Source: https://github.com/hunmer/Memento/tree/main/.claude/skills/create-common-widget-from-renderer
Command: npx skills add https://github.com/hunmer/Memento --skill create-common-widget-from-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill encapsulates the dataRenderer UI logic from a plugin and converts it into a reusable public widget, enabling cross-plugin reuse and reducing duplication.

Core Features & Use Cases

  • Extract dataRenderer UI into a standalone component file.
  • Register the new component in common_widgets.dart for discovery and reuse.
  • Provide a data provider function (_provideCommonWidgets) to supply up-to-date data to the widget.
  • Remove the old built-in renderer to standardize UI across plugins.
  • Use case: A plugin author wants to make a custom UI available to other plugins without duplicating code.

Quick Start

  • Create a new widget file under lib/screens/widgets_gallery/common_widgets/widgets/ named after the widget.
  • Register the widget in lib/screens/widgets_gallery/common_widgets/common_widgets.dart with a corresponding CommonWidgetId and metadata.
  • Implement fromProps factory constructor for the widget.
  • Update the plugin's home_widgets.dart to remove dataRenderer and use commonWidgetsProvider.
  • Test rendering in both medium and large sizes and ensure navigation still works.

Frequently Asked Questions about create-common-widget-from-renderer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a Flutter plugin UI reusable across other plugins?▼

You convert the plugin's dataRenderer UI into a reusable widget by creating a standalone component file, registering it in common_widgets.dart, and providing data via _provideCommonWidgets to eliminate duplicate code.

What is the process for migrating a dataRenderer to a common widget?▼

Migrating a dataRenderer involves creating a new widget file, implementing a fromProps factory, registering it with a CommonWidgetId, and removing the old built-in rendering path from the plugin.

How do I register a reusable widget in common_widgets.dart?▼

You register a reusable widget in common_widgets.dart by adding a corresponding CommonWidgetId and metadata, then implementing a fromProps factory constructor to handle widget instantiation.

Can I share dashboard and settings panel UI patterns across multiple plugins?▼

Yes, you can share dashboard and settings panel UI patterns by converting their dataRenderer UI logic into public widgets, allowing multiple plugins to discover and reuse the same components.

What do I need to test after converting a dataRenderer to a common widget?▼

After converting a dataRenderer, you need to test rendering in both medium and large sizes and ensure that navigation still works correctly within the plugin's updated home_widgets.dart configuration.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
windyskywindysky

moai-platform-firebase-auth

Integrate Firebase Authentication across Web, iOS, Android, and Flutter projects.

Community
Advanced
X-School-AcademyX-School-Academy
19

dart-get-selected-widget

Retrieve the currently selected widget from an active Flutter application via the Dart tooling daemon.

Official
Basic
morodomimorodomi
8

flutter-quality

Run dart analyze, dart format, and flutter test on Flutter projects.

Community
Advanced