Как установить цвет фона для кнопки значка?

Question

Я хочу применить цвет фона для кнопки значка, но не вижу явного backgroundColor собственность для этого. Я хочу добиться этого:

В настоящее время я смог достичь здесь:

Ниже приведен код:

@override Widget build (контекст BuildContext) {

return Scaffold(
    resizeToAvoidBottomPadding: false,
    backgroundColor: Color(0xFF13212C),
    appBar: AppBar(
      title: Text('Demo'),
    ),
    drawer: appDrawer(),
    body: new Center(
    child: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
 //     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      new Column(
        children: <Widget>[
       //   new Flexible(
    new TextField(
        style: new TextStyle(
        color: Colors.white,
      fontSize: 16.0),
      cursorColor: Colors.green,
      decoration: new InputDecoration(

        suffixIcon: new IconButton(
            icon: new Image.asset('assets/search_icon_ivory.png'),onPressed: null),

      fillColor: Colors.black,
        contentPadding: new EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
        filled: true,
        hintText: 'What Do You Need Help With?',
        hintStyle: new TextStyle(
          color: Colors.white
        )
    )
    )
      //    )
    ]
),

Answer 1

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

 suffixIcon: Container(
              color: Colors.green,
              child: new IconButton(
                  icon: new Icon(Icons.search,color: Colors.white,),onPressed: null),
            ),

Answer 2

Вы можете использовать Круговой аватар с радиусом = высота текстового поля /2 или любой другой высотой, которую вы предпочитаете.

Чтобы выяснить спецификации текстового поля, вы можете посетить material.io

Таким образом, фрагмент кода будет выглядеть следующим образом:

CircleAvatar(
                radius: 30,
                backgroundColor: Color(0xff94d500),
                child: IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    ...
                  },
                ),
              ),

Таким образом вы получите кнопку со значком с цветом фона. Надеюсь, это поможет вам, ребята.

Answer 3

Из официальных документов Flutter :

Добавление заливки фона

Кнопки со значками не поддерживают указание цвета фона или другого оформления фона, потому что обычно значок просто отображается поверх фона родительского виджета. Кнопки со значками, которые появляются вAppBar.actions являются примером этого.

Достаточно просто создать иконку-кнопку с заполненным фоном, используя виджет. В Inkвиджет отображает украшение на нижележащем Материале вместе с всплеском и выделениемInkResponse предоставлено виджетами-потомками.

Tl;dr: IconButtonне поддерживает цвет фона "из коробки". Используйте этот обходной путь, чтобы добавить цвет фона и эффект всплеска при нажатии кнопки:

      Ink(
  decoration: ShapeDecoration(
    color: Colors.blue,
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () {},
  ),
),

Живая демонстрация

Answer 4

Вы можете добиться этого с помощью TextButton

           TextButton(
      style: TextButton.styleFrom(
        backgroundColor: colorScheme.primary,
        shape: CircleBorder(),
      ),
      child: Icon(
        MdiIcons.send,
        color: colorScheme.onPrimary,
      ),
      onPressed: () {},
    ),

Результат будет выглядеть так:

Answer 5

С новейшей системой дизайна флаттера и материала-3 это просто кусок пирога.

      IconButton(
  onPressed: () { ... },
  icon: const Icon(Icons.search),
  style: IconButton.styleFrom(backgroundColor: Colors.redAccent),
),

Answer 6

Надеюсь, это вас устроит

      Ink(
  decoration: ShapeDecoration(
     color: Colors.red,
     shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.delivery_dining),
    onPressed: () {
    print('pressed');
    },
  ),
),

Answer 7

Вы не можете сделать это с IconButton виджет еще. Хорошей новостью является то, что вы можете заменить его FlatButton как это:

suffixIcon: new FlatButton(
                      color: Colors.green,
                      disabledColor: Colors.green[100],
                      child: Icon(Icons.search)),

color будет использоваться в случае onPressed определен обработчик, в противном случае он будет отображаться с disabledColor фон.

Answer 8

Если вы используете Материал 3, Flutter представилIconButton.filled()конструктор, который автоматически присваивает цвет фона в зависимости от материалаcolorScheme. У него также есть дополнительное преимущество: возможность настройки значков разных размеров.

Пример:

      IconButton.filled(
    icon: const Icon(Icons.phone)
)

Заполненные темный и светлый режимы IconButtons

Если вы хотите указать цвет, используйте этот ответ

Answer 9

IconButton не поддерживает это, и RaisedButton в последнее время устарел в пользу ElevatedButton, который поддерживает изменение цвета фона, а также формы, но вы не можете легко сделать из него идеальный круг.

Итак, чтобы думать нестандартно, почему бы не использовать FloatingActionButton? Это тоже просто виджеты, поэтому они могут появляться в любом месте экрана. Например, я использую FAB в демонстрационном приложении для видеочата для переключения камер.

Пример кода:

       FloatingActionButton(
  child: Icon(
    Icons.flip_camera_ios_outlined,
    color: Colors.white,
  ),
  onPressed: () {
    // do your thing here
  },
)

А если вас не устраивает размер по умолчанию, вы всегда можете обернуть его SizedBox чтобы изменить ширину по своему усмотрению.

Answer 10

      suffixIcon: Container(
decoration: BoxDecoration(
  color: Colors.blue, 
  borderRadius: BorderRadius.circular(8), 
),
child: IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
  },
  color: Colors.white, 
),

),

Answer 11

Вы можете решить эту проблему с помощью GestureDetector и контейнера. Мне нравится использовать это решение из-за разнообразия элементов управления, которые оно дает вам из комбинации.

Кроме того, GestureDetector открывает больше событий взаимодействия, если вы хотите использовать их на разных устройствах.

      GestureDetector(
      onTap: () {},
      child: ClipOval(
        child: Container(
          //add extra margin to visual center icon if icon isn't balanced
          color: backgroundColor,
          width: size,
          height: size,
          child: Icon(
            Icons.question_mark_sharp,
            size: size * 0.6, //size to your preference
            color: iconColor,
          ),
        ),
      ),
    );

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

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

Answer 12

Добавить материал

      Material(
color:Colors.green
child:IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () {},
  ));

Answer 13

Я использовал несколько цветов, чтобы продемонстрировать, что вы можете делать все, что хотите. И я говорю, что вы поместили свой IconButton в виджет «Материал». Это также решит проблему вашего Splash Color (слегка серого цвета с некоторой прозрачностью). и

Answer 14

Официальное решение:

Зависит от официальной документации флаттера о классе IconButton :

Добавление заполненного фона

Кнопки значков не поддерживают указание цвета фона или другого оформления фона, поскольку обычно значок просто отображается поверх фона родительского виджета. Кнопки со значками, которые появляются в [AppBar.actions], являются примером этого.

Достаточно просто создать кнопку-значок с заполненным фоном с помощью виджета [Ink]. Виджет [Ink] отрисовывает украшение на нижележащем [Material] вместе с заставкой и подсветкой [InkResponse], созданными дочерними виджетами.

Таким образом, код будет таким:

         Material(
    color: Colors.transparent,
    child: Ink(
      decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder(),
      ),
      child: IconButton(
        tooltip: "Some Text...",
        icon: Icon(Icons.flash_off),
        color: Colors.black,
        onPressed: () {},
      ),
    ),
  );

Смотрите официальный пример кода от флаттера, нажмите здесь ...

Примечание. Причина обернуть его виджетом, потому что рисуется на основе виджет, если его убрать украшение не появится.

Answer 15

      SizedBox(
  height: 38,
  width: 38,
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
    primary: Colors.grey,
    onPrimary: Colors.red,
    padding: EdgeInsets.zero,
    shape: const CircleBorder(),
  ),
  onPressed: () {},
  child: const Icon(Icons.refresh),
);

Answer 16

Если вы хотите, чтобы он был поднят, вы можете использовать RaisedButton следующим образом:

                          ConstrainedBox(
                            constraints: BoxConstraints(maxWidth: 50),
                            child: RaisedButton(
                              color: kColorLightGrey,
                              padding: EdgeInsets.symmetric(
                                vertical: 12,
                              ),
                              shape: StadiumBorder(),
                              child: Icon(Icons.refresh),
                              onPressed: () {
                              },
                            ),
                          ),

Answer 17

Вы можете использовать FloatingActionButton для такого случая, но вы не можете использовать FAB в виджете для многократного использования, он показывает ошибку. В таком случае используйте этот код. Это будет работать и с изображениями.

        Card(
    color: Colors.blue,
    shape: CircleBorder(), 
    child: IconButton(
        icon: const Icon(
          Icons.edit,
          size: 20,
          color: Colors.white,
        ),
        onPressed: () {
          print('tapped');  
        },
      ));

Answer 18

Размерная коробка(

                  height: 45,
            child: TextField(
                decoration: InputDecoration(
                  suffixIcon: Container(
                    width: 100,
                    child: Row(
                      children: [
                        IconButton(
                          onPressed: () {
                            print('Media button pressed');
                          },
                          icon: Icon(Icons.camera_alt_outlined),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(4.0),
                          child: Container(
                            width: 50,
                            decoration: BoxDecoration(
                              color: Colors.black,
                              borderRadius: BorderRadius.circular(20)
                            ),
                            child: IconButton(
                              onPressed: () {
                                print('Searching');
                              },
                              icon: Icon(Icons.search, color: Colors.white,),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  filled: true,
                  fillColor: Colors.grey.shade200,
                    label: Text('Search here...'),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(60),
                      borderSide: BorderSide(
                        color: Colors.black,
                      )[enter image description here][1]
                    ),
                ),
            ),
          ),

Answer 19

ElevatedButton с темой.

       ElevatedButton(
  style: ButtonThemes.iconButton,
  child: Icon(
    icon,
    color: color,
  ),
  onPressed: () {},
)

      static ButtonStyle get iconButton=> ButtonStyle(
  backgroundColor: MaterialStateProperty.all(
    backgroundColor,
  ),
  ...
);