Question 317927 in Flutter Question posted in
The official Flutter documentation can be found here.

Assets not loading in Flutter mini app when launched from superapp

I am developing a superapp consisting of two mini apps, each as a separate Flutter project. The superapp has buttons to launch each mini app using Navigator.pushReplacement. However, I am facing an issue where the assets in the mini app are not loading properly when launched from the superapp.

When launching the mini app from its dedicated project, all images are displayed correctly. However, when run from the superapp, Unable to load asset... Exception. Assets not found message displayed.

Assets are locatated in miniapp’s assets folder and not duplicated in superapp project.

The mini apps are included in the superapp’s pubspec.yaml as follows:

  petshop:
    path: ../petshop-walking
  petshop_dog_walkers_app:
    path: ../petshop_dog_walkers_app

Superapps’s main.dart:

import 'package:petshop/main.dart' as customer_app;
import 'package:petshop_dog_walkers_app/main.dart' as dog_walkers_app;
....

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  await configureDependencies();
  // Configuration executed in mini apps' main.dart
  await dog_walkers_app.configureApplication();
  await customer_app.configureApplication();

  runApp(const Application());
}

Mini apps are opened by pushing the widget containing MaterialApp to the Navigator:

  Navigator.pushReplacement(
    context,
    MaterialPageRoute(
      builder: (context) => const customer_app.PetshopApp(),
    ),
  );

Is it feasible to structure the application in a way that each app remains a separate Flutter project and is launched from the superapp, or is it necessary to consolidate them into a single Flutter project?

Tags:

2

Answers


  1. 0

    1. List item Ensure that the asset paths in the pubspec.yaml file are

      correct and match the actual file paths.

    2. List item Check the indentation of the assets section in the pubspec.yaml

      file. The assets section should be at the same level as the flutter

      section and should be indented by two spaces 32.

    3. If the assets are located in a subdirectory, make sure to include the

      subdirectory name in the asset path 4.

    4. Try running flutter clean and then flutter pub get to clear the cache

      and retrieve the latest dependencies 32.

    Login or Signup to reply.
  2. 0

    Problem:

    The super app can’t access assets bundled with other packages

    The assets for the mini app packages are only accessible in the individual packages and so the super app can’t find the assets.

    When you run the super app and navigate to either one of the mini app packages, you are still in the context of the super app and so when it tries to display the Image.asset widget, it can’t find the assets since the assets are bundled with the mini app and not the super app.

    This is why you can only view the images when you run the mini app by itself.

    Solution:

    Specify the Image.asset’s package parameter

    From Image.asset’s documentation:

    To create the widget with an asset from a package, the package
    argument must be provided. For instance, suppose a package called my_icons
    has icons/heart.png . Then to display the image, use:

    Image.asset('icons/heart.png', package: 'my_icons')

    Assets used by the package itself should also be displayed using the package argument as above.

    – Assets in packages | Image.asset

    The solution is to specify the package parameter of the Image.asset constructor.

    So if your image code in the petshop package was:

    Image.asset(
  'assets/pet_image.png',
)

    update it to:

    Image.asset(
  'assets/pet_image.png',
  package: 'petshop'
)

    Now the image from the petshop package will be displayed in the super app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search