Die Anleitung zu Flutter SnackBar

SnackBar
content
backgroundColor
elevation
margin
padding
width
shape
behavior
action
duration
animation
withAnimation()
onVisible

1. SnackBar

In mobilen Anwendungen ist SnackBar eine kleine Interfacekomponente die nach einer Benutzeraktion eine kurze Anwort liefert. Sie wird am unteren (bottom) des Bildschirms angezeigt und verschwindet automatisch nach einer Zeitüberschreitung oder verschwindet, wenn ein Benutzer an einer anderen Stellen auf dem Bildschirm interagiert.

SnackBar bietet auch eine Button als Option zum Ausführen einer Aktion. Machen Sie beispieweise eine neulich ausführte Aktion rückgängig oder wiederholen Sie die neulich ausgeführte Aktion, wenn sie nicht erfolgreich ist.

SnackBar Constructor:

SnackBar Constructor

const SnackBar(
    {Key key,
    @required Widget content,
    Color backgroundColor,
    double elevation,
    EdgeInsetsGeometry margin,
    EdgeInsetsGeometry padding,
    double width,
    ShapeBorder shape,
    SnackBarBehavior behavior,
    SnackBarAction action,
    Duration duration: _snackBarDisplayDuration,
    Animation<double> animation,
    VoidCallback onVisible}
)

Die Anwendung Flutter befolgt die konsistenten Grundsätzen von Material Design um sicherzustellen, dass SnackBar , wenn sie am unteren Bildschirm angezeigt wird, nicht mit anderen wichtigen untergeordneten Widgets wie FloatingActionButton überschneidet. Daher muss SnackBar durch Scaffold aufgerufen werden.

Sehen Sie ein einfaches Beispiel:

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.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SnackBar Example'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      body: Center(
          child: Builder(
              builder: (BuildContext ctxOfScaffold)  {
                return ElevatedButton(
                    child: Text('Show SnackBar'),
                    onPressed: () {
                      this._showSnackBarMsgDeleted(ctxOfScaffold);
                    }
                );
              }
          )
      )
    );
  }

  void _showSnackBarMsgDeleted(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
      content: Text('Message is deleted!'),
      action: SnackBarAction(
        label: 'UNDO',
        onPressed: () {
          this._showSnackBarMsgRestored(ctxOfScaffold);
        },
      ),
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }

  void _showSnackBarMsgRestored(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
      content: Text('Message is restored!')
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }
}

2. content

content - Die Hauptinhalt zeigt auf SnackBar an, normalerweise ist es ein Objekt Text.

@required Widget content

3. backgroundColor

backgroundColor - die Hintergrundfarbe von SnackBar.

Color backgroundColor

4. elevation

elevation - Die Z-Achsen-Koordinaten von SnackBar, deren Wert auf die Schattenumfang von SnackBar einflusst.

double elevation

Hinweis: Das Property elevation funktioniert nur mit schwebendem SnackBar(behavior: SnackBarBehavior.floating).

elevation (ex1)

final snackBar = SnackBar(
  content: Text('Message is deleted!'),
  elevation: 15,
  behavior: SnackBarBehavior.floating,
  action: SnackBarAction(
    label: 'UNDO',
    onPressed: ()  {
    },
  ),
)

5. margin

Das Property margin wird verwendet, um einen leeren Bereich um die SnackBar herum zu erstellen. Allerdings funktioniert dieses Property nur wenn die Wert von behavior SnackBarBehavior.floating ist und width nicht angegeben ist. Sein Defaultwert ist EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 10.0).

EdgeInsetsGeometry margin

6. padding

Das Property padding wird benutzt um einen leeren Raum in SnackBar und um content und action herum zu erstellen.

EdgeInsetsGeometry padding

7. width

Das Property width ist die Breite von SnackBar und es funktioniert nur wenn behaviorSnackBarBehavior.floating ist. Wenn width angegeben ist, wird SnackBar horizontal in die Mitte gestellt.

double width

8. shape

ShapeBorder shape

Die Anleitung zu Flutter ShapeBorder

9. behavior

Das Property behavior gibt das Verhalten und die Position von SnackBar an.

SnackBarBehavior behavior

// Enum values:
SnackBarBehavior.fixed
SnackBarBehavior.floating

10. action

action zeigt als eine Button in SnackBar an. Darauf kann der Benutzer um eine Aktion durchzuführen.

SnackBarAction action

11. duration

Duration duration: _snackBarDisplayDuration

12. animation

Animation<double> animation

13. withAnimation()

SnackBar withAnimation (
  Animation<double> newAnimation,
  {Key fallbackKey}
)

14. onVisible

VoidCallback onVisible