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

时间:2019-09-16 06:20:50

标签: flutter flutter-layout

从Android SDK迁移到flutter..mov还是很新的。如何将同一Flutter Image小部件从使用资产更改为以编程方式更改文件?

尝试了两个具有相同功能的Layout Widget,一个使用Image.asset,另一个使用Image.file,但这项工作效率不高,因为我使用了两个Widgets类,它们执行相同的显示,只是路径不同。与下面相同,但将类名更改为_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的挑战很大。需要一些指针..谢谢

2 个答案:

答案 0 :(得分:3)

在您的情况下,可以使用的是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))),
            ],
          ),
        ),
      ),
    );
  }
}

这将为您工作。我在以前的一个应用程序中也使用了相同的逻辑。

答案 1 :(得分:1)

从相机获取图像文件时,可以使用它,如果文件图像等于null,则可以使用资产图像。 像下面的代码

public function updateConsignor($myData){
  extract($myData);

  $this->db->set('user_full_name' , $user_full_name);
  $this->db->set('user_opening_balance' , $user_opening_balance);

$this->db->where('user_id', $user_id);

  if($this->db->update('ts_users')){

     $userId      = $myData['user_id'];
      $this->db->trans_begin();
                            $openingBalTrxn = array(
                            'voucher_amount'               => $myData['user_opening_balance'],
                            );
      $this->db->where('voucher_person_account_id',$userId);
      $this->db->update('ts_voucher', $openingBalTrxn);

         if ($this->db->trans_status() === false){
                  $this->db->trans_rollback();
                  return false;
         }else{
                  $this->db->trans_commit();
                  return true;
              }

       return $query_result;

       return true;
  }else{

    return false;
  }