Text overflowing in physical Android device

[yuriescl]

This code makes the text overflow the widget in physical Android devices:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:auto_size_text_field/auto_size_text_field.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> {
  final TextEditingController _inputController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    _inputController.text = 'test';
    return Scaffold(
        body: Container(
            alignment: Alignment.center,
            width: double.maxFinite,
            child: AutoSizeTextField(
              controller: _inputController,
              maxLines: 1,
              decoration: InputDecoration(
                border: InputBorder.none,
                contentPadding: EdgeInsets.all(0),
                hintText: '0',
              ),
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              textAlignVertical: TextAlignVertical.center,
              style: TextStyle(color: Color(0xff1c278e), fontSize: 55),
              textAlign: TextAlign.left,
            )));
  }
}

Screenshot of physical Android screen (Android 10) running the above code:

The same code works in Android Emulator (tested on Pixel 4 XL API 28), there's no overflow there:

Version tested: auto_size_text_field: ^0.1.7

$ flutter doctor -v
[✓] Flutter (Channel beta, 2.1.0-12.2.pre, on Linux, locale en_US.UTF-8)
    • Flutter version 2.1.0-12.2.pre at /home/yuri/Programs/flutter
    • Framework revision 5bedb7b1d5 (3 weeks ago), 2021-03-17 17:06:30 -0700
    • Engine revision 711ab3fda0
    • Dart version 2.13.0 (build 2.13.0-116.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/yuri/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /home/yuri/Android/Sdk
    • Java binary at:
      /home/yuri/Programs/android-studio-ide-201.7042882-linux/jre/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /home/yuri/Programs/android-studio-ide-201.7042882-linux
    • Flutter plugin version 55.0.1
    • Dart plugin version 201.9335
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.52.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.20.0

[MisaGu]

i have similar problem - the plugin doesn't account for cursor width and contentPadding paraps and so part of a content hidden ( overflow | runs out of the view bounady ) . . . 😥

value: 123 -- the space on the right is 10px cursor ( it will look the the same if padding is provided)

[lzhuor]

@yuriescl @MisaGu May I ask was the text configured to scale in the Android settings on the physical device? Thank you!

[yuriescl]

@lzhuor If you mean accessibility scale, it's disabled and the size is at the default (middle):

The system font settings are also in default:

[antb123]

I also get this issue running the code on a stock Huawei P30 lite with a flutter based app...

[lzhuor]

Hi @antb123 and @yuriescl may I ask did you manage to figure out the root cause? Could you please also try auto_size_text package and see if it works for displaying static texts?