Flutter - Как изменить размер IconButtons с темой

Question

У меня есть строка с несколькими иконками кнопок, и мне нужно изменить их цвет и размер. Мне удалось изменить цвет, но я не могу изменить размер значков.

IconTheme(
                  data: IconThemeData(size: 48.0, color: Colors.yellow),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.delete),
                        onPressed: () => null,
                      ),
                      IconButton(
                        icon: Icon(Icons.file_upload),
                        onPressed: () => _addPhoto(false),
                      ),
                      IconButton(
                        icon: Icon(Icons.camera_alt),
                        onPressed: () => _addPhoto(true),
                      ),
                    ],
                  ),
                ),

Если я установлю размер внутри IconButtons с помощью iconSize, он будет работать, а с IconTheme - нет.

Как я могу это исправить?

Answer 1

Как определено в официальных документах, ссылка здесь:

Это свойство не должно быть нулевым. По умолчанию 24,0. Указанный здесь размер передается виджету в свойстве icon через IconTheme. Установка размера здесь вместо, например, свойства Icon.size позволяет IconButton изменять размер области всплеска в соответствии с Icon. Если бы вы установили размер Icon с помощью Icon.size, то IconButton по умолчанию установил бы значение 24.0, и тогда сам значок, вероятно, обрезался бы.

Следовательно, IconButton необходимо предоставить свойство iconSize, поскольку оно переопределяет свойство размера IconTheme. Если вы хотите, чтобы размер кнопки был получен из IconTheme, вам следует создать свой собственный IconButton, который устанавливает для вас iconSize. Например:

class CustomIconButton extends StatelessWidget {
  CustomIconButton({Key key, this.onPressed, this.icon});

  final Function onPressed;
  final Icon icon;

  @override
  Widget build(BuildContext context) {
    IconThemeData iconThemeData = IconTheme.of(context);
    return IconButton(
        onPressed: onPressed, iconSize: iconThemeData.size, icon: icon);
  }
}

Answer 2

Сначала проверьте, находитесь ли вы в области макета, в которой используется основная тема или тема по умолчанию. Это что? Размещает на макете, использующем основной цвет.

      ThemeData(

  primaryColorLight: Colors.blueAccent[100],
  primaryColor: Colors.blueAccent[200],
  primaryColorDark: Colors.blueAccent[700],
  accentColor: Colors.yellow[700],

  iconTheme: IconThemeData(
    color: Colors.yellow[700],
      size: 28
  ),
  accentIconTheme: IconThemeData(
    color: Colors.yellow[700],
    size: 32
  ),
  primaryIconTheme: IconThemeData(
    color: Colors.yellow[700],
      size: 24
  ),
 
);

• Если вы находитесь в основной области (на макете, использующем основной цвет), будет использоваться accentIconTheme.
• В противном случае primaryIconTheme

IconTheme я пока не знаю, поэтому любой может редактировать или оставлять комментарии.

Answer 3

Использовать iconTheme из ThemeData вот так, и все ваши значки будут размером 35 с кодом ниже:

      class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          iconTheme: IconThemeData(
            size: 35.0,
        ),
      ),
      home: HomePage(),
    );
  }
}

Answer 4

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

              icon: IconTheme(
          data: Theme.of(context).copyWith().iconTheme,
          child: Icon(
            Icons.search,
          ),
        ),
        onPressed: () {},
      ),

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

Answer 5

сделайте свой необработанный ряд значков (не IconButton). затем оберните свою иконку виджетом, на который можно нажать Like (InkWell или GestureDetector), чтобы воспользоваться преимуществами (функции onTap) . на самом деле это не очень хороший способ, но он, вероятно, решит вашу проблему.