I am trying to pass a custom made container (with background color, title, and onPressed properties) into another custom widget that creates a row of three of these containers. The goal is to be able to input titles for each of these buttons in the second widget like so, TriButton(title1, title2, title3). Any tips or tricks would be appreciated!
Custom container
class RectButton extends StatelessWidget {
RectButton({this.buttonChild, this.bgColor, this.onPress});
final Widget buttonChild;
final Color bgColor;
final Function onPress;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
constraints: BoxConstraints.expand(width: 100, height: 50),
child: Center(child: buttonChild),
decoration: BoxDecoration(
color: bgColor,
shape: BoxShape.rectangle,
border: Border.all(width: 1, color: Colors.white)),
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
),
);
}
}
`Tri-button code`
enum Weight {
ideal,
actual,
adjusted,
}
class TriButton extends StatefulWidget {
TriButton({this.title1, this.title2, this.title3, this.buttonChild});
final Text title1;
final Text title2;
final Text title3;
final RectButton buttonChild;
@override
_TriButtonState createState() => _TriButtonState();
}
class _TriButtonState extends State<TriButton> {
Weight selectedWeight;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
constraints: BoxConstraints(maxWidth: 300),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: RectButton(
buttonChild: GOAL TO ENTER TITLE HERE,
onPress: () {
setState(() {
selectedWeight = Weight.adjusted;
});
},
bgColor: selectedWeight == Weight.adjusted
? Colors.orange[600]
: Colors.grey[600],
),
),
When using a StatefulWidget you need to use "widget.property" in your implementation.
In your case
Expanded(
child: RectButton(
buttonChild: Text(widget.title1),
onPress: () {
setState(() {
selectedWeight = Weight.adjusted;
});
},
bgColor: selectedWeight == Weight.adjusted
? Colors.orange[600]
: Colors.grey[600],
),
),
Expanded(
child: RectButton(
buttonChild: Text(widget.title2),
onPress: () {
setState(() {
selectedWeight = Weight.adjusted;
});
},
bgColor: selectedWeight == Weight.adjusted
? Colors.orange[600]
: Colors.grey[600],
),
),
.....