What is Difference Between AssetImage and Image.asset In Flutter

What is Difference Between AssetImage and Image.asset In Flutter ?

Earlier we have been through How to Compress Image Before Uploading to Firebase and Flutter So in this article we have been What is the Difference Between AssetImage and Image.asset In Flutter?

Are you ready for the same ??

What is the Difference Between AssetImage and Image.asset In Flutter?

Image is a Stateful Widget and Image.asset is just a named constructor, you can use it directly on your widget tree.

AssetImage is an ImageProvider that is responsible for obtaining the image of the specified path.

If you check the source code of the Image.asset you will find that it’s using AssetImage to get the image.

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  Image.asset(
  String name, {
  super.key,
  AssetBundle? bundle,
  this.frameBuilder,
  this.errorBuilder,
  this.semanticLabel,
  this.excludeFromSemantics = false,
  double? scale,
  this.width,
  this.height,
  this.color,
  this.opacity,
  this.colorBlendMode,
  this.fit,
  this.alignment = Alignment.center,
  this.repeat = ImageRepeat.noRepeat,
  this.centerSlice,
  this.matchTextDirection = false,
  this.gaplessPlayback = false,
  this.isAntiAlias = false,
  String? package,
  this.filterQuality = FilterQuality.low,
  int? cacheWidth,
  int? cacheHeight,
}) : image = ResizeImage.resizeIfNeeded(
       cacheWidth,
       cacheHeight,
       scale != null
         ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
         : AssetImage(name, bundle: bundle, package: package),
     ),
     loadingBuilder = null,
     assert(cacheWidth == null || cacheWidth > 0),
     assert(cacheHeight == null || cacheHeight > 0);

Example:

Asset Declaration in pubspec.yaml: Ensure that the image assets/1.jpg is correctly declared in your pubspec.yaml file under the flutter section. If not, you’ll need to add it like so:

flutter:
 assets:
  - assets/1.jpg
import 'package:flutter/material.dart';

class ImageExample extends StatelessWidget {
  const ImageExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Asset Image"),
      ),
      body: Center(
        child: Image.asset(
          'assets/1.jpg',
          errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
            // Handle the error state, maybe show a placeholder or an error message
            return const Text('Failed to load the image.');
          },
        ),
      ),
    );
  }
}

Output

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, We have been through What is the Difference Between AssetImage and Image.assets in Flutter?

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Nirali Patel

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on