top of page

[Flutter/Dart] Different view while waiting for image acquisition


Things to do

  • There is a widget that displays an image

  • Images are acquired from remote storage

  • Because it takes time, I would like to display notification that it is waiting during that time.


Solution

Switch views in FutureBuilder.

FutureBuilder<ImageProvider>(
  future: getImage(),  
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }

    if ((snapshot.hasError) || (!snapshot.hasData)){
      //Error handling
    }

    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        borderRadius: const 
        BorderRadius.all(Radius.circular(10)),
        image: DecorationImage(
          fit: BoxFit.contain,
          image: snapshot.data!
        ),
      )
    );
  }
)

Future<ImageProvider> getImage()async{
  //method to get image from remote storage
}


Common processing for different image sources

In the above, we considered remote storage as the source of the image, but it can be a local file or an image file in an asset. How can we standardize the processing for these different sources?


Let's create a polymorphic class like this:


  • Creating an abstract class ImageSource class

  • Define Future <ImageProvider> getImage()

  • Define concrete classes LocalImage and RemoteImage that inherit the ImageSource class, and add implementations of getImage for each

  • The image display widget takes an ImageSource instance as an argument and calls getImage() to get an ImageProvider


abstract class ImageSource{

  String path;  //image file path 
  Future<ImageProvider> getImage(); 
}

//Local image file
class LocalImage extends ImageSource{

  @override
  Future<ImageProvider> getImage()async{
    return FileImage(File(path));
  }
}

//Remote storage file
class RemoteImage extends ImageSource{

  @override
  Future<ImageProvider> getImage()async{

    String _downloadPath = await _downLoadFile();  
    return NetworkImage(_downloadPath);
  }
}

Widget ImageWidget(ImageSource imgSrc){

  return FutureBuilder<ImageProvider>(
    future: imgSrc.getImage(),  
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return CircularProgressIndicator();
      }
      if ((snapshot.hasError) || (!snapshot.hasData)){
        //Error handling
      }

      return Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          borderRadius: const 
          BorderRadius.all(Radius.circular(10)),
          image: DecorationImage(
            fit: BoxFit.contain,
            image: snapshot.data!
          ),
        )
      );
    }
  )
}

For LocalImage, getImage() doesn't need to be async, but it's async for convenience with RemoteImage.

(Only the image is displayed with almost no waiting)


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

コメント


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page