Flutter Testing

# Common Testing Errors

## Overview

This guide covers frequently encountered Flutter testing errors and their solutions.

## Layout Errors

### 'A RenderFlex overflowed...'

**Error Message:**
```
The following assertion was thrown during layout:
A RenderFlex overflowed by 1146 pixels on the right.
```

**Cause:** Yellow and black stripes indicate overflow when a child widget is too large for its parent (Row/Column).

**Solution:** Wrap the overflowing widget in `Expanded` or `Flexible`.

```dart
// Problem
Row(
  children: [
    Icon(Icons.message),
    Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Title', style: Theme.of(context).textTheme.headlineMedium),
        Text('Very long text that overflows the available space...'),
      ],
    ),
  ],
)

// Solution
Row(
  children: [
    Icon(Icons.message),
    Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Title', style: Theme.of(context).textTheme.headlineMedium),
          Text('Very long text that fits in the available space...'),
        ],
      ),
    ),
  ],
)
```

### 'Vertical viewport was given unbounded height'

**Error Message:**
```
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container.
This situation typically happens when a scrollable widget is nested inside another scrollable widget.
```

**Cause:** ListView or other scrollable widget inside Column without height constraints.

**Solution:** Wrap in `Expanded` or use `shrinkWrap: true`.

```dart
// Problem
Column(
  children: [
    Text('Header'),
    ListView(
      children: [
        ListTile(leading: Icon(Icons.map), title: Text('Map')),
        ListTile(leading: Icon(Icons.subway), title: Text('Subway')),
      ],
    ),
  ],
)

// Solution 1: Expanded
Column(
  children: [
    Text('Header'),
    Expanded(
      child: ListView(
        children: [
          ListTile(leading: Icon(Icons.map), title: Text('Map')),
          ListTile(leading: Icon(Icons.subway), title: Text('Subway')),
        ],
      ),
    ),
  ],
)

// Solution 2: shrinkWrap
Column(
  children: [
    Text('Header'),
    ListView(
      shrinkWrap: true,
      children: [
        ListTile(leading: Icon(Icons.map), title: Text('Map')),
        ListTile(leading: Icon(Icons.subway), title: Text('Subway')),
      ],
    ),
  ],
)
```

### 'An InputDecorator...cannot have an unbounded width'

**Error Message:**
```
An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
This happens when the parent widget does not provide a finite width constraint.
```

**Cause:** TextField or TextFormField inside Row without width constraints.

**Solution:** Wrap in `Expanded` or `SizedBox`.

```dart
// Problem
Row(
  children: [TextField()],
)

// Solution 1: Expanded
Row(
  children: [Expanded(child: TextFormField())],
)

// Solution 2: SizedBox
Row(
  children: [SizedBox(width: 200, child: TextFormField())],
)
```

## Widget Lifecycle Errors

### 'setState called during build'

**Error Message:**
```
setState() or markNeedsBuild() called during build.
This Overlay widget cannot be marked as needing to build because the framework
is already in the process of building widgets.
```

**Cause:** Calling `setState` (or methods that call it like `showDialog`) directly in the `build` method.

**Solution:** Use `WidgetsBinding.instance.addPostFrameCallback` or Navigator API.

```dart
// Problem
Widget build(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(title: Text('Error!')),
  );
  return Center(child: Text('Show Dialog'));
}

// Solution 1: Post-frame callback
Widget build(BuildContext context) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    showDialog(
      context: context,
      builder: (context) => Alert