Creating Custom Widgets in Flutter with Composition and InheritedWidget

Introduction

Creating Flutter custom widgets is essential for building scalable, maintainable UIs. Rather than extending massive base classes or copying boilerplate, you can leverage composition to assemble small, reusable pieces. When you need to share state or configuration across your widget tree, InheritedWidget is the go-to tool. In this hands-on guide, you’ll learn how to combine composition and InheritedWidget to create clean, flexible custom Flutter widgets.

Understanding Composition in Flutter

Composition means building UIs by nesting small, focused widgets. Instead of making one giant widget with dozens of properties, break it into subcomponents that know only what they need.

Example: a simple ProfileCard built by composing basic Material widgets.

class ProfileCard extends StatelessWidget {
  final String name;
  final String avatarUrl;

  ProfileCard({required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 2,
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: Row(
          children: [
            CircleAvatar(backgroundImage: NetworkImage(avatarUrl)),
            SizedBox(width: 12),
            Text(name, style: Theme.of(context).textTheme.subtitle1),
          ],
        ),
      ),
    );
  }
}

Here, ProfileCard delegates styling to Theme.of(context) and leverages Row, Padding, and CircleAvatar. That’s composition at its simplest.

Building a Theme with InheritedWidget

When your custom widgets in Flutter need shared configuration—colors, fonts, or spacing—you can wrap them in an InheritedWidget. This gives descendant widgets access without passing props manually at every level.

Define a lightweight theme holder:

class AppTheme extends InheritedWidget {
  final Color primaryColor;
  final TextStyle headerStyle;

  AppTheme({
    required this.primaryColor,
    required this.headerStyle,
    required Widget child,
  }) : super(child: child);

  static AppTheme of(BuildContext context) {
    final widget = context.dependOnInheritedWidgetOfExactType<AppTheme>();
    assert(widget != null, 'No AppTheme found in context');
    return widget!;
  }

  @override
  bool updateShouldNotify(AppTheme old) {
    return primaryColor != old.primaryColor || headerStyle != old.headerStyle;
  }
}

Wrap your app (or subtree) in AppTheme:

void main() {
  runApp(
    AppTheme(
      primaryColor: Colors.teal,
      headerStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      child: MyApp(),
    ),
  );
}

Now anywhere below, you can call AppTheme.of(context) to retrieve your shared colors and typography.

Combining Composition with InheritedWidget

Let’s extend ProfileCard into a ThemedProfileCard that reads colors and text styles from AppTheme:

class ThemedProfileCard extends StatelessWidget {
  final String name;
  final String avatarUrl;

  ThemedProfileCard({required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    final theme = AppTheme.of(context);
    return Card(
      color: theme.primaryColor.withOpacity(0.1),
      child: ListTile(
        leading: CircleAvatar(backgroundImage: NetworkImage(avatarUrl)),
        title: Text(name, style: theme.headerStyle),
      ),
    );
  }
}

By combining composition (ListTile, CircleAvatar) and InheritedWidget (AppTheme), you create a custom Flutter widget that is both reusable and dynamically styled.

Best Practices for Reusable Custom Flutter Widgets

• Keep your widgets small and focused: each widget should have a single responsibility.

• Prefer composition over deep inheritance hierarchies.

• Use InheritedWidget (or Provider, Riverpod) sparingly to share truly global or semi-global configuration/state.

• Expose minimal props; rely on context‐based theming for consistency.

• Document expected behaviors, required context ancestors, and default values.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By mastering composition and InheritedWidget, you earn powerful tools for creating modular, themeable UIs. Start by breaking down large widgets into small building blocks, then lift shared values into an InheritedWidget for easy access. Your custom widgets in Flutter will become more maintainable, testable, and flexible as your app grows.