betacode

Руководство Flutter SnackBar

  1. SnackBar
  2. content
  3. backgroundColor
  4. elevation
  5. margin
  6. padding
  7. width
  8. shape
  9. behavior
  10. action
  11. duration
  12. animation
  13. withAnimation()
  14. onVisible

1. SnackBar

В мобильном приложении, SnackBar - это то небольшой интерфейсный компонент, который обеспечивает краткий ответ после действия пользователя. Он появляется в нижней части (bottom) экрана и автоматически исчезает, когда время истекает или когда пользователь взаимодействует в другом месте экрана.
SnackBar также предоставляет button в качестве опции для выполнения действия. Например, отменить (undo) только что выполненное действие или повторить только что выполненное действие,если оно не удалось.
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}
)
Приложение Flutter следует рекомендациям по согласованности Material Design, чтобы гарантировать, что когда SnackBar появляется в нижней части экрана, он не перекрывается с другими важными дочерними виджетами, такими как FloatingActionButton. Поэтому SnackBar нужно вызывать через Scaffold.
Давайте рассмотрим простой пример:
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 - основное содержимое, отображаемое на SnackBar, обычно является объектом Text..
@required Widget content

3. backgroundColor

backgroundColor - Цвет фона SnackBar.
Color backgroundColor

4. elevation

elevation - координаты оси Z SnackBar, ее значение влияет на размер тени (shadow) SnackBar.
double elevation
Примечание: свойство elevation работает только для плавающего 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

Свойство margin используется для создания пустого пространства вокруг SnackBar. Однако это свойство работает только в том случае, если значение behavior равно SnackBarBehavior.floating и width не указано. Его значение по умолчанию - EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 10.0).
EdgeInsetsGeometry margin

6. padding

Свойство padding используется для создания пустого пространства внутри SnackBar и вокруг content и action.
EdgeInsetsGeometry padding

7. width

Свойство width - это ширина SnackBar, и оно работает только в том случае, если behavior является SnackBarBehavior.floating. Если свойство width задано, то SnackBar будет расположен в центре по горизонтали.
double width

8. shape

ShapeBorder shape
  • Руководство Flutter ShapeBorder

9. behavior

Свойство behavior определяет поведение и положение SnackBar.
SnackBarBehavior behavior

// Enum values:
SnackBarBehavior.fixed
SnackBarBehavior.floating

10. action

action отображается в виде button на SnackBar. Пользователь может нажать на него, чтобы выполнить какое-либо действие.
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

Pуководства Flutter

Show More