Asset images File path in flutter?

Question

I wanted to ship an app with pre-populated Sqflite database(which can be modified by user).

I have added like 100 images as assets and need to read them as File Images instead of asset images (so it will easy to read & load the images in different screens, without copying the images).

So need to know how to get the file path (path will be hardcoded in sqflite databse) of images stored in Assets folder.

Push in the right direction is appreciated.

score 0 · Answer 1 · answered Oct 14 '19 at 08:43

0

So you want to read the images from the Database and load them to the screen instead of reading them from the application assets ?. I think Flutter loads them from the application assets faster and without the overhead of the Database query.

answered Oct 14 '19 at 08:43

Jalil.Jarjanazy

839
1
9
22

I wanted to read the images from application assets, but not using image.assets/memory, but with image.file class. – sharath Oct 14 '19 at 10:58
I think you can load the images from the assets because if you do it from a database, the images cannot exceed 2mb, also the loading from the assets is faster, you don't have to have everyone's name, just name them the numbers and you generate a dynamic list up to the amount of images then with the assets.image() you can load them and show it in your ui – Elvis Salabarria Aquino Aug 31 '23 at 19:50

chunhunghan · Answer 2 · 2019-10-14T09:07:12.120

Keep path in sqflite like 'assets/images/1.png' and access with rootBundle
You do not need absolute path such as /sdcard0/....
Keep only assets path

ByteData imageData1 = await rootBundle.load('assets/images/1.png');

Use List of ByteData to keep images

List<ByteData> imageList = [];

With ListView display image with Image.memory

return Image.memory(imageList[index].buffer.asUint8List());

full code

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  List<ByteData> imageList = [];

  void _incrementCounter() async{
    ByteData imageData1 = await rootBundle.load('assets/images/1.png');
    ByteData imageData2 = await rootBundle.load('assets/images/2.png');
    print(imageData1.toString());
    imageList.add(imageData1);
    imageList.add(imageData2);

    setState(() {
      _counter++;

      print(imageList.length.toString());
    });



  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: imageList.length,
        itemBuilder: (context, index) {
          return Image.memory(imageList[index].buffer.asUint8List());
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

thanks for the answer, but my case is quite different, our app will have asset images & also there is provision for the user to add images, both will be shown in same screen (with same List view builder), and these images are used between 03 screens, each with different sqflite databases, and I am using Image.file everywhere in my app (which i felt is quite good). So i am hoping for any workaround using image.file. — sharath, Oct 14 '19 at 10:55

score 0 · Answer 3 · answered Jan 11 '21 at 11:06

I also encountered this situation since I wanted to prepopulate my Hive database with images stored in assets and my app uses FileImage to load the images.

I found out that you can't reference a file or an image path located in Assets since it is ever changing, so better yet:

Load the image/file using rootBundle.load
Duplicate the image/file using writeAsBytesSync
Use the path of the duplicated image and load it from there

reference

You can also use Device File Explorer in Android Studio to inspect where the assets folder is located and see for yourself if it is changing. In my experience it is located in code_cache > build > flutter_assets > assets.

Asset images File path in flutter?

3 Answers3