How to change Flutter Image widget from asset to file programmatically?

Question

Quite new to flutter..moving from Android SDK. How to change the same Flutter Image widget from using asset to file programmatically?

Tried two Layout Widgets of the same functions one using Image.asset the other using Image.file this work but not efficient since I use two Widgets class that perform same display only difference is with path. Same as below but with classname change to _RegisterUserAfter and using 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))),
        ],
      ),
    ),
  ),
 );
}

When onCamera method capture image and store in local directory, the image will appear on the same image widget. Or do i need to use to image widget one for asset and the other for file? and then hide the asset when file is available? Quite challenging moving from pure android-java to dart..need some pointers..thanks

Answer 1

In your case what you can use is FileImage Provider, As DecorationImage will expect an ImageProvider. So, follow the below code syntax.

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))),
            ],
          ),
        ),
      ),
    );
  }
}

This will work for you. I have also used the same logic in one of my previous app.

Answer 2

You can use image file when you get it from camera , if your file image equal to null then you can use asset image. like the code below

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)
                              : Image.file(_image),
                          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))),
            ],
          ),
        ),
      ),
    );
  }
}