android 有没有什么方法可以实现一个Flutter顶级小吃店?

yruzcnhs  于 2023-04-28  发布在  Android
关注(0)|答案(5)|浏览(101)

我想创建一个简单的snackbar,从屏幕的顶部instesd底部。在Flutter,我用本机snackbar,但它没有这样的功能。

7rtdyuoh

7rtdyuoh1#

可以使用https://pub.dartlang.org/packages/flushbar

RaisedButton(
  child: Text('Show Top Snackbar'),
  onPressed: () {
    Flushbar(
      flushbarPosition: FlushbarPosition.TOP,
    )
      ..title = "Hey Ninja"
      ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
      ..duration = Duration(seconds: 3)
      ..show(context);
  },
),
pu3pd22g

pu3pd22g2#

您可以使用设备的高度设置边距以实现此目的:

ScaffoldMessenger.of(context).showSnackBar(new SnackBar(
    content: Text('Snackbar message'),
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(24),
    ),
    margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).size.height - 100,
        right: 20,
        left: 20),
  ));
whlutmcx

whlutmcx3#

使用此软件包https://pub.dev/packages/another_flushbar

Flushbar(
  message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  icon: Icon(
    Icons.info_outline,
    size: 28.0,
    color: Colors.blue[300],
    ),
  duration: Duration(seconds: 3),
  leftBarIndicatorColor: Colors.blue[300],
)..show(context);
3z6pesqy

3z6pesqy4#

使用Column Package 小部件,并将mainAxisAlignment设置为MainAxisAlignment.start。此外,将SnackBar的颜色设置为透明。

Column(
     mainAxisAlignment: MainAxisAlignment.start,
      children: [yourWidget()], ),
e4yzc0pl

e4yzc0pl5#

下面是一个基于the answer from fatih的示例

void showTopSnackBar(
  String message, {
  bool isSuccess = true,
  Color? color,
  Duration? duration,
}) {
  final backgroundColor =
      color ?? (isSuccess ? Colors.green[600] : Colors.red[600]);

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      duration: duration ?? const Duration(milliseconds: 500),
      backgroundColor: Colors.transparent,
      content: Align(
        alignment: Alignment.topCenter,
        child: Container(
          height: 100,
          margin: const EdgeInsets.all(20),
          padding: const EdgeInsets.all(20),
          width: double.maxFinite,
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: const BorderRadius.all(
              Radius.circular(15),
            ),
          ),
          child: Text(
            message,
            style: const TextStyle(
              fontSize: 20,
            ),
          ),
        ),
      ),
    ),
  );
}

相关问题