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

I cant see my images in my flutter project

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.
https://github.com/AlejandroTaichu/Pokedex.git

I want to see images in my project when I was opened my project.I am new on programming so I cant fix that.

Tags:

3

Answers


  1. 0

    You have forgotten extension of image in your code

    child: Image.asset("images/${pokemon.name}")),

    Change to below code

    child: Image.asset("images/${pokemon.name}.png")),

    Or add image extension(.png) in names of pokeList

    Login or Signup to reply.
  2. 0

    You need to change the image name(path) according to the assets image path include the image type.

    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

    Login or Signup to reply.
  3. 0

    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.

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

Back To Top
Search