Wrap and Chip Widgets Tutorial

Flutter provides a wide range of widgets that allow developers to create beautiful and responsive UIs. Two of the most commonly used widgets when dealing with collections of small elements are Wrap and Chip. In this tutorial, we will explore how to use Wrap and Chip widgets effectively, complete with examples, code snippets, and practical use cases.

What is the Wrap Widget?

The Wrap widget in Flutter is used when you want to display multiple child widgets in a horizontal or vertical flow, automatically moving to the next line if there is no more space. Unlike Row or Column, Wrap prevents overflow issues and makes your layout responsive.

Basic Example of Wrap

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Wrap Example')),
        body: Center(
          child: Wrap(
            spacing: 8.0, // horizontal space
            runSpacing: 4.0, // vertical space
            children: List.generate(
              10,
              (index) => Chip(
                label: Text('Item $index'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this example, the Wrap widget arranges the Chip widgets in rows. If there is not enough space in one row, the next chip automatically wraps to the next line. This makes the layout responsive and visually organized.

What is the Chip Widget?

The Chip widget represents a small piece of information such as a tag, category, or user. It is commonly used in filters, selections, and input fields. Flutter provides different types of Chips like Chip, ChoiceChip, FilterChip, and InputChip.

Basic Example of Chip

Chip(
  label: Text('Flutter'),
  avatar: CircleAvatar(
    backgroundColor: Colors.blue,
    child: Text('F'),
  ),
)

Here, the Chip displays the label “Flutter” with an avatar showing the letter “F”. Chips can also include icons, delete actions, and tap callbacks.

Wrap and Chip Together

One of the most powerful combinations is using Wrap with Chip. This allows you to display a list of tags, categories, or filters in a responsive layout.

Example: Tag List with Wrap and Chip

import 'package:flutter/material.dart';

class WrapChipExample extends StatelessWidget {
  final List tags = [
    'Flutter',
    'Dart',
    'Firebase',
    'Provider',
    'GetX',
    'Riverpod',
    'Bloc',
    'Animations',
    'Responsive UI',
    'State Management',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wrap & Chip Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Wrap(
          spacing: 8.0,
          runSpacing: 8.0,
          children: tags.map((tag) {
            return Chip(
              label: Text(tag),
              avatar: CircleAvatar(
                backgroundColor: Colors.blue.shade700,
                child: Text(tag[0]),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

This code creates a list of tags displayed using Chips inside a Wrap widget. The result is a responsive group of chips that automatically wrap when the screen is smaller.

Interactive Chips

Flutter allows interaction with Chips using ChoiceChip, FilterChip, and InputChip. These allow selection, filtering, and dynamic input.

Example: ChoiceChip with Wrap

import 'package:flutter/material.dart';

class ChoiceChipExample extends StatefulWidget {
  @override
  _ChoiceChipExampleState createState() => _ChoiceChipExampleState();
}

class _ChoiceChipExampleState extends State<ChoiceChipExample> {
  int _selectedIndex = 0;

  final List<String> options = [
    'Beginner',
    'Intermediate',
    'Advanced',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ChoiceChip Example')),
      body: Wrap(
        spacing: 8.0,
        children: List.generate(options.length, (index) {
          return ChoiceChip(
            label: Text(options[index]),
            selected: _selectedIndex == index,
            onSelected: (bool selected) {
              setState(() {
                _selectedIndex = index;
              });
            },
          );
        }),
      ),
    );
  }
}

In this example, the user can select one of the chips, and the state updates accordingly. This is especially useful for user preferences or filter options.

Practical Use Cases

• Tag System: Blogs or news apps often use Chips to display categories.
• Filters: E-commerce apps use Chips inside Wrap for product filters.
• User Input: Chips can represent selected items, such as emails in Gmail’s recipient input.
• Responsive Layout: Wrap ensures that Chips look good across different screen sizes.

Best Practices

1. Use Wrap instead of Row when you have an unknown number of children.
2. Apply spacing and runSpacing for better readability.
3. For interactive selections, use ChoiceChip or FilterChip.
4. Keep labels short and clear to avoid clutter.

Conclusion

By combining Wrap and Chip widgets in Flutter, you can build flexible, interactive, and responsive UIs. Whether you are displaying tags, filters, or user input, these widgets provide a clean and user-friendly way to handle multiple items. Implementing Wrap and Chip properly will significantly enhance your app’s usability and design.