betacode

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

View more Tutorials:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

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
  • TODO Link?

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

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.