flutter Text alignment bug in mobile web browser, but it seems only when the

Steps to Reproduce

Preview URL.

Please preview on the mobile device, because it works well in the PC browser

Preview URL use flutter build web publish

Example preview:

Expected results: Actual results:

Reproduce code:

minimal code sample

import 'package:flutter/material.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, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 1;
  bool showFlutterText = false;

  void _incrementCounter() {
    if (_counter < 16) 
      setState(() {
        _counter++;
      });
  }

  void _decreaseCounter(){
    if (_counter > 0) 
      setState(() {
        _counter--;
      });
  }

  void _onSwitchShowFlutterText(){
    setState(() {
      showFlutterText = !showFlutterText;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(height: 25,),

                if (showFlutterText)
                  Text("Flutter"),

                for (double i = 14; i > 0; i -= 2) 
                  _buildTextTestWidget(_counter + i)
        
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FloatingActionButton(
            onPressed: (){},
            backgroundColor: Colors.green[400],
            tooltip: 'Counter',
            child: Text('$_counter', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w800),),
          ),
          SizedBox(height: 25,),
          FloatingActionButton(
            onPressed: _onSwitchShowFlutterText,
            tooltip: 'Show Flutter Text',
            child: Icon(!showFlutterText ? Icons.visibility : Icons.visibility_off),
          ),
          SizedBox(height: 25,),
          FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 25,),
          FloatingActionButton(
            onPressed: _decreaseCounter,
            tooltip: 'Decrease',
            child: Icon(Icons.remove),
          ),
        ],
      ), 
    );
  }

  Widget _buildTextTestWidget(double fontSize){
    fontSize = fontSize > 16 ? 16 : fontSize;
    return Container(
      width: 210,
      height: 50,
      margin: EdgeInsets.symmetric(vertical: 10),
      decoration: BoxDecoration(
        color: Colors.green[400],
        borderRadius: BorderRadius.circular(10)
      ),
      child: Center(
        child: DecoratedBox(
          decoration:BoxDecoration(
            color: Colors.amber,
          ),
          child: Text('Flutter Test [fontSize:$fontSize]', style: TextStyle(
            color: Colors.black,
            fontSize: fontSize,
            fontWeight: FontWeight.w800
          ),),
        ),
      ),
    );
  }
}
flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale zh-Hans-CN)
    • Flutter version 2.2.3 at /Applications/flutter
    • Framework revision f4abaa0735 (6 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/jianxingwangluo/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/jianxingwangluo/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 49.0.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.59.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Proxy Configuration
    • HTTP_PROXY is set
    • NO_PROXY is localhost,127.0.0.1
    • NO_PROXY contains 127.0.0.1
    • NO_PROXY contains localhost

[✓] Connected device (2 available)
    • iPhone 12 Pro (mobile) • 9BA432A0-2010-40E2-8819-BA9082870528 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome
      92.0.4515.131

• No issues found!

1 thought on “flutter Text alignment bug in mobile web browser, but it seems only when the

  1. Hi @mingsnx
    Thanks for filing the issue,

    You see the different desktop and mobile, this is rendered using different renderers. see this
    So you’re using canvaskit on desktop and html on mobile you can reproduce on desktop the issue if you specify renderer

    Stable – Canvaskit

    Screenshot 2021-08-16 at 18 08 36

    Stable – HTML

    Screenshot 2021-08-16 at 18 09 33

    Beta – HTML

    Screenshot 2021-08-16 at 18 11 04

    stable beta
    html html

    Check flutter doctor -v outputs for each channel below

    flutter doctor -v

    [✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5304g darwin-x64, locale en-GB)
        • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
        • Framework revision f4abaa0735 (7 weeks ago), 2021-07-01 12:46:11 -0700
        • Engine revision 241c87ad80
        • Dart version 2.13.4
    
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
        • Android SDK at /Users/tahatesser/Code/SDK
        • Platform android-31, build-tools 30.0.3
        • ANDROID_HOME = /Users/tahatesser/Code/SDK
        • Java binary at: /Users/tahatesser/Code/jdk/Contents/Home/bin/java
        • Java version OpenJDK Runtime Environment Temurin-11.0.12+7 (build 11.0.12+7)
        • All Android licenses accepted.
    
    [✓] Xcode - develop for iOS and macOS
        • Xcode at /Applications/Xcode-beta.app/Contents/Developer
        • Xcode 13.0, Build version 13A5212g
        • CocoaPods version 1.10.1
    
    [✓] Chrome - develop for the web
        • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [!] Android Studio (version 2020.3)
        • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/Android Studio.app/Contents
        • Flutter plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/9212-flutter
        • Dart plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/6351-dart
        ✗ Unable to find bundled Java version.
        • Try updating or re-installing Android Studio.
    
    [✓] VS Code (version 1.59.0)
        • VS Code at /Applications/Visual Studio Code.app/Contents
        • Flutter extension version 3.25.0
    
    [✓] Connected device (3 available)
        • iPhone 12 (mobile) • 7CC8A747-CD39-4C42-871C-2D1CCEAE2AE2 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
        • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.0 21A5304g darwin-x64
        • Chrome (web)       • chrome                               • web-javascript • Google Chrome 92.0.4515.131
    
    ! Doctor found issues in 1 category.

    [✓] Flutter (Channel beta, 2.5.0-5.1.pre, on macOS 12.0 21A5304g darwin-x64, locale en-GB)
        • Flutter version 2.5.0-5.1.pre at /Users/tahatesser/Code/flutter_beta
        • Upstream repository https://github.com/flutter/flutter.git
        • Framework revision 65cf7de5f4 (5 days ago), 2021-08-11 15:48:01 -0700
        • Engine revision fbeb7e22bd
        • Dart version 2.14.0 (build 2.14.0-377.4.beta)
    
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
        • Android SDK at /Users/tahatesser/Code/SDK
        • Platform android-31, build-tools 30.0.3
        • ANDROID_HOME = /Users/tahatesser/Code/SDK
        • Java binary at: /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/Android Studio.app/Contents/jre/Contents/Home/bin/java
        • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
        • All Android licenses accepted.
    
    [✓] Xcode - develop for iOS and macOS
        • Xcode at /Applications/Xcode-beta.app/Contents/Developer
        • Xcode 13.0, Build version 13A5212g
        • CocoaPods version 1.10.1
    
    [✓] Chrome - develop for the web
        • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [✓] Android Studio (version 2020.3)
        • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/Android Studio.app/Contents
        • Flutter plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/9212-flutter
        • Dart plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/6351-dart
        • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    
    [✓] Android Studio (version 2020.3)
        • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/Android Studio.app/Contents
        • Flutter plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/9212-flutter
        • Dart plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/6351-dart
        • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    
    [✓] VS Code (version 1.59.0)
        • VS Code at /Applications/Visual Studio Code.app/Contents
        • Flutter extension version 3.25.0
    
    [✓] Connected device (3 available)
        • iPhone 12 (mobile) • 7CC8A747-CD39-4C42-871C-2D1CCEAE2AE2 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
        • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.0 21A5304g darwin-x64
        • Chrome (web)       • chrome                               • web-javascript • Google Chrome 92.0.4515.131
    
    • No issues found!
    

    : No Issue : Issue reproduced

    Can you please upgrade to the latest beta and try again
    Execute the following commands to upgrade
    flutter channel beta
    flutter upgrade --force
    flutter doctor -v

    Closing as fixed. If you disagree, please write in the comments and I will reopen it.
    Thank you

Comments are closed.