CODEWITHSUNDEEP
androidflutter
Alexei
Alexei

Reputation: 15646

Can't set container's color AND BoxShadow's color

Android Studio 3.6

I need container with orange background color AND gray shadow.

Snippet:

const double BOX_SHADOW_BLUR_RADIUS = 8.0;
const double BOX_SHADOW_SPREAD_RADIOUS = BOX_SHADOW_BLUR_RADIUS / 4;
const double BOX_SHADOW_OFFSET_X = BOX_SHADOW_BLUR_RADIUS / 2;
const double BOX_SHADOW_OFFSET_Y = BOX_SHADOW_BLUR_RADIUS / 2;

 Widget _createScanCheckContainer() {
    return new ClipRRect(
        borderRadius:
BorderRadius.all(Radius.circular(Constants.ROUNDED_CORNER_RADIUS)),
            child: new Container(
                height: 56.0,
                decoration: _createBoxDecoration(),
                color: Colors.orange,
                child: Stack(children: [
                  new Positioned(
                    left: Constants.DEFAULT_MARGIN,
                    top: Constants.DEFAULT_MARGIN,
                    bottom: Constants.DEFAULT_MARGIN,
                    child: new Image.asset('assets/images/ic_scan_ticket.png'),
                  ),
                  new Expanded(
                      child: Align(
                    alignment: Alignment.center,
                    child: Text("Scan receipt",
                        style: TextStyle(fontSize: 19.0, color: Colors.white)),
                  ))
                ])));
      }


    BoxDecoration _createBoxDecoration() {
        return new BoxDecoration(boxShadow: [
          BoxShadow(
              color: Colors.grey.withOpacity(0.8),
              blurRadius: Constants.BOX_SHADOW_BLUR_RADIUS,
              // has the effect of softening the shadow
              spreadRadius: Constants.BOX_SHADOW_SPREAD_RADIOUS,
              // has the effect of extending the shadow
              offset: Offset(
                Constants.BOX_SHADOW_OFFSET_X, // horizontal, move right 10
                Constants.BOX_SHADOW_OFFSET_Y, // vertical, move down 10
              ))
        ]);
      }

But I get error:

 cannot provide both a color and a decoration

Upvotes: 0

Views: 61

Answers (1)

Antonio Altieri
Antonio Altieri

Reputation: 146

  • Remove color: from _createScanCheckContainer
  • remove cliprrect
  • add color and border radius to _createBoxDecoration
Widget _createScanCheckContainer() {
    return new Container(
        height: 56.0,
        decoration: _createBoxDecoration(),

        child: Stack(children: [
          new Positioned(
            left: 5,
            top: 5,
            bottom: 5,
            child: new Image.asset('assets/images/ic_scan_ticket.png'),
          ),
          new Expanded(
              child: Align(
                alignment: Alignment.center,
                child: Text("Scan receipt",
                    style: TextStyle(fontSize: 19.0, color: Colors.white)),
              ))
        ]));
  }


 BoxDecoration _createBoxDecoration() {
        return new BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.all(Radius.circular(5)),

        boxShadow: [
          BoxShadow(
              color: Colors.grey.withOpacity(0.8),
              blurRadius: Constants.BOX_SHADOW_BLUR_RADIUS,
              // has the effect of softening the shadow
              spreadRadius: Constants.BOX_SHADOW_SPREAD_RADIOUS,
              // has the effect of extending the shadow
              offset: Offset(
                Constants.BOX_SHADOW_OFFSET_X, // horizontal, move right 10
                Constants.BOX_SHADOW_OFFSET_Y, // vertical, move down 10
              ))
        ]);

Upvotes: 1

Related Questions