Image widget (asset, network) in Flutter - Build, Publish & Deploy

Build & Publish - Image widget (asset, network)

Performance Impact

Using images in your Flutter app affects frame rate, memory, and battery life. Large or many images can slow UI rendering below 60fps, causing jank. Network images depend on connection speed and caching, which can delay display and increase battery use. Asset images load faster since they are bundled with the app, reducing network calls and improving smoothness.

Optimization Tips

To keep 60fps, resize images to match display size before bundling or loading. Use cacheWidth and cacheHeight for asset and network images to reduce memory. For network images, enable caching with packages like cached_network_image. Avoid loading many large images at once; lazy load or paginate images. Use placeholders to improve perceived performance.

App Bundle Size and Startup Time

Asset images increase app bundle size, which can slow startup and increase download size. Optimize images by compressing and using efficient formats (e.g., WebP). Network images do not increase bundle size but add loading time during use. Balance between asset and network images based on app needs and offline support.

iOS vs Android Differences

Both platforms support Flutter image widgets similarly. iOS aggressively caches images in memory, which can increase RAM use. Android devices vary widely in memory and network speed, so test on multiple devices. iOS requires app icons and launch images as assets, so asset image optimization is critical. Android supports adaptive icons and multiple densities, so provide appropriate asset sizes.

Store Review Guidelines

Apple App Store requires apps to load quickly and not crash due to memory issues from large images (Apple HIG). Google Play expects apps to handle network errors gracefully when loading images. Both stores recommend using optimized images to reduce app size and improve user experience. Avoid copyrighted images without permission to pass review.

Self-Check Question

Your app takes 5 seconds to load this screen with images. What's likely wrong?

• Images are too large and not resized for display.
• Network images are not cached, causing repeated downloads.
• Too many images load simultaneously without lazy loading.
• Asset images increase bundle size, slowing startup.

Key Result

Using Flutter's Image widget with optimized asset and network images improves app smoothness and reduces memory use. Resize and cache images to maintain 60fps and keep app size small for faster startup and store approval.

Practice

1. Which Flutter widget is used to display an image stored locally inside your app's assets folder?

easy

A. Image.asset

B. Image.network

C. Image.file

D. Image.memory

Solution

1. Step 1: Understand image sources in Flutter

   Flutter provides different constructors for Image widget depending on the source: asset, network, file, or memory.

2. Step 2: Identify the correct constructor for local assets

   Images bundled with the app are accessed using Image.asset.

3. Final Answer:

   Image.asset -> Option A

4. Quick Check:

   Local image = Image.asset [OK]

Hint: Local images use Image.asset constructor [OK]

Common Mistakes:

• Using Image.network for local files
• Confusing Image.file with assets
• Not adding assets to pubspec.yaml

2. Which of the following is the correct syntax to load an image from the internet in Flutter?

easy

A. Image.asset('https://example.com/image.png')

B. Image.network('https://example.com/image.png')

C. Image.file('https://example.com/image.png')

D. Image.memory('https://example.com/image.png')

Solution

1. Step 1: Identify the correct constructor for network images

   To load images from the internet, Flutter uses Image.network with the URL as a string parameter.

2. Step 2: Check syntax correctness

   The syntax Image.network('https://example.com/image.png') is correct and will load the image from the URL.

3. Final Answer:

   Image.network('https://example.com/image.png') -> Option B

4. Quick Check:

   Network image = Image.network [OK]

Hint: Use Image.network for URLs [OK]

Common Mistakes:

• Using Image.asset for URLs
• Passing URL to Image.file
• Missing quotes around URL string

3. What will be displayed when this Flutter code runs?

Image.asset('images/logo.png')

Assuming the image file exists and is declared in pubspec.yaml.

medium

A. An error because 'images/logo.png' is a network URL

B. A blank space because Image.asset cannot load images

C. The image 'logo.png' from the assets folder is shown

D. A loading spinner while the image downloads

Solution

1. Step 1: Confirm asset image usage

   The code uses Image.asset with a relative path 'images/logo.png', which means it loads a local asset image.

2. Step 2: Check conditions for display

   Since the image exists and is declared in pubspec.yaml, Flutter will display the image correctly.

3. Final Answer:

   The image 'logo.png' from the assets folder is shown -> Option C

4. Quick Check:

   Image.asset with valid asset = image shown [OK]

Hint: Image.asset shows local images if declared properly [OK]

Common Mistakes:

• Confusing asset path with network URL
• Not declaring asset in pubspec.yaml
• Expecting loading spinner for local images

4. Identify the error in this Flutter code snippet:

Image.asset('https://example.com/image.png')

medium

A. Using Image.asset with a network URL causes an error

B. Missing semicolon at the end

C. Image.asset requires a File object, not a string

D. The URL string is missing quotes

Solution

1. Step 1: Understand Image.asset usage

   Image.asset is for local asset files, not URLs.

2. Step 2: Identify misuse of URL with Image.asset

   Passing a network URL string to Image.asset causes a runtime error because it expects a local asset path.

3. Final Answer:

   Using Image.asset with a network URL causes an error -> Option A

4. Quick Check:

   Image.asset + URL = error [OK]

Hint: Image.asset only accepts local paths, not URLs [OK]

Common Mistakes:

• Thinking Image.asset works with URLs
• Ignoring asset declaration in pubspec.yaml
• Confusing Image.file with Image.asset

5. You want to display a local image named 'icon.png' stored in 'assets/icons/' folder and also show a fallback network image if the local image fails to load. Which Flutter code snippet correctly implements this?

hard

A. Image.file('assets/icons/icon.png', onError: () => Image.network('https://example.com/fallback.png'))

B. Image.network('assets/icons/icon.png', fallback: Image.asset('https://example.com/fallback.png'))

C. Image.asset('assets/icons/icon.png', fallbackImage: Image.network('https://example.com/fallback.png'))

D. Image.asset('assets/icons/icon.png', errorBuilder: (context, error, stackTrace) => Image.network('https://example.com/fallback.png'))

Solution

1. Step 1: Understand fallback handling in Image.asset

   Flutter's Image.asset supports an errorBuilder callback to handle loading errors and show alternative widgets.

2. Step 2: Check which option uses errorBuilder correctly

   Image.asset('assets/icons/icon.png', errorBuilder: (context, error, stackTrace) => Image.network('https://example.com/fallback.png')) uses errorBuilder to show a network image if the asset fails, which is the correct approach.

3. Final Answer:

   Image.asset with errorBuilder showing Image.network fallback -> Option D

4. Quick Check:

   Use errorBuilder for fallback images [OK]

Hint: Use errorBuilder in Image.asset for fallback images [OK]

Common Mistakes:

• Using fallback or onError props that don't exist
• Passing URLs to Image.asset directly
• Confusing Image.file with asset images