Flutter flushbar / оформление закусочной - PullRequest
Новая
       52

Flutter flushbar / оформление закусочной

0 голосов
/ 04 ноября 2019

Я использую хорошо известный пакет flushbar во флаттере для отображения флешбаров / закусочных.

https://pub.dev/documentation/flushbar/latest/

Я показываю флешбар с ошибками с довольно маленьким title, довольно большой message и action/main-button.

Проблема в том, что мой флешбар выглядит не очень красиво, потому что title + message расположены в ряду рядом с action/main-button. Это делает сообщение совершенно нечитаемым, потому что на нескольких строках и ширине флешбара довольно много. Есть ли способ разместить title и message над action/main-button, чтобы заголовок и сообщение использовали полную длину панели, а панель менее ширину?

Мой панель-код атм: 

    Flushbar(
      duration: Duration(seconds: _getFlushbarDuration(message)),
      icon: Icon(FontAwesomeIcons.exclamationTriangle, color: Colors.red),
      title: 'ERREUR',
      isDismissible: true,
      dismissDirection: FlushbarDismissDirection.HORIZONTAL,
      message: message,
      backgroundColor: Colors.blueGrey[700],
      leftBarIndicatorColor: Colors.red,
      mainButton: FlatButton(
        onPressed: onPressMethod,
        child:
            Text('$buttonText', style: TextStyle(color: Colors.lightBlue[500])),
      ),
    ).show(this.context);

Этот веб-сайт полезен для передового опыта использования закусочных:

На вкладке Действие в разделе Анатомия:

https://material.io/components/snackbars/#anatomy

Если действие длинное, его можно отобразить в третьей строке.

ОБНОВЛЕНИЕ 1:

Мне удалось сделать что-то похожее на то, что я хотел, хотя высота щитка все еще велика. Сверху есть целая часть панели управления, которую можно удалить + это решение не кажется самым красивым с точки зрения кода: 

    Flushbar(
      duration: Duration(seconds: _getFlushbarDuration(message)),
      icon: Icon(FontAwesomeIcons.exclamationTriangle, color: Colors.red),
      messageText: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('ERREUR',
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
          Text('$message', style: TextStyle(color: Colors.lightBlue[50])),
          Container(
            alignment: Alignment.bottomRight,
            child: FlatButton(
              onPressed: onPressMethod,
              child: Text('$buttonText',
                  style: TextStyle(color: Colors.lightBlue[500])),
            ),
          ),
        ],
      ),
      padding: const EdgeInsets.only(top: 50, bottom: 10),
      isDismissible: true,
      dismissDirection: FlushbarDismissDirection.HORIZONTAL,
      backgroundColor: Colors.blueGrey[700],
      leftBarIndicatorColor: Colors.red,
    ).show(this.context);

ОБНОВЛЕНИЕ 2:

Это выглядитлучше, но я не могу получить анимацию для значка сейчас, потому что я добавил контейнер с полем для значка. До сих пор не радует тот факт, что я должен сделать виджет в messageText. Было бы уместнее сделать это в виджете SnackBar() по умолчанию? 

    Flushbar(
      duration: Duration(seconds: _getFlushbarDuration(message)),
      icon: Container(
        margin: const EdgeInsets.only(bottom: 50),
        child: Icon(FontAwesomeIcons.exclamationTriangle, color: Colors.red),
      ),
      messageText: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('ERREUR',
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
          Text(
            '$message',
            style: TextStyle(color: Colors.lightBlue[50]),
            softWrap: true,
          ),
          Align(
            alignment: Alignment.centerRight,
            child: FlatButton(
              onPressed: onPressMethod,
              child: Text('$buttonText',
                  style: TextStyle(color: Colors.lightBlue[500])),
            ),
          ),
        ],
      ),
      isDismissible: true,
      dismissDirection: FlushbarDismissDirection.HORIZONTAL,
      backgroundColor: Colors.blueGrey[700],
      leftBarIndicatorColor: Colors.red,
    ).show(this.context);
...