CODEWITHSUNDEEP
flutterdart
federico D'Armini
federico D'Armini

Reputation: 321

Show picture from assets or from files Flutter

I want to show a picture inside a CircleAvatar, if the user never inserted a picture before then the default picture "empty_profile.png" will appear, otherwise if the user already inserted a picture from gallery or camera then the last one will be shown.

This is the code :

File _file = null;

File variable declared at the beginning.

Future<void> changeImage() async { //This will change the picture
 File tmp = await imgFromGallery();
 setState(() {
  _file = tmp;
 });
return;
}

The function above will change _file value to the file picked from gallery.

Widget myAvatar() {
    return GestureDetector(
      onTap: null,
      child: CircleAvatar(
        radius: 55,
        backgroundColor: Color(0xffFDCF09),
        child: CircleAvatar(
          radius: 50,
          child: Container(
            child: _file == null 
            ? AssetImage("empty_profile.png") 
            : FileImage(_file),
          ),
        ),
      ),
    );
  }

Finally if file is still null then the asset image is loaded, otherwise if a new picture is choosen then FileImage(_file) will show the picked image.

I have a lots of error because I don't know very well how to handle files, their paths and show images...Can you explain me how I should do?

Upvotes: 1

Views: 4503

Answers (2)

Alex
Alex

Reputation: 386

To include static images in your Flutter project, place them inside the "assets/images" folder. Then, make sure to add this folder to your pubspec.yml:

flutter:
  assets:
    - assets/images/

Next, you may have errors related to trying to render an AssetImage inside a CircleAvatar. To render the file as an Image widget instead, use Image.asset(<path>). Your example could be written as:

Widget myAvatar() {
  return GestureDetector(
    onTap: null,
    child: CircleAvatar(
      radius: 55,
      backgroundColor: Color(0xffFDCF09),
      child: _file == null
        ? Image.asset("assets/images/empty_profile.png")
        : _file
    ),
  );
}

Finally, a great resource for user-selected images is the image_picker library: https://pub.dev/packages/image_picker. For example, a "Select from Gallery" button could invoke the following code, which allows the user to crop the image and saves it as an Image widget:

PickedFile image = await picker.getImage(
  source: ImageSource.gallery,  // to select from camera, use ImageSource.camera
  maxHeight: 1024,
  maxWidth: 1024,
  imageQuality: 50
);
try {
  File croppedImage = await ImageCropper.cropImage(  // use platform-native image cropping
    sourcePath: image.path,
    cropStyle: CropStyle.circle,
    maxWidth: 512,
    maxHeight: 512
  );
  setState(() {  // refresh state to render new profile image
    _file = Image.file(croppedImage)
  })
} catch (err) {
  print(err)
}

Upvotes: 3

Chetankumar Akarte
Chetankumar Akarte

Reputation: 114

You can use CachedNetworkImage PlugIn - Update other details as per your need. This code show Network Images, if not available will show Assets Image.

new Container(
    width: 140.0,
    height: 140.0,
    child: ClipOval(
      child: CachedNetworkImage(
        imageUrl: _profile == null ? "" : Api.baseURL + _profile,
        placeholder: (context, url) =>
            Center(child: CircularProgressIndicator()),
        errorWidget: (context, url, error) => Image.asset(
          "img/user.png",
          fit: BoxFit.cover,
          height: 140.0,
          width: 140.0,
        ),
        fit: BoxFit.cover,
        height: 140.0,
        width: 140.0,
      ),
    ),
  ),

Upvotes: 0

Related Questions