Do you want to quickly create a button like this in Flutter? It has rounded corners, four different borders with four gradient fill, a gradient shadow, text with varying letter spacing and shadows. Besides, the button is actually responsive, with an automatic height and a width that evaluates to max(50% of the screen width, 500px). If you move a mouse pointer over it, the cursor will change to the click gesture as well. Here are some of the steps I could think of to achieve this using Flutter out of the box.

1. Calculate the width is not difficult. Get the screen width using MediaQuery and do some simple math will get you there.
2. The four borders can be drawn using four CustomPainters with gradient fills. The rounded corner can be achieved using the Container widget with rounded corners. The text position needs to shift after clicking so you need to calculate the shift as well.
3. Current Flutter shadows only use a single color, so to achieve this gradient shadow, we can stack a gradient container with ImageFiltered blurring under the button.
4. Use a MouseRegion widget to achieve the mouse cursor change.

Using CSS, you can achieve this button style more easily, as CSS supports responsive length units, rounded corners plus different colored borders, gradient shadow with pseudo selector and blur, etc. What if we create a single widget that can easily achieve all those features in Flutter?

#flutter #flutter-ui