Как подогнать размер IconButton в строке во флаттер-сети? Размер значка отображается за пределами представления строки

Я делаю портфолио с помощью Flutter Web. Я создал iconButtons социальных маркеров. Но когда я попытался нажать на кнопку iconButtons, заполнение было неправильным.

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

Это виджет строки, в который я добавил эти iconButtons-

   class IntroductionRow extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 90.0,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ContactIcon(iconData: FontAwesomeIcons.github, onPress: kLaunchGithubURL,),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: FontAwesomeIcons.linkedin, onPress: kLaunchLinkedInURL,),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: Icons.mail, onPress: kLaunchMailURL,),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: FontAwesomeIcons.telegram, onPress: kLaunchTelegramURL, ),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: FontAwesomeIcons.code, onPress: kLaunchLeetCodeURL,),
        ],
      ),
    );
  }
}


//This is the widget of iconButton- 
class ContactIcon extends StatelessWidget {

  final IconData iconData;
  final Function onPress;
  final bool isMobile;

  ContactIcon({@required this.iconData, this.onPress, this.isMobile = false});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      padding: EdgeInsets.symmetric(horizontal: 30.0),
      hoverColor: Colors.blueAccent,
        focusColor: Colors.blueAccent,
        icon:
        Center(
          child: Icon(
              iconData,
              size: isMobile ? 30.0 : 60.0 ,
              color: Colors.white),
        ),
        onPressed: onPress);
  }
}

У меня недавно начался флаттер, поэтому я мало знаю обо всех виджетах - пожалуйста, дайте мне знать, если вы обнаружите какую-либо другую ошибку.


person Aashish Jha    schedule 14.01.2021    source источник
comment
Вы должны включить код своего Row и его дочерних элементов, чтобы мы могли видеть точный макет виджета.   -  person mfkw1    schedule 15.01.2021


Ответы (1)


Я нашел решение своей проблемы. Мне просто нужно добавить ограничения в свой IconButton

ограничения: BoxConstraints.expand (ширина: 80, высота: 80),

а также вместо заполнения мне пришлось использовать sizeBox.

person Aashish Jha    schedule 15.01.2021