CODEWITHSUNDEEP
textfieldflutter-web
Maurizio Mancini
Maurizio Mancini

Reputation: 369

Flutter Web - doesn't take a space bar key in TextFields

when I press the space bar, the space does not appear and by continuing to press it, a "." and it no longer allows me to edit the text.

I state that duranter the debug works correctly but using publishing the website does not work anymore. i am using the command: flutter build web --web-renderer html --release for deploy webapp.

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.6 21G115 darwin-arm, locale it-IT) • Flutter version 3.0.5 at /Users/mauriziomancini/FlutterDev/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision f1875d570e (2 mesi fa), 2022-07-13 11:24:16 -0700 • Engine revision e85ea0e79c • Dart version 2.17.6 • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc1) • Android SDK at /Users/mauriziomancini/Library/Android/sdk • Platform android-33, build-tools 33.0.0-rc1 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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 11.0.11+0-b60-7772763)

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

[✓] Connected device (3 available) • iPhone 14 Pro Max (mobile) • 8D8DCB54-F212-4551-9CD4-B367955056BB • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 12.6 21G115 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125

[✓] HTTP Host Availability • All required HTTP hosts are available

• No issues found!

here you will find an excerpt of the code

Scaffold(
          appBar: AppBar(
            backgroundColor: coloreApp,
            title: Image.asset("lib/assets/titolo.png"),
            actions: [
              IconButton(
                onPressed: () async {
                  await FirebaseAuth.instance.signOut();
                  setState(() {});
                },
                icon: const Icon(Icons.login_rounded),
              ),
            ],
          ),
          body: SingleChildScrollView(
              child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(20),
                child: SizedBox(
                  child: Image.asset("lib/assets/icona.png"),
                  height: 80,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(paddingNumber),
                child: TextField(
                  controller: emailController,
                  keyboardType: TextInputType.emailAddress,
                  decoration: inputDecoration("Email"),
                ),
              ),
              
              Padding(
                padding: const EdgeInsets.all(paddingNumber),
                child: TextField(
                  controller: passwordController,
                  obscureText: true,
                  keyboardType: TextInputType.visiblePassword,
                  decoration: inputDecoration("Password"),
                ),
              ),
            ],
          )),
        );

you can find a non-working example on www.leonardowebapp.it

Upvotes: 2

Views: 980

Answers (2)

Nick Khotenko
Nick Khotenko

Reputation: 767

I had the same issue where the debug deployment works but the Flutter web release resulted in the the space input not working in TextFields.

So as suggested I ended up adding this to the MaterialApp in main.dart:

    shortcuts: {
    LogicalKeySet(LogicalKeyboardKey.space): ActivateIntent(),
 },

Upvotes: 1

viJay Singh
viJay Singh

Reputation: 106

Since you can scroll using spacebar also, most probably when you hit space its getting captured by scroll. Check if configuring shortcuts in MaterialApp helps - -

@override
  Widget build(BuildContext context) {
    final shortcuts = Map.of(WidgetsApp.defaultShortcuts);
    shortcuts[LogicalKeySet(LogicalKeyboardKey.space)] = ActivateIntent();

    return MaterialApp(
        shortcuts: kIsWeb? shortcuts : null,
        scrollBehavior: MyCustomScrollBehavior(),
        home: HomeScreen(),
      );
  }

Upvotes: 3

Related Questions