How to pick an asset according to screen density (DPI size)?

Question

I'm trying to load icons according to display density in my flutter app. how to load dynamically according to screen density(hdpi,xhdpi,xxhdpi..).

Answer 1

After searching for many hours, as per the official documenation, flutter depends on devicePixelRatio which is:

Device Pixel Ratio (DPR) is the relationship between physical 
hardware-based pixels and Device-Independent Pixels which are an abstraction.

For Android:

Denisty   Pixel Ratio
mdpi        1.0x
hdpi        1.5x
xhdpi       2.0x
xxhdpi      3.0x
xxxhdpi     4.0x

For Ios:

For Flutter:

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

Where M and N are numeric identifiers that correspond to the nominal resolution of the images contained within. In other words, they specify the device pixel ratio that the images are intended for.

The main asset is assumed to correspond to a resolution of 1.0. For example, consider the following asset layout for an image

So it depends on how many resolutions you have to create different subdirectories of your assets folder, so my suggestion is to create the following sub-directories folders to cover all DPRs:

.../image.png  ---> default for android mdpi(1.0x) and ios @1x
.../1.5x/image.png  ---> default for android hdpi(1.5x)
.../2.0x/image.png  ---> default for android xhdpi(2.0x) and ios @2x
.../3.0x/image.png  ---> default for android xxhdpi(3.0x) and ios @3x
.../4.0x/image.png  ---> default for android xxxhdpi(4.0x)

In Flutter project:

In pubspec.yaml just add the default image path:

  assets:
    - assets/images/image.png

If anyone needs to use SVG, just check this package:

SvgPicture.asset(assetName)

Answer 2

Flutter supports loading of assets by automatically choosing DPI dependent resources, see https://flutter.dev/docs/development/ui/assets-and-images#resolution-aware for how the mechanism works.

Flutter should scale text according to devicePixelRatio value. Here is an example app showing you how that works:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  MediaQueryData queryData;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    queryData = MediaQuery.of(context);
    double devicePixelRatio = queryData.devicePixelRatio;
    TextStyle style38 = new TextStyle(
      inherit: true,
      fontSize: 38.0,
    );
    TextStyle style20 = new TextStyle(
      inherit: true,
      fontSize: 20.0,
    );
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          new Text(
            'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
            style: style38,
          ),
          new Text(
            'size (pixels): w=${queryData.size.width * devicePixelRatio}, h=${queryData.size.height * devicePixelRatio}',
            style: style20,
          ),
          new Text(
            'devicePixelRatio: $devicePixelRatio',
            style: style20,
          ),
          new Text(
            'size: w=${queryData.size.width}, h=${queryData.size.height}',
            style: style20,
          ),
          new Text(
            'textScaleFactor: w=${queryData.textScaleFactor}',
            style: style20,
          ),
        ],
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

It's a modified version of the default Flutter app showing the device viewport size in pixels, the devicePixelRatio value, the size in absolute pixels. See the screenshot of the app running on Android in 3 different resolutions, and then iOS emulator with iPhone 7 Plus screen resolution. The screen resolutions are:

1. Android 1440 x 2560, devicePixelRatio: 3.5
2. Android 1080 x 1920, devicePixelRatio: 2.625
3. Android 720 x 1280, devicePixelRatio: 1.75
4. iOS emulator 1080 x 1920 (iPhone 7 Plus), devicePixelRatio: 3.0

The text on all devices is scaled according to the actual screen size and logical viewport.

Android 1440 x 2560, devicePixelRatio: 3.5

ets-and-images/#declaring-resolution-aware-image-assets