Flutter使用TextEditingController实现图片URL预览不显示问题

TextEditingController本身不会在文本内容变化时自动触发State的build重绘。你虽然把控制器绑定到了输入框上，但输入URL时没有任何逻辑通知Flutter刷新UI，判断图片是否展示的逻辑始终停留在页面第一次加载的初始状态，自然不会加载最新URL对应的图片，这也是你全平台调试都复现问题的核心原因。

另外几个容易导致加载失败的附带问题：

• 输入过程中URL还没输全就触发图片加载，会因为地址不合法直接报加载错误
• 各平台默认的网络权限/配置没开的话，就算UI刷新了也加载不出网络图片

1. 在initState生命周期给控制器加监听，文本变化时调用setState触发UI重绘，别忘了在dispose生命周期释放控制器，避免内存泄漏
2. 给Image.network加错误兜底，URL不合法或者加载失败时给出提示，不会直接崩掉
3. 可以按需选择是输入实时预览，还是点击键盘完成按钮后再加载图片，减少无效的网络请求

修复后的完整可运行代码片段：

class _EditProductScreenState extends State<EditProductScreen> {
  final _imageUrlController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 监听输入框文本变化，变化时刷新UI
    _imageUrlController.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    // 释放控制器资源
    _imageUrlController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Form(
          child: ListView(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    margin: const EdgeInsets.only(
                      top: 10,
                      right: 15,
                    ),
                    height: 100,
                    width: 100,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 1,
                        color: Colors.grey,
                      ),
                    ),
                    child: _imageUrlController.text.isEmpty
                        ? const Center(
                            child: Text(
                              "Enter an Image URL",
                              textAlign: TextAlign.center,
                            ),
                          )
                        : FittedBox(
                            child: Image.network(
                              _imageUrlController.text,
                              fit: BoxFit.cover,
                              // 加载失败兜底
                              errorBuilder: (context, error, stackTrace) {
                                return const Center(
                                  child: Text(
                                    "地址无效",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontSize: 12),
                                  ),
                                );
                              },
                            ),
                          ),
                  ),
                  Expanded(
                    child: TextFormField(
                      decoration: const InputDecoration(
                        label: Text("Image URL"),
                      ),
                      keyboardType: TextInputType.url,
                      textInputAction: TextInputAction.done,
                      controller: _imageUrlController,
                      // 如果不想输入实时加载，把上面控制器的监听去掉，只保留这里的回调，点完成才加载
                      onFieldSubmitted: (value) {
                        setState(() {});
                      },
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• Android端：确认android/app/src/main/AndroidManifest.xml中已经添加网络权限：<uses-permission android:name="android.permission.INTERNET" />，该权限要放在<application>标签同级
• iOS端：如果要加载HTTP非HTTPS链接，需要在ios/Runner/Info.plist中配置NSAppTransportSecurity权限，允许任意HTTP加载
• Web端：如果加载第三方图片报错，是目标站点设置了CORS跨域限制，换支持跨域的图片资源即可

内容的提问来源于stack exchange，提问作者Asghar Ali Hazara