Создать кнопку канавки в флаттере? - PullRequest
Новая
       23

Создать кнопку канавки в флаттере?

0 голосов
/ 16 марта 2020

Возможно ли сделать кнопку как изображение? Он не должен быть круглым, просто есть ли в любом случае, чтобы усилить эффект канавки для поднятых кнопок и областей текстового поля в Flutter? Также ссылка на изображение: "https://css-tricks.com/circular-3d-buttons/". Это сделано css, если есть какой-то трюк с дизайном материала, может быть css импорт для такой работы?

Groove button with css

Ответы [ 2 ]

1 голос
/ 16 марта 2020

Вы можете получить очень похожий результат, используя RawMaterialButton и оформленный контейнер.

enter image description here

Container(
  padding: EdgeInsets.all(10),      
  decoration: new BoxDecoration(
     shape: BoxShape.circle,
     gradient: LinearGradient(
       begin: Alignment.bottomCenter,
       end: Alignment.topCenter,
       stops: [0.0 , 0.5, 1.0],
       colors: [Colors.white, Colors.white, Colors.grey[200]]
     )  
  ),
  child: RawMaterialButton(
    onPressed: () {},
    child: new Icon(
      Icons.settings,
        color: Colors.grey[600],
        size: 28.0,
     ),
     shape: new CircleBorder(),
     elevation: 2.0,
     fillColor: Colors.white,
     padding: const EdgeInsets.all(18.0),
   )
);
1 голос
/ 16 марта 2020

Попробуйте это 

    new RawMaterialButton(
  onPressed: () {},
  child: new Icon(
     Icons.pause,
     color: Colors.blue,
     size: 35.0,
  ),
  shape: new CircleBorder(),
  elevation: 2.0,
  fillColor: Colors.white,
  padding: const EdgeInsets.all(15.0),
),
...