Правильная форма эффекта ряби для всплывающего меню с круглой иконкой - PullRequest
Новая
       30

Правильная форма эффекта ряби для всплывающего меню с круглой иконкой

0 голосов
/ 21 октября 2019

В Flutter я хочу стилизовать кнопки значков с круглой рамкой, а также правильно настроить эффект пульсации материала, чтобы эффект пульсации содержался в кружке. В следующем коде первая кнопка работает правильно. Во второй (всплывающей) кнопке эффект ряби распространяется на квадрат, окружающий кнопку, а не ограничивается круговой границей.

The second button

MaterialApp(
  home: Scaffold(
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black, width: 2),
              shape: BoxShape.circle,
            ),
            child: MaterialButton(
              minWidth: 0,
              padding: EdgeInsets.all(0.0),
              child: Padding(
                padding: EdgeInsets.all(11.0),
                child: Icon(Icons.home, size: 27.0),
              ),
              shape: CircleBorder(),
              onPressed: () {},
            ),
          ),
          PopupMenuButton<String>(
            onSelected: (String action) {},
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 2),
                shape: BoxShape.circle,
              ),
              child: Padding(
                padding: EdgeInsets.all(11.0),
                child: Icon(Icons.menu, size: 27.0),
              ),
            ),
            itemBuilder: (BuildContext context) => [
              PopupMenuItem<String>(child: ListTile(title: Text('Log Out'))),
            ],
          ),
        ],
      ),
    ),
  ),
);

Есть ли способ заставить всплывающую кнопку работать правильно?

1 Ответ

1 голос
/ 21 октября 2019

Вам необходимо использовать ClipRRect, а также Material: 

ClipRRect(
  borderRadius: BorderRadius.circular(24),
  child: Material(
    color: Colors.transparent,
    child: PopupMenuButton<String>(
    ...

PopupMenuButton, обертывающий child с InkWell, который по некоторым причинам не обрезается, если также не обернутв пределах Material.

...