Outlined transparent button with gradient border in flutter

Question

Is it possible to create an outlined(transparent) button with gradient border in flutter? I tried to use LinearGradient in BorderSide style but it\'s not allowed.

Answer 1

You can achieve this by doing just a simple trick

You have to define two Containers. First outer container with a gradient background and the second inner container with white background. and as a child of the inner container, you can place anything e.g. TextField, Text, another button, etc.

final kInnerDecoration = BoxDecoration(
  color: Colors.white,
  border: Border.all(color: Colors.white),
  borderRadius: BorderRadius.circular(32),
);

final kGradientBoxDecoration = BoxDecoration(
  gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]),
  border: Border.all(
    color: kHintColor,
  ),
  borderRadius: BorderRadius.circular(32),
);

Now this is your View

  Container(
    child: Padding(
             padding: const EdgeInsets.all(2.0),
             child: Container(
                      child:Text("Button Title with your style"),
                      decoration: kInnerDecoration,
                    ),
           ),
    height: 66.0,
    decoration: kGradientBoxDecoration,
  ),

Done