title: Unable to set gradient color to my custom shape border in flutter app
body: <p>I have created a custom shape using CustomBorder class, and I want to set a gradient color to my custom shape. Please see the below code that I have tried.</p>
  <pre class="lang-dart prettyprint-override"><code> Container(
              decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.bottomLeft,
                end: Alignment.topRight,
                colors: [Colors.orangeAccent, Colors.orange]
              )
            ),
              child: Material(
                color: Colors.deepOrangeAccent,
                shape: CustomShapeBorder(),
                child: IconButton(
                  icon: FaIcon(FontAwesomeIcons.instagram),
                  iconSize: 30.0,
                  padding: const EdgeInsets.only(top: 60.0, left: 30.0),
                  color: Colors.white,
                ),
              ),
            )
  </code></pre>
  <blockquote>
  <p>My CustomShapeBorder() class :</p>
  </blockquote>
  <pre class="lang-dart prettyprint-override"><code>class CustomShapeBorder extends ShapeBorder {
    final double distanceFromWall = 12;
    final double controlPointDistanceFromWall = 5;
  
  
    @override
    // TODO: implement dimensions
    EdgeInsetsGeometry get dimensions =&gt; null;
  
    @override
    Path getInnerPath(Rect rect, {TextDirection textDirection}) {
      // TODO: implement getInnerPath
      return null;
    }
  
    @override
    Path getOuterPath(Rect rect, {TextDirection textDirection}) {
      // TODO: implement getOuterPath
      return getClip(Size(260.0,180.0));
    }
  
    @override
    void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
      // TODO: implement paint
    }
  
    @override
    ShapeBorder scale(double t) {
      // TODO: implement scale
      return null;
    }
  
    Path getClip(Size size) {
      Path clippedPath = new Path();
  
      clippedPath.lineTo(0, size.height);
      clippedPath.quadraticBezierTo(30, size.height + 10, size.width * 0.20, size.height - 50);
      clippedPath.quadraticBezierTo(70, size.height - 120, size.width * 0.40, size.height * 0.35);
      clippedPath.quadraticBezierTo(180, (size.height - (size.height* 0.6)), size.width - 40 , 32 );
      clippedPath.quadraticBezierTo(250, 0, size.width, 0);
      clippedPath.lineTo(size.width, 0);
      clippedPath.close();
      return clippedPath;
    }
  }
  
  </code></pre>
  <p><strong>Output:(Just refer to the upper custom shape, forget the bottom one)</strong>
  <img src="https://i.stack.imgur.com/p0mybl.png" alt="Image 1" /></p>
  <p>If I remove the <strong>color: Colors.deepOrangeAccent</strong> from  <strong>child: Material</strong> then the output is :</p>
  <p><img src="https://i.stack.imgur.com/x7OkUl.png" alt="Image 2" /></p>