Flutter -- Tutorial Teil 8 TextField Part 2 InputDecoration 1

Juni 16, 2019

Textfelder

In Teil 1 zu TextField haben wir uns schon mit onChanged: befasst. Hier können wir eine Callback Funktion implementieren, die immer dann aufgerufen wird, wenn am Textfeld eine Änderung eingetreten ist. Es gibt hier noch weitere Callback Funktionen, auf die ich in einem Anderen Artikel eingehen werde. Aber bevor wir uns dem Thema dieses Artikels widmen:

Was ist eine Callback Funktion ?

Die Informatik nennt Funktionen, die einer anderen Funktion als Parameter übergeben werden, callback function – Rückruffunktion. callback-Funktionen werden nach der Ausführung einer anderen Funktion ausgeführt – daher der Name callback

InputDecoration

Flutter gibt uns einige Möglichkeiten das Text Feld zu gestalten. Eine der oft genutzten ist der hintText. Er weißt den Benutzer daraufhin, was für eine Eingabe von ihm erwartet wird.

TextField(
 decoration: InputDecoration(
      hintText: "Passwort:",
)

Das erreichen wir, indem wir unser TextField um den Eintrag decoration: erweitern. An dieser Stelle können wir InputDecoration verwenden, was uns einige Möglichkeiten eröffnet.

Container(
 width: 200.0,
  child: TextField(
   decoration: InputDecoration(
    hintText: "Username:",
     icon: Icon(
      Icons.person,
  ),
 ),
 ),
),

Mit dem Code oben implementieren wir zum Beispiel, das unser Textfeld mit einem Icon beginnt. Wir können dabei auf die in Flutter "mitgelieferten" Icons zurück greifen.

Für diejenigen die den Code nachvollziehen möchten hier die main.dart Datei:

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:tutflutter_002/meine_widgets.dart';

void main() {
  debugPaintSizeEnabled=false;
  runApp(MeinDemo());
}

class MeinDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Mein Demo",
      theme:ThemeData(
        primaryColor: Colors.black,
      ),
      home: MeineHomePage1(),
    );
  }
}

Das einzige, was es zum Code oben zu sagen gibt, ist der Import von rendering.dart. Der bool Wert debugPaintSizeEnabled, wenn auf true gesetzt, unterstützt uns beim debuggen. Das rendering.dart File enthält noch weitere Möglichkeiten dieser Art, aber das ist ein Thema für sich.

Hier noch das Widget MeineHomePage1():

class MeineHomePage1 extends StatefulWidget {
  @override
  _MeineHomePage1State createState() => _MeineHomePage1State();
}

class _MeineHomePage1State extends State<MeineHomePage1> {

  String textfeldInhalt ='';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "Mein kleines Demo",
        ),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              
              Container(
              width: 200.0,
               child: TextField(
                 decoration: InputDecoration(
                   hintText: "Username:",
                   icon: Icon(
                     Icons.person,
                   ),
                 ),
               ),
               ),
               Container(
              width: 200.0,
               child: TextField(
                 decoration: InputDecoration(
                   hintText: "Passwort:",
                   icon: Icon(
                    Icons.security, 
                   ),
                 ),
               ),
               ),
               ],
          ),
        ],
      ),
    );
  }
}

Wie erwähnt enthält der Code für die InputDecoration der TextField's jetzt einen icon: Eintrag. Links sehen wir das Ergebnis. Das Icon mit dem Focus (Username) und das Icon ohne Fokus, ausgegraut, (Passwort).
Hier sollte man hinzufügen, das wir natürlich nicht auf die Flutter Icons beschränkt sind. Wir können auch "eigene" Icons in Flutter implementieren...

Nehmen wir mal an, jetzt sind wir gaaanz verrückt, und wir möchten den Hinweistext für Username in weißer Schrift auf blauem Hintergrund und das Passwort in weißer Schrift mit Hintergrundfarbe orange. Dazu müssen wir den Code oben wie folgt abändern:

Container(
              width: 200.0,
               child: TextField(
                 decoration: InputDecoration(
                   hintText: "Username:",
                   icon: Icon(
                     Icons.person,
                   ),
                   hintStyle: TextStyle(
                     backgroundColor: Colors.blue,
                     color: Colors.white,
                   ),
                 ),
               ),
               ),
               Container(
              width: 200.0,
               child: TextField(
                 decoration: InputDecoration(
                   hintText: "Passwort:",
                   icon: Icon(
                    Icons.security, 
                   ),
                   hintStyle: TextStyle(
                     backgroundColor: Colors.orange,
                     color: Colors.white,
                   ),
                 ),
               ),
               ),

Der Code oben hat das folgende Ergebnis:

Das Bild oben zeigt die zwei Textfelder, wobei das Feld Passwort den Fokus hat, aber noch keine Eingabe erfolgt ist.
Das war es für diesen Post. Bis bald !

Dieses Blog durchsuchen

Flutter, Dart und mehr !