Flutter Keyboard blendet Textfelder aus

Lesezeit: 5 Minuten

Benutzeravatar von Nirodya Gamage
Nirodya Spiel

Ich bin neu im Flattern. Ich habe ein Formular mit einem Textfeld hinzugefügt und wenn ich auf das Textfeld geklickt habe und die Tastatur kommt, geht das Textfeld nach oben.

Das ist mein Code:

Widget build(BuildContext context) {

MediaQueryData mediaQuery = MediaQuery.of(context);
return new Scaffold(
  body:  new Container(
      color: Colors.purple,
      constraints: new BoxConstraints.expand(),
      padding: EdgeInsets.only(top: 10.0,left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom, ),
      child: SingleChildScrollView(
        child: Container(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 12.0),
                  Text(
                    'What is your Business Name?',
                    style: TextStyle(fontSize: 24.0),
                  ),
                  AppForm(),
                ],
              ),
            padding: EdgeInsets.only(left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30.0)),
              color: Colors.white,
                ),
              )
          )
      ),
    );
  }

Dies ist das Ergebnis, ohne die Tastatur zu öffnen:
Bild ohne Tastatur

Dies ist das Bild nach dem Öffnen der Tastatur:
Bild nach dem Öffnen der Tastatur


Hier ist meine Flatterdoktor-Ausgabe.

Doctor summary (to see all details, run flutter doctor -v): [√] Flutter 
(Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale 
en-US) [√] Android toolchain - develop for Android devices (Android SDK 
28.0.0) [√] Android Studio (version 3.1) [!] VS Code, 64-bit edition (version 
1.25.1) [!] Connected devices ! No devices available ! Doctor found issues in 
2 categories.

eine Idee, wie man das beheben kann?

  • Hast du die neuste Version von Flatter? Was macht flutter doctor sagen?

    – Bostrot

    14. Juli 2018 um 8:25 Uhr

  • Hier ist meine Flatterdoktor-Ausgabe. Zusammenfassung des Arztes (um alle Details anzuzeigen, führen Sie Flutter Doctor -v aus): [√] Flutter (Channel Beta, v0.5.1, unter Microsoft Windows [Version 10.0.17134.165]Gebietsschema en-US) [√] Android-Toolchain – Entwicklung für Android-Geräte (Android SDK 28.0.0) [√] Android Studio (Version 3.1) [!] VS-Code, 64-Bit-Edition (Version 1.25.1) [!] Verbundene Geräte ! Keine Geräte verfügbar ! Der Arzt fand Probleme in 2 Kategorien.

    – Nirodya Gamage

    14. Juli 2018 um 12:51 Uhr


  • Ich würde dir empfehlen, zum Channel Flatter Master zu gehen flutter channel master was derzeit ist v5.7 und reinigen Sie auch Ihr Projekt mit flutter clean und Invalidate caches and restart

    – Bostrot

    14. Juli 2018 um 13:05 Uhr

  • Das gesehen ?? didierboelens.com/2018/04/…

    – TheAshwaniK

    17. Dezember 2019 um 10:27 Uhr


Benutzeravatar von songoku1610
songoku1610

 new Scaffold(
      appBar: new AppBar(
          ...
      resizeToAvoidBottomInset: true,
      ....

Behobenes Problem: Textfeld wurde von der Tastatur ausgeblendet

  • Danke für deine Antwort! Ich habe viele Antworten gesehen, die besagten, diese Eigenschaft als einzurichten falseaber eigentlich ist der Wert true damit funktioniert es wie gewünscht. Ö/

    – ebragaparah

    1. August um 21:24 Uhr

Diese Antwort ist nicht spezifisch für die obige Frage, kann aber für diejenigen nützlich sein, die immer noch Probleme damit haben, dass die Tastatur das ausgewählte Textfeld abdeckt, egal was sie tun. Ich bin auf diese Seite gelangt, als ich versuchte, ein solches Problem zu lösen.

Vor dem Problem hatte ich einige Änderungen vorgenommen, um meinen Begrüßungsbildschirm beim Start der App zu verbessern. Auf Empfehlung von jemandem hatte ich die folgende Zeile in die aufgenommen <resources><style> Abschnitt der Datei styles.xml im Ordner android/app/src/main/res/values

<item name="android:windowFullscreen">true</item>

Dies hatte den unerwarteten Effekt, dass alle Felder in der Haupt-App nicht mehr nach oben gescrollt wurden, wenn die Tastatur angezeigt wurde. Für manche mag das offensichtlich sein, für mich war es das nicht.

Hoffe, diese Info hilft jemandem.

  • Danke dir, das hat geholfen

    – Schütteln

    19. August 2019 um 17:14 Uhr

  • Danke. Ich verbringe viel Zeit damit, nach diesem Problem zu suchen, und nichts funktioniert. Aber ich verstehe nicht, warum der Vollbildmodus diesen Fehler verursacht.

    – Clairton Luz

    12. März 2020 um 18:01 Uhr

  • vielen Dank dafür, ich habe alle Tricks mit Widgets ausprobiert, aber nichts hat funktioniert.

    – hewa jalal

    5. Mai 2020 um 0:04 Uhr

  • Vielen Dank an dich, Mann. Ich habe gerade alles Notwendige getan, um das Problem zu beheben, und festgestellt, dass es vor der Implementierung des Startbildschirms funktioniert hat.

    – Virto111

    11. Mai 2020 um 12:50 Uhr

  • Dies hat mein Problem in der gesamten App behoben

    – Vamsi

    17. Mai 2020 um 14:11 Uhr

Benutzeravatar von Aman Malhotra
Aman Malhotra

Dies war bei mir der Fall. Sie wickeln definitiv ein Gerüst in ein anderes Gerüst ein. Es sollte nur ein Scaffold-Widget in Ihrer Flutter-App geben, dh das Hauptlayout. Entfernen Sie einfach alle Ahnengerüste, die Sie haben, und behalten Sie nur ein Gerüst. Wickeln Sie kein Gerüst in ein anderes Gerüst ein. Trotzdem können Sie ein Gerüst in einen Container einwickeln.

Stellen Sie in Ihrer main.dart-Datei sicher, dass Sie dies nicht tun:

✖✖

return Scaffold(
body : YourNewFileName(),
);

Tun Sie dies trotz des obigen Codes:- ✔✔

return YourNewFileName();

  • @Nirodya Gamage kannst du die main.dart-Datei posten, damit ich überprüfen kann, wo der Fehler liegt?

    – Aman Malhotra

    14. Juli 2018 um 13:59 Uhr

  • es tut mir leid, dass du recht hast! Ich habe ein weiteres Gerüst auf einem Hintergrund gefunden. Ich habe einen entfernt und es funktioniert. Vielen Dank!

    – Nirodya Gamage

    14. Juli 2018 um 15:07 Uhr

  • Großartig . Weil mir das gleiche passiert ist und ich es so gelöst habe.

    – Aman Malhotra

    14. Juli 2018 um 16:48 Uhr

  • Ich habe Gerüst im Gerüst. Es erfordert, dass ich Tabbarview hinzufüge. Was ist die Lösung dafür.

    – Malavan

    15. Mai 2020 um 11:16 Uhr

  • Die Registerkartenleiste kann auch mit einem einzelnen Gerüst hinzugefügt werden @dominic_torreto. Wenn Sie jetzt ein Gerüst im Gerüst haben, erhalten Sie einige Fehler wie diesen. Sie sollten also die Struktur ändern, mit der Sie Ihre App entwerfen.

    – Aman Malhotra

    15. Mai 2020 um 13:37 Uhr


Benutzeravatar von Ya Si
Ja Si

resizeToAvoidBottomPadding ist stattdessen veraltet resizeToAvoidBottomInset: true

Sie können das Widget, das niemals von der Tastatur verdeckt werden soll, einfach in eine Polsterung einwickeln, wie folgt:

Padding(
         child: YourWidget()
         padding: EdgeInsets.only(
         bottom: MediaQuery.of(context).viewInsets.bottom)); 

Benutzeravatar von Javeed Ishaq
Javeed Ishaq

<item name="android:windowFullscreen">true</item>

Entfernen der obigen Zeile aus

android/app/src/main/res/values/styles.xml

Meine App wurde so korrigiert, dass das Eingabefeld automatisch nach oben scrollt, um auf Tastaturen geöffnet werden zu können

Danke @GrahamD

Geben Sie hier die Bildbeschreibung ein

Sie sollten hinzufügen SingleChildScroolView in Ihr Scaffold und hinzufügen reverse: true in Ihre SingleChildScoolView

Scaffold(
body: SingleChildScrollView(
          reverse: true,
          child: Container()));

  • Funktioniert bei mir nicht (

    – Oleg Jablokow

    1. September um 14:17 Uhr

  • @OlegYablokov könnten Sie bitte Ihren Code teilen, damit ich ihn überprüfen kann.

    – Timur Turbil

    1. September um 20:26 Uhr

  • Ich habe das Problem bereits gelöst und eine Antwort auf dieser Seite gepostet, aber danke!

    – Oleg Jablokow

    2. September um 16:55 Uhr


1394770cookie-checkFlutter Keyboard blendet Textfelder aus

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy