assetsflutterflowcustom-widgets

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

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.

enter image description here

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')

enter image description here

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)

enter image description here

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

enter image description here

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

Solution

  • Maybe, for the moment 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 moment I did it to work, 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,
            ),
          ),
        ],
      );
    }
 }