Flutter Widget Composition: Building Reusable UI Components
One of the most powerful aspects of Flutter is its widget-based architecture. Everything in Flutter is a widget, and understanding how to compose widgets effectively is crucial for building maintainable, reusable, and scalable applications. In this article, we'll explore the art of widget composition and learn how to create reusable UI components that will make your Flutter development journey smoother.
What is Widget Composition?
Widget composition is the practice of combining smaller, simpler widgets to create more complex UI components. Instead of building monolithic widgets that do everything, you break down your UI into smaller, focused pieces that can be reused and combined in different ways.
Think of it like building with LEGO blocks. Each widget is a block, and by combining them thoughtfully, you can create anything from a simple button to an entire app interface.
Why Composition Matters
Before diving into the how, let's understand why widget composition is so important:
- Reusability: Write once, use everywhere. A well-composed widget can be used across multiple screens.
- Maintainability: When you need to update a component, you only change it in one place.
- Testability: Smaller widgets are easier to test in isolation.
- Readability: Composed widgets make your code more readable and easier to understand.
- Performance: Flutter can rebuild only the widgets that actually changed.
Basic Composition Patterns
1. Simple Widget Nesting
The most basic form of composition is nesting widgets inside other widgets. Let's start with a simple example:
class ProfileCard extends StatelessWidget {
final String name;
final String email;
const ProfileCard({
Key? key,
required this.name,
required this.email,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
email,
style: const TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
],
),
),
);
}
}
Here, we've composed a Card widget with Padding, Column, and Text widgets to create a reusable profile card component.
2. Extracting Common Patterns
When you notice yourself repeating the same widget structure, it's time to extract it into a reusable component. Let's say you're creating multiple buttons with similar styling:
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback? onPressed;
final Color? backgroundColor;
const CustomButton({
Key? key,
required this.text,
this.onPressed,
this.backgroundColor,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: backgroundColor ?? Theme.of(context).primaryColor,
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 12,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(text),
);
}
}
Now you can use CustomButton throughout your app with consistent styling:
CustomButton(
text: 'Sign In',
onPressed: () {
// Handle sign in
},
)
Advanced Composition Techniques
1. Widget Builders and Factories
Sometimes you need more flexibility in how widgets are composed. Widget builders allow you to defer widget creation until build time:
class ConditionalWrapper extends StatelessWidget {
final bool condition;
final Widget child;
final Widget Function(Widget) builder;
const ConditionalWrapper({
Key? key,
required this.condition,
required this.child,
required this.builder,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return condition ? builder(child) : child;
}
}
This widget conditionally wraps its child based on a condition. Here's how you might use it:
ConditionalWrapper(
condition: isLoggedIn,
builder: (child) => Padding(
padding: const EdgeInsets.all(8.0),
child: child,
),
child: ProfileCard(
name: 'John Doe',
email: 'john@example.com',
),
)
2. Composition with Slots
Creating widgets with "slots" allows maximum flexibility. Instead of hardcoding specific widgets, you accept them as parameters:
class CustomCard extends StatelessWidget {
final Widget? header;
final Widget body;
final Widget? footer;
const CustomCard({
Key? key,
this.header,
required this.body,
this.footer,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (header != null) ...[
header!,
const Divider(height: 1),
],
body,
if (footer != null) ...[
const Divider(height: 1),
footer!,
],
],
),
);
}
}
This pattern lets consumers of your widget decide what goes in each section:
CustomCard(
header: const Padding(
padding: EdgeInsets.all(16.0),
child: Text('Card Title'),
),
body: const Padding(
padding: EdgeInsets.all(16.0),
child: Text('Card content goes here'),
),
footer: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {},
child: const Text('Cancel'),
),
ElevatedButton(
onPressed: () {},
child: const Text('Save'),
),
],
),
),
)
Building Complex Components
Let's put these concepts together to build a more complex, real-world component: a reusable list item with an avatar, title, subtitle, and optional trailing widget.
class ListItem extends StatelessWidget {
final String title;
final String? subtitle;
final Widget? leading;
final Widget? trailing;
final VoidCallback? onTap;
const ListItem({
Key? key,
required this.title,
this.subtitle,
this.leading,
this.trailing,
this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 12.0,
),
child: Row(
children: [
if (leading != null) ...[
leading!,
const SizedBox(width: 16),
],
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
if (subtitle != null) ...[
const SizedBox(height: 4),
Text(
subtitle!,
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
),
),
],
],
),
),
if (trailing != null) ...[
const SizedBox(width: 16),
trailing!,
],
],
),
),
);
}
}
Now you can use this component in various ways:
// Simple list item
ListItem(
title: 'Settings',
onTap: () => Navigator.pushNamed(context, '/settings'),
)
// With avatar and subtitle
ListItem(
title: 'John Doe',
subtitle: 'Last seen 2 hours ago',
leading: const CircleAvatar(
backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
),
trailing: const Icon(Icons.chevron_right),
onTap: () {
// Navigate to profile
},
)
// With custom trailing widget
ListItem(
title: 'Notifications',
subtitle: '3 new notifications',
leading: const Icon(Icons.notifications),
trailing: Switch(
value: true,
onChanged: (value) {
// Handle toggle
},
),
)
Best Practices for Widget Composition
1. Keep Widgets Focused
Each widget should have a single responsibility. If a widget is doing too many things, break it down into smaller widgets.
2. Use const Constructors
When possible, use const constructors. This helps Flutter optimize rebuilds by reusing widget instances:
const CustomButton(
text: 'Click me',
onPressed: handleClick,
)
3. Make Widgets Configurable
Provide sensible defaults but allow customization through parameters. This makes your widgets flexible without being overly complex.
4. Document Your Widgets
Add clear documentation explaining what your widget does, what parameters it accepts, and how to use it:
/// A reusable list item widget with optional leading and trailing widgets.
///
/// The [title] is required and displayed prominently.
/// The [subtitle] is optional and displayed below the title in a lighter color.
/// Use [leading] to add an icon or avatar at the start.
/// Use [trailing] to add action buttons or indicators at the end.
class ListItem extends StatelessWidget {
// ...
}
5. Consider Performance
For widgets that might be rebuilt frequently, consider using const widgets or extracting expensive operations. Remember that Flutter rebuilds widgets efficiently, but unnecessary rebuilds can still impact performance.
Common Pitfalls to Avoid
- Over-composition: Don't create a widget for every single element. Sometimes a simple
Textwidget is enough. - Under-composition: Don't create massive widgets that do everything. Break them down.
- Ignoring the widget tree: Be mindful of how your widgets fit into the overall widget tree structure.
- Hardcoding values: Avoid hardcoding colors, sizes, or text. Use parameters or theme values instead.
Putting It All Together
Let's create a complete example that demonstrates effective widget composition: a settings screen with various types of settings items.
class SettingsScreen extends StatelessWidget {
const SettingsScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
),
body: ListView(
children: [
const SectionHeader(title: 'Account'),
ListItem(
title: 'Profile',
subtitle: 'Manage your profile information',
leading: const Icon(Icons.person),
trailing: const Icon(Icons.chevron_right),
onTap: () {
// Navigate to profile
},
),
ListItem(
title: 'Privacy',
leading: const Icon(Icons.lock),
trailing: const Icon(Icons.chevron_right),
onTap: () {
// Navigate to privacy settings
},
),
const Divider(),
const SectionHeader(title: 'Preferences'),
ListItem(
title: 'Notifications',
subtitle: 'Manage notification settings',
leading: const Icon(Icons.notifications),
trailing: Switch(
value: true,
onChanged: (value) {
// Handle toggle
},
),
),
ListItem(
title: 'Theme',
subtitle: 'Dark mode',
leading: const Icon(Icons.dark_mode),
trailing: const Icon(Icons.chevron_right),
onTap: () {
// Navigate to theme settings
},
),
],
),
);
}
}
class SectionHeader extends StatelessWidget {
final String title;
const SectionHeader({
Key? key,
required this.title,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
child: Text(
title.toUpperCase(),
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: Colors.grey[600],
letterSpacing: 1.2,
),
),
);
}
}
Notice how we've composed the entire settings screen using our reusable ListItem widget and a simple SectionHeader widget. This approach makes the code clean, maintainable, and easy to extend.
Conclusion
Widget composition is a fundamental skill in Flutter development. By breaking down your UI into smaller, reusable components, you create code that's easier to maintain, test, and extend. Start small with simple compositions, and as you gain experience, you'll naturally develop a sense for when and how to compose widgets effectively.
Remember, the goal isn't to create the perfect widget on the first try. Start with what you need, and refactor as patterns emerge. With practice, widget composition will become second nature, and you'll find yourself building more elegant and maintainable Flutter applications.
Happy composing!