Die Anleitung zu Flutter TextButton

TextButton
Examples
child
onPressed
onLongPress
style
autofocus
focusNode
clipBehavior

1. TextButton

In Flutter wird TextButton verwendet, um eine Button zu erstellen, die einen Text enthält, mit der Idee, standardmäßig eine flache Button und eine Höhe von 0 zu erstellen. Tatsächlich können Sie den Stil jedoch mithilfe des Property style anpassen.

Hinweis: Früher haben wir zum Erstellen einer Klasse FlatButton verwendet. Seit Oktober 2020 ist diese Klasse jedoch als veraltet markiert und durch die Klasse TextButton ersetzt worden. Dies ist eine der Bemühung des Entwicklungsteams Flutter, die Flutter API zu vereinfachen und konsistent zu machen.

TextButton Constructor:

TextButton Constructor

const TextButton({Key key,
   @required Widget child,
   @required VoidCallback onPressed,
   VoidCallback onLongPress,
   ButtonStyle style,
   FocusNode focusNode,
   bool autofocus: false,
   Clip clipBehavior: Clip.none
 }
)

TextButton kann in Symbolleisten, Dialogen usw. verwendet werden. Manchmal müssen Sie jedoch den Stil anpassen, um Verwirrung für den Benutzer zu vermeiden. Wenn Sie es als flache Schaltfläche verwenden, sollten Sie es an einer geeigneten Stelle mit dem Kontext plaziert und nicht den TextButton platzieren, in dem es mit anderen Inhalten gemischt wird, z.B in die Mitte der Liste

TextButton.icon Constructor:

TextButton.icon Constructor

TextButton.icon(
    {Key key,
    @required Widget icon,
    @required Widget label,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus,
    Clip clipBehavior}
)

Wenn die beide Funktionen callback: onPressed und onLongPress nicht angegeben wird, sind der TextButton deaktiviert und reagiert nicht, wenn er berüht wird.

2. Examples

Unten finden Sie ein Beispiel mit zwei TextButton. Einer ist der einfachste TextButton (der nur eine Textbezeichnung enthält) und der andere ist der TextButton mit backgroundColor und foregroundColor.

main.dart (ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(

        appBar: AppBar(
          title: Text("Flutter TextButton Example")
        ),
        body: Center (
            child: Column (
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                TextButton (
                  child: Text("Default TextButton"),
                  onPressed: () {},
                ),
                TextButton (
                    child: Text("TextButton With Background and Foreground Color"),
                    onPressed: () {},
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(Colors.greenAccent),
                      foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
                    )
                )
              ],
            )
        )
    );
  }
}

Der praktische Weg, einen TextButton mit einem Symbol zu erstellen, ist die Verwendung des Konstrukturs TextButton.icon.

TextButton.icon (
  icon: Icon(Icons.settings),
  label: Text("Settings"),
  onPressed: () {},
)

3. child

child ist das wichtigste Property von TextButton. In den meisten Anwendungsfällen handelt es sich um ein Objekt Text.

@required Widget child

Ein einfachstes Beispiel mit child ist ein Objekt Text:

TextButton (
  child: Text("Default TextButton"),
  onPressed: () {},
)

Durch Zuweisen eines Objekts Row für das Property child können Sie einen komplexen TextButton erstellen, z.B Icon und Text.

Die Anleitung zu Flutter Row

child (ex1)

// 1 Icon and 1 Text
TextButton (
  child: Row (
    children: [
      Icon(Icons.settings),
      SizedBox(width: 5),
      Text("Settings")
    ],
  ) ,
  onPressed: () {},
)

// 2 Icons and 1 Text
TextButton (
  child: Row (
    children: [
      Icon(Icons.directions_bus),
      Icon(Icons.train),
      SizedBox(width: 5),
      Text("Transportation")
    ],
  ) ,
  onPressed: () {},
)

4. onPressed

onPressed ist eine Funktion callback. Es wird aufgerufen, wenn der Benutzer auf Button klickt. Insbesondere tritt das Ereignis onPressed auf wenn der Benutzer zwei Vorgänge einschließlich Drücken und Loslassen der Button.

@required VoidCallback onPressed

Hinweis: Wenn die beiden Property: onPressed und onLongPress nicht angegeben sind, wird die Button deaktiviert und reagiert nicht, wenn sie berührt wird.

main.dart (onPressed - ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  int pressCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
          title: Text("Flutter TextButton Example"),
        ),
        body: Center (
          child:  TextButton (
              child: Text("Click Me! " + this.pressCount.toString()),
              onPressed: onPressHander
          ),
        )
    );
  }

  onPressHander()  {
    this.setState(() {
      this.pressCount++;
    });
  }

}

5. onLongPress

onLongPress ist die Funktion callback. Es wird aufgerufen, wenn der Benutzer die Button länger als Milisekunden LONG_PRESS_TIMEOUT drückt. Das Ereignis Long-Press tritt in der Milisekunde LONG_PRESS_TIMEOUT auf, wenn der Benutzer es drückt, und während dieser Zeit (0 --> LONG_PRESS_TIMEOUT) bewegt der Benutzer den Cursor nicht.

VoidCallback onLongPress

Wenn Sie für eine Funktionen callback: onPressed und onLongPress für eine Button zuweisen, kann in jeder Situation höchstens eine Funktion aufgerufen werden.

LONG_PRESS_TIMEOUT

500 milliseconds

Wenn der Benutzer vor der Zeit LONG_PRESS_TIMEOUT nach unten drückt und loslässt, tritt nur das Ereignis onPressed auf.

Wenn der Benutzer länger als LONG_PRESS_TIMEOUT Milisekunden darauf drückt, tritt das Ereignis onLongPress auf und Flutter ignoriert das danach stattfindende Ereignis onPressed.

Zum Beispiel:

main.dart (onLongPress - ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  int pressedCount = 0;
  int longPressCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
          title: Text("Pressed: " + this.pressedCount.toString()
              +" --- Long Press: " + this.longPressCount.toString()),
        ),
        body: Center (
          child:  TextButton (
              child: Text("Test Me"),
              onPressed: onPressHander,
              onLongPress: onLongPressHandler
          ),
        )
    );
  }

  onPressHander()  {
    this.setState(() {
      this.pressedCount++;
    });
  }

  onLongPressHandler()  {
    this.setState(() {
      this.longPressCount++;
    });
  }

}

6. style

Das Property style wird benutzt, um den Stil von TextButton anzupassen.

ButtonStyle style

ButtonStyle constructor

const ButtonStyle(
    {MaterialStateProperty<TextStyle> textStyle,
    MaterialStateProperty<Color> backgroundColor,
    MaterialStateProperty<Color> foregroundColor,
    MaterialStateProperty<Color> overlayColor,
    MaterialStateProperty<Color> shadowColor,
    MaterialStateProperty<double> elevation,
    MaterialStateProperty<EdgeInsetsGeometry> padding,
    MaterialStateProperty<Size> minimumSize,
    MaterialStateProperty<BorderSide> side,
    MaterialStateProperty<OutlinedBorder> shape,
    MaterialStateProperty<MouseCursor> mouseCursor,
    VisualDensity visualDensity,
    MaterialTapTargetSize tapTargetSize,
    Duration animationDuration,
    bool enableFeedback}
)

Zum Beispiel: Ein TextButton mit der veränderbaren Hintergrundfarbe und Vordergrundfarbe basierend auf seinem Status

TextButton (
    child: Text("TextButton 1"),
    onPressed: () {},
    style: ButtonStyle (
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
              if (states.contains(MaterialState.pressed)) {
                return Colors.red;
              }
              return null; // Use the component's default.
            }
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)) {
              return Colors.yellow;
            }
            return null; // Use the component's default.
          },
        )
    )
)

Z.B: Ein TextButton mit der Höhe von 10 in einem gedrückten Zustand hat die Höhe von 0.

TextButton (
    child: Text("TextButton 2"),
    onPressed: () {},
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return Colors.black26;
            }
            return Colors.cyan;
          }
      ),
      foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
      elevation: MaterialStateProperty.resolveWith<double>(
            (Set<MaterialState> states) {
          if (states.contains(MaterialState.pressed)
               ||  states.contains(MaterialState.disabled)) {
            return 0;
          }
          return 10;
        },
      )
    )
)

ButtonStyle
MaterialStateProperty

7. autofocus

bool autofocus: false

Flutter change Focus

8. focusNode

FocusNode focusNode

Die Anleitung zu Flutter FocusNode

9. clipBehavior

Clip clipBehavior: Clip.none

Flutter Clip clipBehavior