CODEWITHSUNDEEP
flutter
DAni M
DAni M

Reputation: 791

How to display a text or an IconButton in a container child?

I'm having this widget that wants to use in a different part of the app but the problem is sometimes the child is Text and sometimes is IconButton How should I change the child: Using ternary operator on the child of the widget ? ?

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final IconData icon;
  final String textof;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: IconButton(
        icon: Center(
          child: Icon(
            icon,
          ),
        ),
        onPressed: onpressed,
      ),
    );
  }
}

Upvotes: 0

Views: 115

Answers (2)

DAni M
DAni M

Reputation: 791

What I did was i used the Iternary operator based on the Width of the Container. becacuase if the container is bigger than 80 it has text otherwise it has Icon.

Upvotes: 0

Ujjwal Raijada
Ujjwal Raijada

Reputation: 975

I believe you are using this widget in some other file. If there are multiple options that you would like to have in place of IconButton, try below code:

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final Widget child;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: child,
    );
  }
}

In case you want to have either IconButton or Text, try below code:

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final IconData icon;
  final String textof;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: textof == null || textof == ''
        ? IconButton(
          icon: Center(
            child: Icon(
              icon,
           ),
         ),
         onPressed: onpressed,
       )
       : textof,
    );
  }
}

Upvotes: 1

Related Questions