Search code examples
flutterenumswidgetfinal

How can I pass a custom widget into another custom widget in flutter?


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],
              ),
            ),

Solution

  • 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],
                  ),
                ),
    

    .....