View Categories

Can you describe how you would implement a custom widget in Flutter using Dart?

Parthiban Kannan
Updated on December 6, 2025

2 min read

In Flutter, I often create custom widgets when I need reusable UI components that encapsulate both design and behavior. Flutter makes this very easy because everything in the framework is itself a widget — from layout elements to text and buttons.

When I build a custom widget, I usually start by deciding whether it should be stateless or stateful. If the widget only depends on data passed from outside and doesn’t need to manage internal state, I go with a StatelessWidget. If it needs to manage internal data that changes over time (like animations, user input, or toggles), I use a StatefulWidget.

For example, in one of my Flutter apps, I needed a reusable button that showed a loading spinner when pressed — something I could reuse across multiple screens. I implemented it as a custom StatefulWidget like this:

📄
filename.dart 
import 'package:flutter/material.dart';

class LoadingButton extends StatefulWidget {
  final String title;
  final Future Function() onPressed;

  const LoadingButton({required this.title, required this.onPressed, Key? key}) : super(key: key);

  @override
  State createState() => _LoadingButtonState();
}

class _LoadingButtonState extends State {
  bool _isLoading = false;

  void _handlePress() async {
    setState(() => _isLoading = true);
    await widget.onPressed();
    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _isLoading ? null : _handlePress,
      style: ElevatedButton.styleFrom(padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12)),
      child: _isLoading
          ? SizedBox(
              height: 18,
              width: 18,
              child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2),
            )
          : Text(widget.title),
    );
  }
}

Now I can use this widget anywhere:

📄
filename.dart 
LoadingButton(
  title: 'Submit',
  onPressed: () async {
    await Future.delayed(Duration(seconds: 2)); // simulate API call
  },
)

This encapsulates both logic and UI in one place — so I don’t repeat the same code on multiple screens.

A challenge I faced while building custom widgets was managing state efficiently when the widget’s internal state had to stay in sync with external inputs. For instance, if a parent widget updates some value, I must ensure my custom widget rebuilds accordingly. To handle that, I rely on using didUpdateWidget() lifecycle method or switching to ValueNotifier or Provider for external state synchronization.

Another challenge was performance optimization — sometimes widgets rebuild too often. To avoid unnecessary rebuilds, I use const constructors where possible, and for child widgets that don’t change, I wrap them in const or RepaintBoundary.

In terms of limitations, if a custom widget grows too complex — for example, combining multiple UI states, animations, and gesture handling — I prefer splitting it into smaller sub-widgets for readability and maintainability.

As an alternative, if the widget involves custom drawing or performance-sensitive UI (like charts or animations), I implement it using CustomPainter or RenderBox for lower-level control.

Overall, custom widgets are one of Flutter’s strongest features. They help maintain clean, modular code and promote reusability — and I’ve applied them in almost every project for things like custom cards, input fields, loaders, and buttons to ensure consistent design across the app.

Scroll to Top