ImageIcon 被压扁的颤动答案

【问题标题】：ImageIcon squished flutterImageIcon 被压扁的颤动
【发布时间】：2021-06-24 11:08:29
【问题描述】：

我正在构建一个颤振的网络应用程序，我需要做一些看起来像这样的东西：，所以为此我使用了一行。我就是这样做的：

            Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: height / 25,
              width: width / 18,
              decoration: BoxDecoration(
                  border:
                      Border.all(width: 2, color: CustomColours.lightBlue),
                  borderRadius: BorderRadius.all(Radius.circular(10))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('1000   '),
                  ImageIcon(
                    AssetImage(
                      'lib/assets/fonts/icons/Group 1.png',
                    ),
                    color: Colors.white,
                  )
                ],
              ),
            ),
            Container(
              height: height / 25,
              child: FittedBox(
                fit: BoxFit.fitHeight,
                child: IconButton(
                    icon: Icon(
                      Icons.add_circle_outline,
                      color: CustomColours.lightBlue,
                    ),
                    onPressed: () {
                      print('add');
                    }),
              ),
            ),
          ],
        ),

但是，结果是这样的，图标无法正常工作：这是我使用的图标：（它是 50*50 像素）。

我能做些什么来解决这个问题？非常感谢！

【问题讨论】：

标签： flutter user-interface dart flutter-layout flutter-web

【解决方案1】：

您可以将自定义图标扭曲到 FittedBox 小部件并将其尺寸设置为 Container 并将其包装到 FittedBox 父级以实现此场景。因为 FittedBox 从其父小部件中获取 constraints。我没有你的自定义图标。所以，我用框架图标来表示它。

return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: 50,
          width: 100,
          decoration: BoxDecoration(
              border: Border.all(width: 2, color: Colors.lightBlue),
              borderRadius: BorderRadius.all(Radius.circular(10))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '1000  ',
                style: TextStyle(fontSize: 18),
              ),
              Container(
                width: 30,
                height: 30,
                child: FittedBox(
                  child: Icon(
                    Icons.adjust_sharp,
                    color: Colors.black,
                  ),
                ),
              )
            ],
          ),
        ),
        FittedBox(
          fit: BoxFit.fitHeight,
          child: IconButton(
              icon: Icon(
                Icons.add_circle_outline,
                color: Colors.lightBlue,
              ),
              onPressed: () {
                print('add');
              }),
        ),
      ],
    );

【讨论】：