时间戳

首页 > 解决方案 > 如何以编程方式将 Flutter Image 小部件从资产更改为文件？

flutter - 如何以编程方式将 Flutter Image 小部件从资产更改为文件？

问题描述

Flutter 很新……从 Android SDK 转移。如何以编程方式将相同的 Flutter Image 小部件从使用资产更改为文件？

尝试了两个具有相同功能的布局小部件，一个使用 Image.asset，另一个使用 Image.file，这项工作但效率不高，因为我使用了两个执行相同显示的小部件类，唯一的区别在于路径。与下面相同，但类名更改为 _RegisterUserAfter 并使用 Image.path。

class _RegisterUserState extends State<RegisterUser> {
@override
Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomPadding: false,
  appBar: AppBar(
    title: Text('New User Registration'),
    backgroundColor: Colors.black,
  ),
  body: SingleChildScrollView(
    child: Container(
      padding: EdgeInsets.all(30.0),
      child: Column(
        children: <Widget>[
          GestureDetector(
              onTap: _onCamera,
              child: Container(
                width: 190,
                height: 190,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      image: AssetImage(pathAsset),
                      fit: BoxFit.fill,
                    )),
              )),

          TextField(
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                labelText: 'Email',
              )),
          TextField(
            decoration: InputDecoration(
              labelText: 'Password',
            ),
            obscureText: true,
          ),
          TextField(
              keyboardType: TextInputType.phone,
              decoration: InputDecoration(
                labelText: 'Phone',
              )),
          SizedBox(
            height: 10,
          ),
          MaterialButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            minWidth: 300,
            height: 50,
            child: Text('Register'),
            color: Colors.black,
            textColor: Colors.white,
            elevation: 15,
            onPressed: _onRegister,
          ),
          SizedBox(
            height: 10,
          ),
          GestureDetector(
              onTap: _onBackPress,
              child:
                  Text('Already Register', style: TextStyle(fontSize: 
                  16))),
        ],
      ),
    ),
  ),
 );
}

当 onCamera 方法捕获图像并存储在本地目录中时，图像将出现在同一个图像小部件上。或者我是否需要使用图像小部件一个用于资产，另一个用于文件？然后在文件可用时隐藏资产？从纯 android-java 迁移到 dart 非常具有挑战性..需要一些指针..谢谢

标签： flutterflutter-layout

解决方案

在您的情况下，您可以使用 FileImage Provider，因为 DecorationImage 需要一个 ImageProvider。因此，请遵循以下代码语法。

class _RegisterUserState extends State<RegisterUser> {
  File _image;

  @override
  void initState() {
    super.initState();
    _image = null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('New User Registration'),
        backgroundColor: Colors.black,
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(30.0),
          child: Column(
            children: <Widget>[
              GestureDetector(
                  onTap: _onCamera,
                  child: Container(
                    width: 190,
                    height: 190,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          image: _image == null
                              ? AssetImage(pathAsset)
                              : FileImage(_image),  // here add your image file path
                          fit: BoxFit.fill,
                        )),
                  )),
              TextField(
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(
                    labelText: 'Email',
                  )),
              TextField(
                decoration: InputDecoration(
                  labelText: 'Password',
                ),
                obscureText: true,
              ),
              TextField(
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    labelText: 'Phone',
                  )),
              SizedBox(
                height: 10,
              ),
              MaterialButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20.0)),
                minWidth: 300,
                height: 50,
                child: Text('Register'),
                color: Colors.black,
                textColor: Colors.white,
                elevation: 15,
                onPressed: _onRegister,
              ),
              SizedBox(
                height: 10,
              ),
              GestureDetector(
                  onTap: _onBackPress,
                  child:
                      Text('Already Register', style: TextStyle(fontSize: 16))),
            ],
          ),
        ),
      ),
    );
  }
}

这对你有用。我在之前的一个应用程序中也使用了相同的逻辑。

推荐阅读