How Flutter can handle text and text text differences

Question

We are currently in the process of evaluating whether Flutter is a good platform for creating a new application. Therefore, we wanted to make sure that our application looks good on devices with different DPIs. Given that we support both iOS and Android, and the folder structure of iOS and Android to support different image sizes is different, is there a solution on Flutter to achieve this?

The same question applies to text sizes, where we hope to change our text sizes depending on dpi.

Answer 1

Flutter supports resource loading by automatically selecting DPI-dependent resources, see https://flutter.io/assets-and-images/#declaring-resolution-aware-image-assets to find out how the mechanism works.

Flutter should scale the text according to the value of devicePixelRatio. Here is an example application showing how this 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),
      ),
    );
  }
}

This is a modified version of the Flutter application by default, showing the size of the viewing area of ​​the device in pixels, the value of devicePixelRatio, and the size in absolute pixels. See a screenshot of an application running on Android in 3 different resolutions, and then an iOS emulator with a screen resolution of iPhone 7 Plus. Screen Resolution:

1. Android 1440 x 2560, Pixel, device ratio: 3.5
2. Android 1080 x 1920, Device Pixel Ratio: 2.625
3. Android 720 x 1280, : 1,75
4. iOS 1080 x 1920 (iPhone 7 Plus), : 3.0

.

Answer 2

.

https://pub.dartlang.org/packages/flutter_screenutil

( ) .