codestory

Die Anleitung zu Flutter FlatButton

View more Tutorials:

  1. Flutter FlatButton
  2. Zum Beispiel: FlatterButton
  3. child
  4. onPressed
  5. onLongPress
  6. onHighlightChanged
  7. shape
  8. focusNode
  9. autofocus
  10. materialTapTargetSize
  11. textTheme
  12. textColor
  13. disabledTextColor
  14. color
  15. disabledColor
  16. focusColor
  17. hoverColor
  18. highlightColor
  19. splashColor
  20. colorBrightness
  21. padding
  22. visualDensity
  23. mouseCursor
  24. clipBehavior

1- Flutter FlatButton

In Flutter können Sie mit FlatButton eine flache Button mit einer Höhe von 0 erstellen.
FlatButton Constructor:
FlatButton Constructor
const FlatButton(
    {Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ValueChanged<bool> onHighlightChanged,
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    ShapeBorder shape,
    Clip clipBehavior: Clip.none,
    FocusNode focusNode,
    bool autofocus: false,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child}
)
FlatButton.icon Constructor:
FlatButton.icon Constructor
FlatButton.icon(
    {Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ValueChanged<bool> onHighlightChanged,
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    bool autofocus,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget icon,
    @required Widget label}
)
FlatButton kann in Symbolbar, Dialogen usw. verwendet werden. Oft müssen Sie es jedoch hervorheben, um den Benutzer nicht zu verwirren. Wenn Sie absichtlich flache Button ohne Rahmen verwenden, sollten Sie sie an einer geeigneten Position für den Kontext platzieren. Platzieren Sie FlatButton nicht dort, wo sie mit anderen Inhalten gemischt werden. z.B in der Mitte einer Liste.
Wenn die beiden Funktionen callback: onPressed und onLongPress nicht angegeben sind, wird FlatButton deaktiviert und reagiert nicht, wenn es berührt wird. Und seine Farbe wird durch die Property disableColor anstelle der Property color ​​​​​​​angezeigt.
FlatButton hat die kleinste Größe von 88x36, aber es kann durch ButtomTheme überschrieben werden.

2- Zum Beispiel: FlatterButton

Im folgenden Beispiel besteht es aus zwei FlatButton, einem einfachsten FlatButton (der nur eine Textbeschriftung enthält) und einem weiteren FlatButton, dessen Hintergrund und Textfarbe bereits festgelegt sind.
main.dart (ex1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      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(
     // backgroundColor: Color(0xffF4F6F6),
      appBar: AppBar(
        title: Text("FlatButton Example"),
      ),
      body: Center (
        child: Row (
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            FlatButton (
              child: Text("Default Flat Button"),
              onPressed: () {},
            ),
            FlatButton (
              child: Text("Flat Button with Color"),
              onPressed: () {},
              color: Colors.blue,
              textColor: Colors.white,
            )
          ],
        )
      )
    );
  }
}

3- child

child ist die wichtigste Property von FlatButton. In die meisten Verwendungssituation handetl es um das Objekt Text. 
@required Widget child
Hier ist das einfachste Beispiel wenn child ein Objekt Text ist: 
FlatButton (
  child: Text("Click Me!"),
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
)
Durch das Zuweien des Objekt Row zur Property child kann ein komplexer FlatButton erstellt werden, z.B Icon und  Text. 
// 1 Icon and 1 Text
FlatButton (
  child: Row (
    children: [
        Icon(Icons.settings),
        SizedBox(width: 5),
        Text("Settings")
    ],
  ) ,
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
)

// 2 Icons and 1 Text
FlatButton (
  child: Row (
    children: [
      Icon(Icons.directions_bus),
      Icon(Icons.train),
      SizedBox(width: 5),
      Text("Transportation")
    ],
  ) ,
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
)
HInweis: Wenn Sie einen FlatButton mit Icon und Text möchten, verwenden Sie am besten den Construktur  FlatButton.icon. 
FlatButton.icon(
  icon: Icon(Icons.file_upload),
  label: Text("Upload"),
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
)

4- onPressed

onPressed ist eine Funktion callback. Es wird aufgerufen, wenn der Benutzer auf FlatButton klickt. Insbesondere tritt ein Ereignis onPressed auf, wenn der Benutzer beide Aufgaben ausführt, die aus dem Herunterdrücken (press down) und Loslassen (release) von FlatButton bestehen.
Hinweis: Wenn die beiden Property: onPress und onLongPress nicht angegeben sind, wird FlatButton deaktiviert. Keine Reaktion erfolgt wenn es berührt wird, und seine Farbe wird durch die Property disableColor anstelle der Property color angezeigt. 
@required VoidCallback onPressed
main.dart (onPress ex1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      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("FlatButton Example"),
        ),
        body: Center (
          child:  FlatButton (
              child: Text("Click Me! " + this.pressCount.toString()),
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: onPressHander
          ),
        )
    );
  }

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

}
Achtung: Wenn Sie die beiden Funktionen callback: onPressed und onLongPress angeben, wird je nach Verhalten des Benutzer nur eine davon aufgerufen. Sie können eine mehr detailierte Erklärung im Abschnitt über onLongPress finden.

5- onLongPress

onLongPress ist eine Funktion callback, die aufgerufen wird, wenn der Benutzer einen FlatButton länger als LONG_PRESS_TIMEOUT Milisekunden drückt. Das Ereignis Long-Press tritt in Milisekunden von LONG_PRESS_TIMEOUT auf, wenn der Benutzer während dieser Zeit (0 --> LONG_PRESS_TIMEOUT) den Cursor nicht bewegt. 
VoidCallback onLongPress
Wenn Sie zwei Funktionen callback: onPressed und onLongPress für einen FlatButton angeben, kann in jeder Situation höchstens eine Funktion aufgerufen werden.
LONG_PRESS_TIMEOUT 500 milliseconds
Wenn der Benutzer vor dem LONG_PRESS_TIMEOUT drückt und loslässt, tritt nur das Ereignis onPressed auf.
Wenn der Benutzer länger als LONG_PRESS_TIMEOUT Milisekunden drückt, tritt das Ereignis onLongPress auf und Flutter ignoriert das danach auftretende Ereignis onPressed.
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: 'Title of Application',
      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:  FlatButton (
              child: Text("Test Me"),
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: onPressHander,
              onLongPress: onLongPressHandler
          ),
        )
    );
  }

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

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

}

6- onHighlightChanged

onHighlightChanged ist eine Funktion callback, die aufgerufen wird, wenn die Button den Vorgang zum Hervoheben von Button startet und beendet. Daher wird diese Funktion jedes Mal zweimal aufgerufen, wenn der Benutzer mit dem Button interagiert.
Weitere Information zum Hervoheben von der Button finden Sie in der Property highlightColor . 
ValueChanged<bool> onHighlightChanged
Das Hervorheben der Button beginnt, wenn der Benutzer nach unten drückt und nach den Millisekunden HIGHLIGHT_TIMEOUT endet oder wenn der Benutzer sie loslässt, je nachdem, welches Ereignis zuerst eintritt.
LONG_PRESS_TIMEOUT 500 milliseconds
HIGHLIGHT_TIMEOUT 300 milliseconds
HIGHLIGHT_TIMEOUT ist kürzer als LONG_PRESS_TIMEOUT, deshalb gibt es 3 möglichen Fällen:
Fall 1: Wenn der Benutzer die Button vor dem HIGHLIGHT_TIMEOUT loslässt, treten die Ereignisse in der folgenden Reihenfolge auf:
  1. onHighlightChanged(true)
  2. onHighlightChanged(false)
  3. onPressed
Fall 2: Wenn der Benutzer die Button nach HIGHLIGHT_TIMEOUT und vor LONG_PRESS_TIMEOOUT loslässt, treten die Ereignisse in der folgenden Reihenfolge auf:
  1. onHighlightChanged(true)
  2. onHighlightChanged(false)
  3. onPressed
Fall 3: Wenn der Benutzer die Button nach LONG_PRESS_TIMEOOUT loslässt, treten die Ereignisse in der folgenden Reihenfolge auf:
  1. onHighlightChanged(true)
  2. onHighlightChanged(false)
  3. onLongPress
onHighlightChanged (ex1)
FlatButton.icon (
  icon: Icon(Icons.add_shopping_cart),
  label: Text("Add To Cart"),
  onPressed: () {
    print("onPressed");
  },
  onHighlightChanged: (valueChanged) {
    print("onHighlightChanged: " + valueChanged.toString());
  },
  onLongPress: () {
    print("onLongPress");
  },
)

7- shape

Die Property shape wird verwendet, um die Form von FlatButton anzugeben. Hinweis: Der Blitz, der angezeigt wird, wenn der Benutzer ihn nach unten drückt, wird nur innerhalb des Bereich von shape verteilt.  
ShapeBorder shape
  • TODO Link!
shape (ex1)
FlatButton (
  child: Text("Add To Cart"),
  onPressed: () {},
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
  ),
)

FlatButton (
  child: Text("Buy Now"),
  onPressed: () {},
  color: Colors.red,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
      side: BorderSide(color: Colors.red)
  ),
)

FlatButton (
  child: Text("Reset"),
  onPressed: () {},
  shape: UnderlineInputBorder(
      borderSide: new BorderSide(
          color: Colors.red
      )
  ),
)

8- focusNode 

FocusNode focusNode
  • TODO Link!

9- autofocus 

bool autofocus: false
  • TODO Link!

10- materialTapTargetSize 

MaterialTapTargetSize materialTapTargetSize

// Values:
MaterialTapTargetSize.padded
MaterialTapTargetSize.shrinkWrap
  • TODO Link!

11- textTheme

Die Property textTheme wird verwendet, um Grundfarben der Button und Standardeinstellungen für Mindestgrößen, Padding und Formen zu definieren.  
ButtonTextTheme textTheme

// Values:
ButtonTextTheme.normal
ButtonTextTheme.accent
ButtonTextTheme.primary
textTheme (ex1)
FlatButton.icon (
  icon: Icon(Icons.place),
  label: Text("Normal"),
  onPressed: () {},
  textTheme: ButtonTextTheme.normal,
)

FlatButton.icon (
  icon: Icon(Icons.place),
  label: Text("Primary"),
  onPressed: () {},
  textTheme: ButtonTextTheme.primary,
)

FlatButton.icon (
  icon: Icon(Icons.place),
  label: Text("Accent"),
  onPressed: () {},
  textTheme: ButtonTextTheme.accent,
)
textTheme (ex2)
FlatButton.icon (
  icon: Icon(Icons.place),
  label: Text("Normal"),
  onPressed: () {},
  color: Colors.lightGreen,
  textTheme: ButtonTextTheme.normal,
)

FlatButton.icon (
  icon: Icon(Icons.place),
  label: Text("Primary"),
  onPressed: () {},
  color: Colors.lightGreen,
  textTheme: ButtonTextTheme.primary,
)

FlatButton.icon (
  icon: Icon(Icons.place),
  label: Text("Accent"),
  onPressed: () {},
  color: Colors.lightGreen,
  textTheme: ButtonTextTheme.accent,
)

12- textColor

Die Property textColor wird verwendet, um die Textfarbe in FlatButton anzugeben. Es funktioniert auch mit Smbolen in ​​​​​​​FlatButton.
Color textColor
textColor (ex1)
FlatButton.icon (
  icon: Icon(Icons.add_shopping_cart),
  label: Text("Add To Cart"),
  onPressed: () {},
  textColor: Colors.red,
)


FlatButton.icon (
  icon: Icon(Icons.monetization_on),
  label: Text("Buy Now"),
  onPressed: () {},
  textColor: Colors.blue,
)


FlatButton (
  child: Text("Reset"),
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
)

13- disabledTextColor

Die Property disabledTextColor wird verwendet, um die Textfarbe von FlatButton anzugeben, wenn FlatButton deaktiviert ist. Es funktioniert mit Symbolen von FlatButton.
Hinweis: Ein FlatButton wird deaktiviert (disabled) wenn die beiden Property onPressed und onLongPress nicht angegeben sind oder einen Wert null ​​​​​​​haben. 
Color disabledTextColor
disabledTextColor (ex1)
FlatButton.icon (
  icon: Icon(Icons.add_shopping_cart),
  label: Text("Add To Cart"),
)


FlatButton.icon (
  icon: Icon(Icons.monetization_on),
  label: Text("Buy Now"),
  disabledTextColor: Colors.black38,
)


FlatButton (
  child: Text("Reset"),
  color: Colors.blue,
  textColor: Colors.white,
  disabledTextColor: Colors.blueGrey,
)

14- color

Die Property color wird verwendet, um die Hintergrundfarbe von FlatButton anzugeben wenn sich FlatButton in Normalzustand befindet. 
Color color
color (ex1)
FlatButton.icon (
    icon: Icon(Icons.add_shopping_cart),
    label: Text("Add To Cart"),
    onPressed: (){},
    color: Colors.blue
)

FlatButton.icon (
  icon: Icon(Icons.monetization_on),
  label: Text("Buy Now"),
  onPressed: (){},
  color: Colors.red,
)

FlatButton (
  child: Text("Reset"),
  onPressed: (){},
  color: Colors.yellow,
)

15- disabledColor

Die Property disabledColor wird verwendet, um die Hintergrundfarbe von FlatButton anzugeben, wenn FlatButton deaktiviert ist.
Hinweis: Ein FlatButton wird deaktiviert, wenn die beiden Property onPressed und onLongPress nicht angegeben oder null sind. 
Color disabledColor
disabledColor (ex1)
FlatButton.icon (
    icon: Icon(Icons.add_shopping_cart),
    label: Text("Add To Cart"),
)


FlatButton.icon (
  icon: Icon(Icons.monetization_on),
  label: Text("Buy Now"),
  disabledColor: Colors.black12,
)


FlatButton (
  child: Text("Reset"),
  disabledColor: Colors.black26,
)

16- focusColor

Die Property focusColor wird verwendet, um die Hintergrundfarbe für FlatButton festzulegen wenn diese Button einen Eingabefokus hat (input focus). 
Color focusColor
Möglicherweise kennen Sie das Betriebssystem Windows. Um den Fokus von einem Element auf ein anderes Element umzuschalten, drücken Sie einfach die Taste TAB. Die Anwendung Flutter, die unter Android oder iOS ausgeführt wird, kann diese Funktion jedoch nicht verwenden. Stattdessen wird ein anderes Prinzip verwendet, das im folgenden Artikel erläutert wurde:
  • TODO Link!
Hier ist ein Beispiel für die Verwendung der Property focusColor. Wenn Sie diese Anwendung auf den Android Emulator ausführen, können Sie weiterhin die Taste TAB vom Computer verwenden, um dn Fokus von einem Widget auf ein anderes Widget auf die Interface zu verschieben.
focusColor (ex1)
FlatButton.icon (
  icon: Icon(Icons.add_shopping_cart),
  label: Text("Add To Cart"),
  onPressed: () {},
  focusColor: Colors.red,
)


FlatButton.icon (
  icon: Icon(Icons.monetization_on),
  label: Text("Buy Now"),
  onPressed: () {},
  color: Colors.blue,
  focusColor: Colors.red,
)


FlatButton (
  child: Text("Reset"),
  onPressed: () {},
  color: Colors.blueGrey,
  focusColor: Colors.red,
)

17- hoverColor 

Color hoverColor

18- highlightColor

Die Property highlightColor wird verwendet, um die Hervohebungsfarbe für die Button anzugeben. 
Color highlightColor
Wenn der Benutzer darauf drückt, ändert sich die Hintergrundfarbe der Button allmählich von der aktuellen Hintergrundfarbe in highlightColor, und kehrt dann in den normalen Zustand zurück, wenn der Benutzer sie loslässt. 
Wenn die Dauer vom Herunterdrücken bis zum Loslassen kurz ist, erreicht die HIntergrundfarbe der Button nicht die  highlightColor.
highlightColor (ex1)
FlatButton.icon (
    icon: Icon(Icons.add_shopping_cart),
    label: Text("Add To Cart"),
    onPressed: () {},
    highlightColor: Colors.red
)


FlatButton.icon (
    icon: Icon(Icons.monetization_on),
    label: Text("Buy Now"),
    onPressed: () {},
    color: Colors.blue,
    highlightColor: Colors.red
)


FlatButton (
    child: Text("Reset"),
    onPressed: () {},
    color: Colors.blueGrey,
    highlightColor: Colors.red
)

19- splashColor

Die Property splashColor wird verwendet, um die Farbe des Blitzes anzugeben, der die Position umgibt, an der Benutzer nach unten drückt. 
Color splashColor
splashColor (ex1)
FlatButton.icon (
  icon: Icon(Icons.add_shopping_cart),
  label: Text("Add To Cart"),
  onPressed: () {},
  splashColor: Colors.lime,
)


FlatButton.icon (
  icon: Icon(Icons.monetization_on),
  label: Text("Buy Now"),
  onPressed: () {},
  color: Colors.blue,
  splashColor: Colors.lime,
)


FlatButton (
  child: Text("Reset"),
  onPressed: () {},
  color: Colors.blueGrey,
  splashColor: Colors.lime,
)

20- colorBrightness

Die Property colorBrightness wird verwendet, um Flutter zu empfehlen, das einen von zwei Werten annehmen kann: Brightness.dart oder Brightness.light
  1. Verwenden Sie colorBrightness = Brightness.dark um Flutter mitzuteilen, dass die Hintergrundfarbe der Button dunkel ist. Wählen Sie automatisch eine geeignete Farbe für den Text der Button aus.
  2. Verwenden Sie colorBrightness = Brightness.light um Flutter mitzuteilen, dass die Hintergrundfarbe der Button hell ist. Wählen Sie automatisch eine geeignete Farbe für den Text der Button aus.
Brightness colorBrightness
colorBrightness (ex1)
FlatButton.icon (
    icon: Icon(Icons.add_shopping_cart),
    label: Text("Dark"),
    onPressed: () {},
    color: Colors.green,
    colorBrightness: Brightness.dark
)

FlatButton.icon (
    icon: Icon(Icons.add_shopping_cart),
    label: Text("Light"),
    onPressed: () {},
    color: Colors.green,
    colorBrightness: Brightness.light
)

FlatButton.icon (
    icon: Icon(Icons.monetization_on),
    label: Text("Dark"),
    onPressed: () {},
    color: Colors.blue,
    colorBrightness: Brightness.dark
)

FlatButton.icon (
  icon: Icon(Icons.monetization_on),
  label: Text("Light"),
  onPressed: () {},
  color: Colors.blue,
    colorBrightness: Brightness.light
)

21- padding

Mit der Property padding wird der Abstand innerhalb des Rahmens und um den Inhalt der Button festgelegt.  
EdgeInsetsGeometry padding
padding (ex1)
FlatButton.icon (
    icon: Icon(Icons.add_shopping_cart),
    label: Text("Add To Cart"),
    onPressed: () {},
    color: Colors.blue,
    padding: EdgeInsets.all(10)
)

FlatButton.icon (
    icon: Icon(Icons.monetization_on),
    label: Text("Buy Now"),
    onPressed: () {},
    color: Colors.blueGrey,
    padding: EdgeInsets.fromLTRB(50, 10, 30, 10)
)

22- visualDensity 

VisualDensity visualDensity
  • TODO Link!

23- mouseCursor 

MouseCursor mouseCursor
  • TODO Link!

24- clipBehavior 

Clip clipBehavior: Clip.none
  • TODO Link!

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.