Флаттер, показывающий снэк-бар на верхней части листа

Question

В моем коде я вызываю нижний лист для отображения списка плиток. Эти плитки содержат кнопки, которые отображают закусочную. Эта функциональность работает нормально, единственная проблема в том, что снэк-бар отображается за нижним листом, поэтому вы можете увидеть его, только если закроете нижний лист. Каждый из них вызывается с помощью следующего кода:

1. Нижний лист:

  void _settingModalBottomSheet(context, stream, scaffoldKey ) {
    if (_availableRides.length == 0) {
      return null;
    } else {
      return scaffoldKey.currentState.showBottomSheet((context) {
        return Column(
          children: Widgets;
      });
    }
  }

2. Снэк-бар

widget.scaffoldKey.currentState.showSnackBar(SnackBar(
         content: Text("Created", textAlign: 
    TextAlign.center,),),

Кто-нибудь знает, как я могу расположить закусочную перед нижним листом

Answer 1

Таким образом, я смог решить эту проблему, просто добавив еще один Scaffold() к моему нижнему листу и передав ему новый ключ scaffold

Answer 2

SnackBarесть для этого свойство. Это называетсяbehavior, вы можете сделать это:

SnackBar(
    behavior: SnackBarBehavior.floating,
    ...

SnackBarBehavior перечисление

плавающий - const SnackBarBehavior

Такое поведение приведет к тому, что SnackBar будет отображаться над другими виджетами в Scaffold. Это включает отображение над BottomNavigationBar и FloatingActionButton.

См. Дополнительные сведения на сайте material.io/design/components/snackbars.html.

Answer 3

Я решил эту проблему с помощью простого решения, но оно работает

Решение в 3 шага:

1 ДобавитьSizedBoxи установите ту же высоту BottomSheet
2. ДобавьтеScaffoldкак дочерний элемент SizedBox
3. Добавьте свой нижний лист

      SizedBox(
  height: ... ,// height of bottomSheet
  child: Scaffold(
       body: ... , // your bottomSheet
  )
)

Answer 4

Я пришел к довольно приличному решению. Я завернул свой нижний лист в файл , но добавил его какbottomSheetпараметр. При добавленииScaffold, будет добавлен задний фон, поэтому я просто сделал его фон прозрачным.

      Scaffold(
  backgroundColor: Colors.transparent,
  bottomSheet: ...,
)

Answer 5

Я решил с помощью Set (отступ снизу до SnackBar) На столько, сколько высота (bottomSheet: height) .

В этом случае у меня есть нижний лист:

bottomSheet: Container(
          child: RaisedButton(...),
          width: MediaQuery.of(context).size.width,
          height: AppBar().preferredSize.height * 0.85,
        ),

И эта закусочная:

_scaffoldKey.currentState.showSnackBar(SnackBar(
padding:EdgeInsetsDirectional.only(
bottom:AppBar().preferredSize.height * 0.85),
backgroundColor: Colors.red,
duration: new Duration(milliseconds: 3000),
content: Text('ETC..'),
                ));

Answer 6

Вы можете добиться этого, просто обернув виджет BottomSheet с помощью Scaffold.

например:

       void _settingModalBottomSheet(context, stream, scaffoldKey ) {
    if (_availableRides.length == 0) {
      return null;
    } else {
      return scaffoldKey.currentState.showBottomSheet((context) {
        return Scaffold(
           body: Column(
             children: Widgets;
           })
         );
    }
  }

Answer 7

Это рабочее решение согласно документации. https://docs.flutter.dev/cookbook/design/snackbars

Этот пример работает и с нижними листами.

1. Инициализировать .
2. Оберните виджет вашего компонента с помощью .
3. СворачиватьScaffoldс .
4. Добавить ключscaffoldMessengerKeyкScaffoldMessenger
5. Метод вызоваscaffoldMessengerKey.currentState?.showSnackBar(SnackBar());

Пример:

      final scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();


// Any widget with button. 
// (Bottom sheet also) - root widget must be ScaffoldMessenger.
ScaffoldMessenger(
  key: scaffoldMessengerKey,
  child: Scaffold(
    body: Container(
      child: ElevatedButton(
        style: raisedButtonStyle,
        onPressed: () { 
          scaffoldMessengerKey.currentState?.showSnackBar(
            //SnackBar design.
            SnackBar(
             backgroundColor: Colors.white,
             elevation: 8,
             content: Container(
               decoration: BoxDecoration(
                 color: Colors.white,
                 borderRadius: BorderRadius.circular(5),
               ),
               child: Text(
                 'Simple snackbar text.',
                 style: FlutterFlowTheme.of(context).bodyText1
                 .override(fontFamily: 'Rubik',
                          fontWeight: FontWeight.w300,
                          lineHeight: 1.5,
               ),
             ),
             action: SnackBarAction(
                label: 'Undo',
                onPressed: () {
                  // Some code to undo the change.
                },
             ),
             duration: Duration(seconds: 5),
             behavior: SnackBarBehavior.floating,
               
       },
       child: Text('Open snackbar over bottom sheet!'),
      ); //ElevatedButton
    ); //Container
  ); //Scaffold
); //ScaffoldMessenger

Примечание. При таком подходе вам не нужно передавать BuildContext.

Если вы не хотите регистрироватьсяScaffoldMessengerKey. Вы можете показать SnackBar следующим образом:ScaffoldMessenger.of(context).showSnackBar(SnackBar());

Answer 8

Я решил это, изменив bottomSheet к bottomNavigationBar поскольку решение с плавающей закусочной мне не подошло.

Answer 9

вы можете использовать пакет flushbar . Я думаю, что это лучший вариант, если нужно использовать нижний лист.

любое событие внутри нижнего листа

       CustomFlushBar().flushBar(text: 'Thank you for your payment!', context: context,duration: 2);

Класс CustomFlushBar

        class CustomFlushBar {
      void flushBar({int duration, @required String text, Color iconColor, IconData iconData, Color backgroundColor, @required BuildContext context}) async {
        await dismiss();
        Flushbar(
          margin: EdgeInsets.all(8),
          borderRadius: 8,
          backgroundColor: backgroundColor ?? Palette.greenButton,
          icon: Icon(iconData ?? Icons.done, color: iconColor ?? Palette.white),
          flushbarStyle: FlushbarStyle.FLOATING,
          message: text,
          duration: Duration(seconds: duration ?? 3),
        )..show(context);
      }
    
      Future<void> dismiss() async {
        if (!Flushbar().isDismissed()) {
          await Flushbar().dismiss();
        }
      }
    }