How to extends properties of a widget and use in custom widget in flutter [closed] - react-native

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
How can I create widget that contain all properties of a another widget.
e.g. in react-native I can create interface that extends ButtonProps;
Here I can pass all ButtonProps properties to my ButtonComponent.
interface ButtonComponentProps extends ButtonProps {
isError: boolean;
}
function ButtonComponent({isError, ...props}: ButtonComponentProps) {
return (
<Button color={isError ? 'red' : 'blue'} {...props} />
)
}
How can I do something like this in flutter?
e.g. I want to create screen_wrapper widget that contains all properties of scaffold class:
class ScreenContainer extends StatelessWidget {
final Widget child;
final Color statusbarcolor;
final Brightness statusBarIconBrightness;
final bool safeArea;
final Color bgColor;
final bool withScaffold;
final bool loading;
ScreenContainer({
#required this.child,
this.withScaffold = true,
this.statusbarcolor,
this.statusBarIconBrightness,
this.safeArea = true,
this.loading = false,
this.bgColor = Colors.white,
});
#override
Widget build(BuildContext context) {
final Widget widget = TabDetector(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: safeArea ? MediaQuery.of(context).padding.top : 0),
child: child,
),
);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: statusbarcolor ?? Colors.white,
statusBarIconBrightness: statusBarIconBrightness ?? Brightness.light,
),
child: Scaffold(
backgroundColor: Colors.white,
body: widget,
// pass other scaffold properties here
),
);
}
}
and then use it:
ScreenContainer(
appbar: Appbar(),
child: Text('hello'),
);

Answer 1

If I understand your situation right, then what you can do is, make a StatlessWidget having all the properties, and then just accept the child to be passed
class YourClass extends StatelessWidget{
final Widget child;
YourClass({Key key, this.child}): super(key:key);
#override
Widget build(BuildContext context) {
return Scaffold(
// have all your properties and then the child
body: this.child
);
}
}
Use it like this
class AnotherClass extends StatelessWidget{
#override
Widget build(BuildContext context) {
// using your class
return YourClass(
child: your_widget
);
}
}
The above will have all the properties of the YourClass, then widget will be passed from AnotherClass. You can use YourClass anywhere, where you want the Scaffold properties like this only.