Text fields are broken on web

Steps

Run the code bellow

Expected: a text field filled with initial text

Actual: an empty text field and I cannot type anything in it.

Note

You can run the exact same code on Beta/Dev channel and it works just fine.

code sample

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyHomePage()));

class MyHomePage extends StatelessWidget {
  final txt = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(32),
          child: TextFormField(
            controller: TextEditingController(text: txt),
              maxLines: 4,
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.26.0-13.0.pre.144, on Mac OS X 10.15.7 19H114 darwin-x64, locale en)
    • Flutter version 1.26.0-13.0.pre.144 at /Users/pedromassango/Code/flutter_master
    • Framework revision 2007186d2e (11 hours ago), 2021-01-24 12:54:00 -0800
    • Engine revision fdddf87080
    • Dart version 2.12.0 (build 2.12.0-253.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • 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-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 52.2.5
    • Dart plugin version 203.6912

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.7 19H114 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 87.0.4280.141

! Doctor found issues in 1 category.

@pedromassangocode

Hi @pedromassangocode
Thanks for filing the issue, I can reproduce the regression on macOS, Windows in both HTML and Canvaskit renderers. on the latest master channel but this also seems to affect the previous release releases as well over the weekend.

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: TextField(),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.26.0-13.0.pre.144, on Microsoft Windows [Version 10.0.19042.746], locale en-US)
    • Flutter version 1.26.0-13.0.pre.144 at C:\Users\Taha\Code\flutter_master
    • Framework revision 2007186d2e (12 hours ago), 2021-01-24 12:54:00 -0800
    • Engine revision fdddf87080
    • Dart version 2.12.0 (build 2.12.0-253.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.3)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.8.30804.86
    • Windows 10 SDK version 10.0.18362.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Users\Taha\Code\android-studio
    • 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 1.8.0_242-release-1644-b01)

[✓] VS Code (version 1.52.1)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.18.1

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19042.746]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 87.0.4280.141
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 88.0.705.50

• No issues found!

flutter doctor -v

[✓] Flutter (Channel master, 1.26.0-13.0.pre.144, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-13.0.pre.144 at /Users/tahatesser/Code/flutter_master
    • Framework revision 2007186d2e (13 hours ago), 2021-01-24 12:54:00 -0800
    • Engine revision fdddf87080
    • Dart version 2.12.0 (build 2.12.0-253.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/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-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • macOS (desktop)                    • macos         • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 88.0.4324.96

• No issues found!

Thank you

@TahaTesser

@TahaTesser I'm able to repro this issue with CanvasKit but not with HTML.

Could you share how you are running in HTML mode? If you just do flutter run -d chrome, it runs with the auto mode which uses CanvasKit on desktop browsers. This is a relatively recent change that could be causing some confusion.

Another way you could verify is by looking at the <body> tag of the page. There should be a flt-renderer attribute that tells you which mode you are running on:

Deduplicating with #74603

@mdebbar

@mdebbar
I've been using -dart-define=FLUTTER_WEB_USE_SKIA=false in my IDE, which does set canvaskit to false on beta but this doesn't work on master due to recent changes.
Thanks for bringing that to my attention.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Text fields are broken on web #74621

Steps

Note

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Text fields are broken on web #74621

Description

Steps

Note

Activity

TahaTesser commented on Jan 25, 2021

mdebbar commented on Jan 25, 2021

yjbanov commented on Jan 25, 2021

TahaTesser commented on Jan 27, 2021

github-actions commented on Aug 6, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions