【问题标题】:How can I make my icon image smaller in flutter如何使我的图标图像在颤动中变小
【发布时间】:2021-03-31 11:36:22
【问题描述】:

我打算使用我的自定义图标而不是使用材质图标,但由于某种原因我无法将图像缩小。关于如何使图像变小的任何建议,如右侧的材料图标。

我应用了宽度和高度,但出于某种原因,它们不能小于这个值。 (附图)

  Widget textField() {
    return TextField(
      enabled: false,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 10.0),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
            borderRadius: BorderRadius.circular(10.0),
          ),
          border: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.white),
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
          ),
          hintStyle: TextStyle(
              fontSize: 18, color: Theme.of(context).secondaryHeaderColor),
          hintText: 'Search',
          prefixIcon: Padding(
            padding: EdgeInsets.all(2),
            child: SizedBox(
              width: 10,
              height: 10,
              child: Image.asset(
                'assets/icons/nav-icons/Explore.png',
              ),
            ),
          ),
          suffixIcon:
              Icon(Icons.mic, color: Theme.of(context).secondaryHeaderColor),
          filled: true,
          fillColor: Theme.of(context).primaryColor),
    );
  }
  

【问题讨论】:

    标签: flutter user-interface dart icons flutter-layout


    【解决方案1】:

    图像小部件具有宽度和高度属性

    Image.asset(
        "your/asset/path",
        width: PREFERRED_WIDTH,
        height: PREFERRED_HEIGHT,
    ),
    

    也许你可以像这样添加 prefixIconConstraints

     prefixIconConstraints: BoxConstraints(
         maxWidth: 20.0,
         maxHeight: 20.0,
     ),
    

    【讨论】:

    • 谢谢...我已经这样做了,但它不能小于原始尺寸,所以我想知道如何使它小于原始尺寸。
    • 因此您可以通过指定 SizedBox 的宽度和高度将 Image 小部件包装在 SizedBox 中
    • 嗨@dm_tr 我尝试使用 SizedBox 但仍然什么也没做。你能看看我上面更新的代码吗?谢谢——
    • 哦,好的,它已修复。谢谢。你也可以看看我的另一个问题stackoverflow.com/questions/65397494/…
    猜你喜欢
    • 2020-09-06
    • 1970-01-01
    • 2019-02-09
    • 1970-01-01
    • 2018-11-05
    • 1970-01-01
    • 1970-01-01
    • 2018-09-05
    • 1970-01-01
    相关资源
    最近更新 更多