sdd-full 4.6.2 → 4.8.1

package/skills/flutter/skills/flutter-add-widget-test/SKILL.md

@@ -0,0 +1,156 @@
+【claude code调用标识：flutter-add-widget-test】【trae调用标识：flutter-add-widget-test+Flutter开发】【流程场景：1.完整3阶段SDD流程、3.小型功能迭代、4.Bug处理】
+
+---
+name: flutter-add-widget-test
+description: Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 21:15:41 GMT
+---
+# Writing Flutter Widget Tests
+
+## Contents
+- [Setup & Configuration](#setup--configuration)
+- [Core Components](#core-components)
+- [Workflow: Implementing a Widget Test](#workflow-implementing-a-widget-test)
+- [Interaction & State Management](#interaction--state-management)
+- [Examples](#examples)
+
+## Setup & Configuration
+
+Ensure the testing environment is properly configured before authoring widget tests.
+
+1. Add the `flutter_test` dependency to the `dev_dependencies` section of `pubspec.yaml`.
+2. Place all test files in the `test/` directory at the root of the project.
+3. Suffix all test file names with `_test.dart` (e.g., `widget_test.dart`).
+
+## Core Components
+
+Utilize the following `flutter_test` components to interact with and validate the widget tree:
+
+*   **`WidgetTester`**: The primary interface for building and interacting with widgets in the test environment. Provided automatically by the `testWidgets()` function.
+*   **`Finder`**: Locates widgets in the test environment (e.g., `find.text('Submit')`, `find.byType(TextField)`, `find.byKey(Key('submit_btn'))`).
+*   **`Matcher`**: Verifies the presence or state of widgets located by a `Finder` (e.g., `findsOneWidget`, `findsNothing`, `findsNWidgets(2)`, `matchesGoldenFile`).
+
+## Workflow: Implementing a Widget Test
+
+Copy the following checklist to track progress when implementing a new widget test.
+
+### Task Progress
+- [ ] **Step 1: Define the test.** Use `testWidgets('description', (WidgetTester tester) async { ... })`.
+- [ ] **Step 2: Build the widget.** Call `await tester.pumpWidget(MyWidget())` to render the UI. Wrap the widget in a `MaterialApp` or `Directionality` widget if it requires inherited directional or theme data.
+- [ ] **Step 3: Locate elements.** Instantiate `Finder` objects for the target widgets.
+- [ ] **Step 4: Verify initial state.** Use `expect(finder, matcher)` to validate the initial render.
+- [ ] **Step 5: Simulate interactions.** Execute gestures or inputs (e.g., `await tester.tap(buttonFinder)`).
+- [ ] **Step 6: Rebuild the tree.** Call `await tester.pump()` or `await tester.pumpAndSettle()` to process state changes.
+- [ ] **Step 7: Verify updated state.** Use `expect()` to validate the UI after the interaction.
+- [ ] **Step 8: Run and validate.** Execute `flutter test test/your_test_file_test.dart`.
+- [ ] **Step 9: Feedback Loop.** Review test output -> identify failing matchers -> adjust widget logic or test assertions -> re-run until passing.
+
+## Interaction & State Management
+
+Apply the following conditional logic based on the type of interaction or state change being tested:
+
+*   **If testing static rendering:** Call `await tester.pumpWidget()` once, then immediately run `expect()` assertions.
+*   **If testing standard state changes (e.g., button taps):** 
+    1. Call `await tester.tap(finder)`.
+    2. Call `await tester.pump()` to trigger a single frame rebuild.
+*   **If testing animations, transitions, or asynchronous UI updates:** 
+    1. Trigger the action (e.g., `await tester.drag(finder, Offset(500, 0))`).
+    2. Call `await tester.pumpAndSettle()` to repeatedly pump frames until no more frames are scheduled (animation completes).
+*   **If testing text input:** Call `await tester.enterText(textFieldFinder, 'Input string')`.
+*   **If testing items in a dynamic or long list:** Call `await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder)` to ensure the target widget is rendered before interacting with it.
+
+## Examples
+
+### High-Fidelity Widget Test Implementation
+
+**Target Widget (`lib/todo_list.dart`):**
+```dart
+import 'package:flutter/material.dart';
+
+class TodoList extends StatefulWidget {
+  const TodoList({super.key});
+
+  @override
+  State<TodoList> createState() => _TodoListState();
+}
+
+class _TodoListState extends State<TodoList> {
+  final todos = <String>[];
+  final controller = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Column(
+          children: [
+            TextField(controller: controller),
+            Expanded(
+              child: ListView.builder(
+                itemCount: todos.length,
+                itemBuilder: (context, index) {
+                  final todo = todos[index];
+                  return Dismissible(
+                    key: Key('$todo$index'),
+                    onDismissed: (_) => setState(() => todos.removeAt(index)),
+                    child: ListTile(title: Text(todo)),
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+        floatingActionButton: FloatingActionButton(
+          onPressed: () {
+            setState(() {
+              todos.add(controller.text);
+              controller.clear();
+            });
+          },
+          child: const Icon(Icons.add),
+        ),
+      ),
+    );
+  }
+}
+```
+
+**Test Implementation (`test/todo_list_test.dart`):**
+```dart
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:my_app/todo_list.dart';
+
+void main() {
+  testWidgets('Add and remove a todo item', (WidgetTester tester) async {
+    // 1. Build the widget
+    await tester.pumpWidget(const TodoList());
+
+    // 2. Verify initial state
+    expect(find.byType(ListTile), findsNothing);
+
+    // 3. Enter text into the TextField
+    await tester.enterText(find.byType(TextField), 'Buy groceries');
+
+    // 4. Tap the add button
+    await tester.tap(find.byType(FloatingActionButton));
+
+    // 5. Rebuild the widget to reflect the new state
+    await tester.pump();
+
+    // 6. Verify the item was added
+    expect(find.text('Buy groceries'), findsOneWidget);
+
+    // 7. Swipe the item to dismiss it
+    await tester.drag(find.byType(Dismissible), const Offset(500, 0));
+
+    // 8. Build the widget until the dismiss animation ends
+    await tester.pumpAndSettle();
+
+    // 9. Verify the item was removed
+    expect(find.text('Buy groceries'), findsNothing);
+  });
+}
+```

package/skills/flutter/skills/flutter-apply-architecture-best-practices/SKILL.md

@@ -0,0 +1,164 @@
+【claude code调用标识：flutter-apply-architecture-best-practices】【trae调用标识：flutter-apply-architecture-best-practices+Flutter开发】【流程场景：1.完整3阶段SDD流程、2.从零开始新项目】
+
+---
+name: flutter-apply-architecture-best-practices
+description: Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 20:11:20 GMT
+---
+# Architecting Flutter Applications
+
+## Contents
+- [Architectural Layers](#architectural-layers)
+- [Project Structure](#project-structure)
+- [Workflow: Implementing a New Feature](#workflow-implementing-a-new-feature)
+- [Examples](#examples)
+
+## Architectural Layers
+
+Enforce strict Separation of Concerns by dividing the application into distinct layers. Never mix UI rendering with business logic or data fetching.
+
+### UI Layer (Presentation)
+Implement the MVVM (Model-View-ViewModel) pattern to manage UI state and logic.
+*   **Views:** Write reusable, lean widgets. Restrict logic in Views to UI-specific operations (e.g., animations, layout constraints, simple routing). Pass all required data from the ViewModel.
+*   **ViewModels:** Manage UI state and handle user interactions. Extend `ChangeNotifier` (or use `Listenable`) to expose state. Expose immutable state snapshots to the View. Inject Repositories into ViewModels via the constructor.
+
+### Data Layer
+Implement the Repository pattern to isolate data access logic and create a single source of truth.
+*   **Services:** Create stateless classes to wrap external APIs (HTTP clients, local databases, platform plugins). Return raw API models or `Result` wrappers.
+*   **Repositories:** Consume one or more Services. Transform raw API models into clean Domain Models. Handle caching, offline synchronization, and retry logic. Expose Domain Models to ViewModels.
+
+### Logic Layer (Domain - Optional)
+*   **Use Cases:** Implement this layer only if the application contains complex business logic that clutters the ViewModel, or if logic must be reused across multiple ViewModels. Extract this logic into dedicated Use Case (interactor) classes that sit between ViewModels and Repositories.
+
+## Project Structure
+
+Organize the codebase using a hybrid approach: group UI components by feature, and group Data/Domain components by type.
+
+```text
+lib/
+├── data/
+│   ├── models/         # API models
+│   ├── repositories/   # Repository implementations
+│   └── services/       # API clients, local storage wrappers
+├── domain/
+│   ├── models/         # Clean domain models
+│   └── use_cases/      # Optional business logic classes
+└── ui/
+    ├── core/           # Shared widgets, themes, typography
+    └── features/
+        └── [feature_name]/
+            ├── view_models/
+            └── views/
+```
+
+## Workflow: Implementing a New Feature
+
+Follow this sequential workflow when adding a new feature to the application. Copy the checklist to track progress.
+
+### Task Progress
+- [ ] **Step 1: Define Domain Models.** Create immutable data classes for the feature using `freezed` or `built_value`.
+- [ ] **Step 2: Implement Services.** Create or update Service classes to handle external API communication.
+- [ ] **Step 3: Implement Repositories.** Create the Repository to consume Services and return Domain Models.
+- [ ] **Step 4: Apply Conditional Logic (Domain Layer).**
+  - *If the feature requires complex data transformation or cross-repository logic:* Create a Use Case class.
+  - *If the feature is a simple CRUD operation:* Skip to Step 5.
+- [ ] **Step 5: Implement the ViewModel.** Create the ViewModel extending `ChangeNotifier`. Inject required Repositories/Use Cases. Expose immutable state and command methods.
+- [ ] **Step 6: Implement the View.** Create the UI widget. Use `ListenableBuilder` or `AnimatedBuilder` to listen to ViewModel changes.
+- [ ] **Step 7: Inject Dependencies.** Register the new Service, Repository, and ViewModel in the dependency injection container (e.g., `provider` or `get_it`).
+- [ ] **Step 8: Run Validator.** Execute unit tests for the ViewModel and Repository.
+  - *Feedback Loop:* Run tests -> Review failures -> Fix logic -> Re-run until passing.
+
+## Examples
+
+### Data Layer: Service and Repository
+
+```dart
+// 1. Service (Raw API interaction)
+class ApiClient {
+  Future<UserApiModel> fetchUser(String id) async {
+    // HTTP GET implementation...
+  }
+}
+
+// 2. Repository (Single source of truth, returns Domain Model)
+class UserRepository {
+  UserRepository({required ApiClient apiClient}) : _apiClient = apiClient;
+  
+  final ApiClient _apiClient;
+  User? _cachedUser;
+
+  Future<User> getUser(String id) async {
+    if (_cachedUser != null) return _cachedUser!;
+    
+    final apiModel = await _apiClient.fetchUser(id);
+    _cachedUser = User(id: apiModel.id, name: apiModel.fullName); // Transform to Domain Model
+    return _cachedUser!;
+  }
+}
+```
+
+### UI Layer: ViewModel and View
+
+```dart
+// 3. ViewModel (State management and presentation logic)
+class ProfileViewModel extends ChangeNotifier {
+  ProfileViewModel({required UserRepository userRepository}) 
+      : _userRepository = userRepository;
+
+  final UserRepository _userRepository;
+
+  User? _user;
+  User? get user => _user;
+
+  bool _isLoading = false;
+  bool get isLoading => _isLoading;
+
+  Future<void> loadProfile(String id) async {
+    _isLoading = true;
+    notifyListeners();
+
+    try {
+      _user = await _userRepository.getUser(id);
+    } finally {
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+}
+
+// 4. View (Dumb UI component)
+class ProfileView extends StatelessWidget {
+  const ProfileView({super.key, required this.viewModel});
+
+  final ProfileViewModel viewModel;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListenableBuilder(
+      listenable: viewModel,
+      builder: (context, _) {
+        if (viewModel.isLoading) {
+          return const Center(child: CircularProgressIndicator());
+        }
+        
+        final user = viewModel.user;
+        if (user == null) {
+          return const Center(child: Text('User not found'));
+        }
+
+        return Column(
+          children: [
+            Text(user.name),
+            ElevatedButton(
+              onPressed: () => viewModel.loadProfile(user.id),
+              child: const Text('Refresh'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+```

package/skills/flutter/skills/flutter-build-responsive-layout/SKILL.md

@@ -0,0 +1,141 @@
+【claude code调用标识：flutter-build-responsive-layout】【trae调用标识：flutter-build-responsive-layout+Flutter开发】【流程场景：1.完整3阶段SDD流程、3.小型功能迭代】
+
+---
+name: flutter-build-responsive-layout
+description: Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 20:17:40 GMT
+---
+# Implementing Adaptive Layouts
+
+## Contents
+- [Space Measurement Guidelines](#space-measurement-guidelines)
+- [Widget Sizing and Constraints](#widget-sizing-and-constraints)
+- [Device and Orientation Behaviors](#device-and-orientation-behaviors)
+- [Workflow: Constructing an Adaptive Layout](#workflow-constructing-an-adaptive-layout)
+- [Workflow: Optimizing for Large Screens](#workflow-optimizing-for-large-screens)
+- [Examples](#examples)
+
+## Space Measurement Guidelines
+Determine the available space accurately to ensure layouts adapt to the app window, not just the physical device.
+
+*   **Use `MediaQuery.sizeOf(context)`** to get the size of the entire app window.
+*   **Use `LayoutBuilder`** to make layout decisions based on the parent widget's allocated space. Evaluate `constraints.maxWidth` to determine the appropriate widget tree to return.
+*   **Do not use `MediaQuery.orientationOf` or `OrientationBuilder`** near the top of the widget tree to switch layouts. Device orientation does not accurately reflect the available app window space.
+*   **Do not check for hardware types** (e.g., "phone" vs. "tablet"). Flutter apps run in resizable windows, multi-window modes, and picture-in-picture. Base all layout decisions strictly on available window space.
+
+## Widget Sizing and Constraints
+Understand and apply Flutter's core layout rule: **Constraints go down. Sizes go up. Parent sets position.**
+
+*   **Distribute Space:** Use `Expanded` and `Flexible` within `Row`, `Column`, or `Flex` widgets.
+    *   Use `Expanded` to force a child to fill all remaining available space (equivalent to `Flexible` with `fit: FlexFit.tight` and a `flex` factor of 1.0).
+    *   Use `Flexible` to allow a child to size itself up to a specific limit while still expanding/contracting. Use the `flex` factor to define the ratio of space consumption among siblings.
+*   **Constrain Width:** Prevent widgets from consuming all horizontal space on large screens. Wrap widgets like `GridView` or `ListView` in a `ConstrainedBox` or `Container` and define a `maxWidth` in the `BoxConstraints`.
+*   **Lazy Rendering:** Always use `ListView.builder` or `GridView.builder` when rendering lists with an unknown or large number of items.
+
+## Device and Orientation Behaviors
+Ensure the app behaves correctly across all device form factors and input methods.
+
+*   **Do not lock screen orientation.** Locking orientation causes severe layout issues on foldable devices, often resulting in letterboxing (the app centered with black borders). Android large format tiers require both portrait and landscape support.
+*   **Fallback for Locked Orientation:** If business requirements strictly mandate a locked orientation, use the `Display API` to retrieve physical screen dimensions instead of `MediaQuery`. `MediaQuery` fails to receive the larger window size in compatibility modes.
+*   **Support Multiple Inputs:** Implement support for basic mice, trackpads, and keyboard shortcuts. Ensure touch targets are appropriately sized and keyboard navigation is accessible.
+
+## Workflow: Constructing an Adaptive Layout
+
+Follow this workflow to implement a layout that adapts to the available `BoxConstraints`.
+
+**Task Progress:**
+- [ ] Identify the target widget that requires adaptive behavior.
+- [ ] Wrap the widget tree in a `LayoutBuilder`.
+- [ ] Extract the `constraints.maxWidth` from the builder callback.
+- [ ] Define an adaptive breakpoint (e.g., `largeScreenMinWidth = 600`).
+- [ ] **If `maxWidth > largeScreenMinWidth`:** Return a large-screen layout (e.g., a `Row` placing a navigation sidebar and content area side-by-side).
+- [ ] **If `maxWidth <= largeScreenMinWidth`:** Return a small-screen layout (e.g., a `Column` or standard navigation-style approach).
+- [ ] Run validator -> resize the application window -> review layout transitions -> fix overflow errors.
+
+## Workflow: Optimizing for Large Screens
+
+Follow this workflow to prevent UI elements from stretching unnaturally on large displays.
+
+**Task Progress:**
+- [ ] Identify full-width components (e.g., `ListView`, text blocks, forms).
+- [ ] **If optimizing a list:** Convert `ListView.builder` to `GridView.builder` using `SliverGridDelegateWithMaxCrossAxisExtent` to automatically adjust column counts based on window size.
+- [ ] **If optimizing a form or text block:** Wrap the component in a `ConstrainedBox`.
+- [ ] Apply `BoxConstraints(maxWidth: [optimal_width])` to the `ConstrainedBox`.
+- [ ] Wrap the `ConstrainedBox` in a `Center` widget to keep the constrained content centered on large screens.
+- [ ] Run validator -> test on desktop/tablet target -> review horizontal stretching -> adjust `maxWidth` or grid extents.
+
+## Examples
+
+### Adaptive Layout using LayoutBuilder
+Demonstrates switching between a mobile and desktop layout based on available width.
+
+```dart
+import 'package:flutter/material.dart';
+
+const double largeScreenMinWidth = 600.0;
+
+class AdaptiveLayout extends StatelessWidget {
+  const AdaptiveLayout({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        if (constraints.maxWidth > largeScreenMinWidth) {
+          return _buildLargeScreenLayout();
+        } else {
+          return _buildSmallScreenLayout();
+        }
+      },
+    );
+  }
+
+  Widget _buildLargeScreenLayout() {
+    return Row(
+      children: [
+        const SizedBox(width: 250, child: Placeholder(color: Colors.blue)),
+        const VerticalDivider(width: 1),
+        Expanded(child: const Placeholder(color: Colors.green)),
+      ],
+    );
+  }
+
+  Widget _buildSmallScreenLayout() {
+    return const Placeholder(color: Colors.green);
+  }
+}
+```
+
+### Constraining Width on Large Screens
+Demonstrates preventing a widget from consuming all horizontal space.
+
+```dart
+import 'package:flutter/material.dart';
+
+class ConstrainedContent extends StatelessWidget {
+  const ConstrainedContent({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(
+            maxWidth: 800.0, // Maximum width for readability
+          ),
+          child: ListView.builder(
+            itemCount: 50,
+            itemBuilder: (context, index) {
+              return ListTile(
+                title: Text('Item $index'),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}
+```

package/skills/flutter/skills/flutter-fix-layout-issues/SKILL.md

@@ -0,0 +1,132 @@
+【claude code调用标识：flutter-fix-layout-issues】【trae调用标识：flutter-fix-layout-issues+Flutter开发】【流程场景：4.Bug处理】
+
+---
+name: flutter-fix-layout-issues
+description: Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical viewport was given unbounded height", or similar layout issues.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 19:45:59 GMT
+---
+# Resolving Flutter Layout Errors
+
+## Contents
+- [Constraint Violation Diagnostics](#constraint-violation-diagnostics)
+- [Layout Error Resolution Workflow](#layout-error-resolution-workflow)
+- [Examples](#examples)
+
+## Constraint Violation Diagnostics
+
+Flutter layout operates on a strict rule: **Constraints go down. Sizes go up. Parent sets position.** Layout errors occur when this negotiation fails, typically due to unbounded constraints or unconstrained children. 
+
+Diagnose layout failures using the following error signatures:
+
+*   **"Vertical viewport was given unbounded height"**: Triggered when a scrollable widget (`ListView`, `GridView`) is placed inside an unconstrained vertical parent (`Column`). The parent provides infinite height, and the child attempts to expand infinitely.
+*   **"An InputDecorator...cannot have an unbounded width"**: Triggered when a `TextField` or `TextFormField` is placed inside an unconstrained horizontal parent (`Row`). The text field attempts to determine its width based on infinite available space.
+*   **"RenderFlex overflowed"**: Triggered when a child of a `Row` or `Column` requests a size larger than the parent's allocated constraints. Visually indicated by yellow and black warning stripes.
+*   **"Incorrect use of ParentData widget"**: Triggered when a `ParentDataWidget` is not a direct descendant of its required ancestor. (e.g., `Expanded` outside a `Flex`, `Positioned` outside a `Stack`).
+*   **"RenderBox was not laid out"**: A cascading side-effect error. Ignore this and look further up the stack trace for the primary constraint violation (usually an unbounded height/width error).
+
+## Layout Error Resolution Workflow
+
+Copy and use this checklist to systematically resolve layout constraint violations.
+
+### Task Progress
+- [ ] Run the application in debug mode to capture the exact layout exception in the console.
+- [ ] Identify the primary error message (ignore cascading "RenderBox was not laid out" errors).
+- [ ] Apply the conditional fix based on the specific error type:
+  - **If "Vertical viewport was given unbounded height"**: Wrap the scrollable child (`ListView`, `GridView`) in an `Expanded` widget to consume remaining space, or wrap it in a `SizedBox` to provide an absolute height constraint.
+  - **If "An InputDecorator...cannot have an unbounded width"**: Wrap the `TextField` or `TextFormField` in an `Expanded` or `Flexible` widget.
+  - **If "RenderFlex overflowed"**: Constrain the overflowing child by wrapping it in an `Expanded` widget (to force it to fit) or a `Flexible` widget (to allow it to be smaller than the allocated space).
+  - **If "Incorrect use of ParentData widget"**: Move the `ParentDataWidget` to be a direct child of its required parent. Ensure `Expanded`/`Flexible` are direct children of `Row`/`Column`/`Flex`. Ensure `Positioned` is a direct child of `Stack`.
+- [ ] Execute Flutter hot reload.
+- [ ] Run validator -> review errors -> fix: Inspect the UI to verify the red/grey error screen or yellow/black overflow stripes are resolved. If new layout errors appear, repeat the workflow.
+
+## Examples
+
+### Fixing Unbounded Height (ListView in Column)
+
+**Input (Error State):**
+```dart
+// Throws "Vertical viewport was given unbounded height"
+Column(
+  children: <Widget>[
+    const Text('Header'),
+    ListView(
+      children: const <Widget>[
+        ListTile(title: Text('Item 1')),
+        ListTile(title: Text('Item 2')),
+      ],
+    ),
+  ],
+)
+```
+
+**Output (Resolved State):**
+```dart
+// Wrap ListView in Expanded to constrain its height to the remaining Column space
+Column(
+  children: <Widget>[
+    const Text('Header'),
+    Expanded(
+      child: ListView(
+        children: const <Widget>[
+          ListTile(title: Text('Item 1')),
+          ListTile(title: Text('Item 2')),
+        ],
+      ),
+    ),
+  ],
+)
+```
+
+### Fixing Unbounded Width (TextField in Row)
+
+**Input (Error State):**
+```dart
+// Throws "An InputDecorator...cannot have an unbounded width"
+Row(
+  children: [
+    const Icon(Icons.search),
+    TextField(), 
+  ],
+)
+```
+
+**Output (Resolved State):**
+```dart
+// Wrap TextField in Expanded to constrain its width to the remaining Row space
+Row(
+  children: [
+    const Icon(Icons.search),
+    Expanded(
+      child: TextField(),
+    ),
+  ],
+)
+```
+
+### Fixing RenderFlex Overflow
+
+**Input (Error State):**
+```dart
+// Throws "A RenderFlex overflowed by X pixels on the right"
+Row(
+  children: [
+    const Icon(Icons.info),
+    const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
+  ],
+)
+```
+
+**Output (Resolved State):**
+```dart
+// Wrap the Text widget in Expanded to force it to wrap within the available constraints
+Row(
+  children: [
+    const Icon(Icons.info),
+    Expanded(
+      child: const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
+    ),
+  ],
+)
+```