How to Create a Flexible Custom Wrapper for Widgets to overriding some default properties?

[talpx0]

I'm currently developing a custom wrapper for widgets in Flutter that enables extensive customization, similar to how {...rest} works in TypeScript with React components. However, Dart doesn't support the spread operator for widget properties, so I'm struggling to find an effective way to forward a wide range of properties to a base widget like IconButton.

Here's an example of what I might do in TypeScript:

const CustomIconButton: React.FC = ({
  accessibilityLabel,
  ...rest
}) => {
  return (
    <IconButton {...rest} aria-label={accessibilityLabel ?? ""} color={"red"}/>
  );
};

In Flutter, I'm looking for a way to achieve something similar. How can I create a wrapper that allows users to customize any widget with multiple properties without manually specifying each one? Here's a basic approach in Dart, but it requires explicitly forwarding each property, which isn't scalable. For example, an IconButton can have additional properties like activecolor and border. Manually copying all of them can make the code redundant. Here's my current approach:

import 'package:flutter/material.dart';

class CustomIconButton extends StatelessWidget {
  final VoidCallback onPressed;
  final IconData icon;
  final IconButtonConfig config;

  const CustomIconButton({
    Key? key,
    required this.onPressed,
    required this.icon,
    this.config = const IconButtonConfig(),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(icon),
      onPressed: onPressed,
      tooltip: config.tooltip,
      color: config.color,
      // add other IconButton properties here using the config object
    );
  }
}

class IconButtonConfig {
  final String tooltip;
  final Color color;
  final double iconSize;

  const IconButtonConfig({
    this.tooltip = '',
    this.color = Colors.black,
    this.iconSize = 24.0,
  });
}

How can I achieve similar behavior to React Native in Flutter? Any insights would be greatly appreciated!

I try to use extend and extension , but they all looks like required you copy all the properties.

[XuanTung95]

How about extends IconButton?

[talpx0]

How about extends IconButton?

after I research , I found that they prefer use callback to create an IconButtonBuilder or export the whole IconButton as an individual child , I can't find out more than this . extension is good , but you also need to forward all the key , and I saw they do forward all the key in their source code . I guess they don't plan to support this because null safety , but it makes code decoupling become much redundant.

[darshankawar]

@talpx0
Can you check this and see if it helps in your case or not ?

[github-actions]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.