В этой статье мы расскажем вам, как сделать градиентный рисунок на кнопках в Flutter.

В Android мы обычно используем SVG или PNG для градиента или любого другого пользовательского фона и других представлений. Но в Flutter SVG не поддерживаются должным образом. Итак, решение этой проблемы заключается в том, что мы должны создать градиент по-своему. Я делюсь здесь своим опытом, как создать градиент на кнопке.

В Flutter их поддерживает виджет, который помогает легко создавать градиент на кнопке. Вот код:

Container(
 height: 50.0,
 child: RaisedButton(
   onPressed: () {},
   shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
   padding: EdgeInsets.all(0.0),
   child: Ink(
     decoration: BoxDecoration(
         gradient: LinearGradient(colors: [Color(0xff374ABE), Color(0xff64B6FF)],
           begin: Alignment.centerLeft,
           end: Alignment.centerRight,
         ),
         borderRadius: BorderRadius.circular(30.0)
     ),
     child: Container(
       constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
       alignment: Alignment.center,
       child: Text(
         "Login",
         textAlign: TextAlign.center,
         style: TextStyle(
             color: Colors.white
         ),
       ),
     ),
   ),
 ),
),

Итак, есть виджет Ink, который помогает создавать градиентные или другие виды украшений на кнопках или любом виджете.

Это все 🙂