Flutter开发如何在登录页的TextFormField组件上方插入图片

实现方法非常简单，你当前的登录页布局是用Column组件承载所有表单元素，只需要在第一个输入框_emailTextField()的上方插入图片组件即可，具体操作如下：

• 若你使用本地图片，需要先在项目的pubspec.yaml文件中声明图片资源路径，示例配置：

flutter:
  # 其余配置保持不变，新增assets配置
  assets:
    - assets/images/login_logo.png # 替换为你自己的图片存储路径

• 修改你现有代码中build方法内的Column子元素列表，在最前面添加图片组件即可，修改后的完整build代码如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Login")),
    body: SingleChildScrollView(
      child: Container(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                // 新增的图片组件，放在所有表单项最上方
                Image.asset(
                  "assets/images/login_logo.png", // 替换为你的实际图片路径
                  height: 120, // 可按需调整图片高度
                  width: 120, // 可按需调整图片宽度
                  fit: BoxFit.contain,
                ),
                // 调整图片和下方输入框的间距
                SizedBox(height: 20,),
                _emailTextField(),
                _passwordTextField(),
                _buttonLogin(),
                SizedBox(height: 30,),
                _menuRegistrasi()
              ],
            ),
          ),            
        ),
      ),
    ),
  );
}

如果你要使用网络图片，只需将Image.asset替换为Image.network，参数传入对应的网络图片地址即可。

内容的提问来源于stack exchange，提问作者Fred Bowo