Как сделать кнопку градиента тени в флаттере? - PullRequest
Новая
       84

Как сделать кнопку градиента тени в флаттере?

0 голосов
/ 14 января 2020

У меня есть эта кнопка (скриншот внизу). Теперь я хочу добавить постоянное внешнее свечение (светится как градиентные тени, как зависит от кнопки). Есть ли другая возможность сделать это, кроме как сохранить его как .png в папке активов? Это сделало бы намного меньше работы. Спасибо! screenshot

Ответы [ 3 ]

0 голосов
/ 14 января 2020

вы можете попробовать что-то вроде этого, играя со свойствами декорирования контейнера, такими как градиент, тень от поля ... 

 Container(
    height: 50,
    width: 200,child:Text("Login",textAlign:TextAlign.center),
    decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment(0.8, 0.0),
          colors: [Colors.blue, Colors.indigo, Colors.indigo],
          tileMode: TileMode.repeated,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.indigo,
            blurRadius: 4.0,
            spreadRadius: 4.0, 
            offset: Offset(
              0.0,
              0.0,
            ),
          ),
        ]),
  ),

результат

result

0 голосов
/ 14 января 2020 
Container(
          height: 50.0,
          child: RaisedButton(
            onPressed: () {},
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            padding: EdgeInsets.all(0.0),
            child: Ink(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Color(0xff374ABE),
                    Color(0xff851EDF),
                  ],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Container(
                constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
                alignment: Alignment.center,
                child: Text(
                  "Login",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
        ),
0 голосов
/ 14 января 2020

Вы также можете попробовать следующий пакет градиент-виджеты .

Добавьте его к зависимостям в pubspe c

dependencies:
  gradient_widgets: ^0.5.1

затем, 

import 'package:gradient_widgets/gradient_widgets.dart';

Затем используйте его следующим образом 

 GradientButton(
  child: Text('Gradient'),
  callback: () {},
  gradient: Gradients.backToFuture,
  shadowColor: Gradients.backToFuture.colors.last.withOpacity(0.25),
),

Список литературы

...