Bouton transparent avec bordure dégradée en flottement

Question

Est-il possible de créer un bouton délimité (transparent) avec une bordure dégradée en flottement? J'ai essayé d'utiliser LinearGradient dans le style BorderSide mais ce n'est pas autorisé.

Answer 1

Vous pouvez y parvenir en faisant juste un truc simple

Vous devez définir deux conteneurs. Premier récipient extérieur avec fond dégradé et deuxième récipient intérieur avec fond blanc. et en tant qu'enfant du récipient intérieur, vous pouvez placer n'importe quoi, par exemple TextField, Text, autre bouton, 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),
);

Voici votre point de vue

  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,
  ),

Terminé