sergiandreplace / flutter_rough

A Flutter implementation of the rough.js library
MIT License
87 stars 10 forks source link

Button with Rough #4

Open vptcnt opened 4 years ago

vptcnt commented 4 years ago

Hello,

How to create a button with a Rough border.

class ProfileInfo extends StatelessWidget {
  final String firstText;
  final Function onTap;

  const ProfileInfoBigCard(
      {Key key,
      @required this.firstText,
      this.onTap,
      })
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    var deco = RoughBoxDecoration(    // <- ROUGH
      drawConfig: DrawConfig.build(
        roughness: 1,
        curveStepCount: 10,
        maxRandomnessOffset: 5,
        seed: 1,
      ),
      shape: RoughBoxShape.rectangle,
      borderStyle: RoughDrawingStyle(
        width: 3,
        color: Colors.blue,
      ),
    );
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      elevation: 0,
      shape: RoundedRectangleBorder(.   // <- ROUGH
        borderRadius: BorderRadius.circular(10),
      ),
      child: Container(
        decoration: deco,
        child: InkWell(
          onTap: onTap,
          child: Padding(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(firstText, style: titleStyle),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

It works ... BUT.... When I push on the button, the ROUGH border is redraw all the time...

I would like to keep the original rough border