FlutterFlow: How can I use image from asset inside a custom code

Question

I need to show image from asset programmatically using custom code: custom widget.

when I try to specify image from asset in my custom code like this: "Image.asset('assets/image/image_name.png')", console (in web publish) show image not found.

When I try to add another widget image that using Image Asset type and use the same image in my custom code the image is displayed, but when I change image in canvas and use different image in my custom code, the image don't show up.

When we use Flutter to program an app, we can specefy in pubspec.yaml file images that we want to use in the app. How can we achieve showing image from asset image in custom widget with FlutterFlow?

The image below is a screenshot of screen UI. I need to use custom widget to display image randomly. I add an widget image below it to understand what going on.

This is a code I used to display image in custom widget. I use static image here to understand what happen in my code: Image.asset('assets/images/game_letter_B.png')

As you can see, image C doesn't showing up. B only display because I use an image widget "asset" type from canvas (The "B" below custom widget)

here, A and C must be displayed, but nothing is displayed. and console display image not found

Can you help me to see what happen and who can I resolve this please ?

Answer 1

Maybe, for the momment the only way is getting the url link of your image media assets and use it in Custom Widget. Yeah, i know you are not using asset loading, else network, but, is the only for the momment i did it to works, for example this:

  import '/backend/schema/structs/index.dart';
  import '/flutter_flow/flutter_flow_theme.dart';
  import '/flutter_flow/flutter_flow_util.dart';
  import '/custom_code/widgets/index.dart'; // Imports other custom widgets
  import '/custom_code/actions/index.dart'; // Imports custom actions
  import '/flutter_flow/custom_functions.dart'; // Imports custom functions
  import 'package:flutter/material.dart';
  // Begin custom widget code
  // DO NOT REMOVE OR MODIFY THE CODE ABOVE!

  class ImageOnboardingComponent extends StatefulWidget {
    const ImageOnboardingComponent({
      Key? key,
      this.width,
      this.height,
    }) : super(key: key);

    final double? width;
    final double? height;

    @override
    _ImageOnboardingComponentState createState() =>
        _ImageOnboardingComponentState();
  }

  class _ImageOnboardingComponentState extends State<ImageOnboardingComponent> {
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          Text(
            'La imagen2',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          Image.network(
            'url_link_media_asset', // put here your media asset link
            width: widget.width,
            height: widget.height,
            fit: BoxFit.cover,
          ),
          const SizedBox(height: 8),
          Text(
            'La imagen1',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
        ],
      );
    }
 }

Answer 2

you may use the following function to load images from app assets

import 'package:flutter/services.dart' show rootBundle;

Future<Uint8List> loadImageAssetAsBytes(String assetPath) async {
  final ByteData data = await rootBundle.load(assetPath);
  final Uint8List bytes = data.buffer.asUint8List();
  return bytes;
}