Home > Enterprise >  I cant see my images in my flutter project
I cant see my images in my flutter project

Time:01-06

I did to make a simple pokedex application for trying myself. I completed my project and I did not get any issue in android studio.Other hand, When I started my application, I cant see images to get in my project in emulator. Can anyone help me for this issue .

Can look at this extension. enter image description here

Next you need to create a future and call future on Future Builder widget.

  late final future = callPokemon();
class _PokemonHomepageState extends State<PokemonHomepage> {
  Future<List<Pokemons>> callPokemon() async {
    var pokeList = <Pokemons>[];

    var p1 = Pokemons(pokeId: 1, name: "Charmender.png", health: 100, power: 250);
    var p2 = Pokemons(pokeId: 2, name: "squirtle.png", health: 150, power: 300);
    var p3 = Pokemons(pokeId: 3, name: "balbazar.png", health: 300, power: 500);

    pokeList.add(p1);
    pokeList.add(p2);
    pokeList.add(p3);

    return pokeList;
  }

  late final future = callPokemon();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
          AppBar(title: const Text("POKEDEX"), backgroundColor: Colors.green),
      body: FutureBuilder<List<Pokemons>>(
        future: future,
        builder: (context, snapshot) {

Made a pr on git, you can merge it

CodePudding user response:

I suggest you to use flutter_gen (https://pub.dev/packages/flutter_gen) for assets. I recently found this package & its really helpful when using multiple images from assets.

With flutter_gen you can just setup few things one time & you can directly get image widgets from this package.

  1. Setup flutter_gen
 dart pub global activate flutter_gen
  1. Add these runners in your dev dependencies
dev_dependencies:
  build_runner:
  flutter_gen_runner:
  1. Setup path of generated assets file
flutter_gen:
  output: lib/generated/

There are many options in this step. You can check their documentation.

  1. Set image folder path
assets:
    - assets/images/
  1. Put your images in the path added

  2. After doing these steps you just need to run

flutter packages pub run build_runner build

This file will generate an assets file name assets.gen.dart inside the lib/generated folder as we setup in step 3. Note that you have to run this command whenever you change folder name or images to regerenated the assets.gen.dart

Thats it.

When you are done with these steps, you can directly get the images from this assets.gen.dart file like this

import 'package:flutter_boilerplate/generated/assets.gen.dart';

Padding(
  padding: const EdgeInsets.all(20),
  child: SizedBox(
    height: 200, child: Assets.images.cat1.image(width: 200),
  ),
),

The plus benefit is that these assets provided widget support intellisense, so there is no chance for spelling mistake. Plus you directly get a widget from this with all the properties of default Image widget. It also supports advance image types like svg, lottie, flare as well.

  • Related