当前位置:  开发笔记 > 编程语言 > 正文

从屏幕顶部抖动通知

如何解决《从屏幕顶部抖动通知》经验,为你挑选了1个好方法。

我试图弄清楚如何像正常的推送通知一样用来自屏幕顶部的警报通知用户。如何从屏幕顶部提醒用户。
AlertDialog不可自定义,因此我坚持使用此功能。有什么方法可以从屏幕顶部显示警报或小吃店之类的东西吗?



1> Niklas..:

Flutter使您可以借助Overlay类创建通知。要使这些动画从顶部进入屏幕,可以将SlideTransition与AnimationController结合使用。这是我创建的示例应用程序:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton.icon(
          icon: Icon(Icons.notifications_active),
          label: Text('Notify!'),
          onPressed: () {
            Navigator.of(context)
                .overlay
                .insert(OverlayEntry(builder: (BuildContext context) {
              return FunkyNotification();
            }));
          },
        ),
      ),
    );
  }
}

class FunkyNotification extends StatefulWidget {
  @override
  State createState() => FunkyNotificationState();
}

class FunkyNotificationState extends State
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation position;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 750));
    position = Tween(begin: Offset(0.0, -4.0), end: Offset.zero)
        .animate(
            CurvedAnimation(parent: controller, curve: Curves.bounceInOut));

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
        color: Colors.transparent,
        child: Align(
          alignment: Alignment.topCenter,
          child: Padding(
            padding: EdgeInsets.only(top: 32.0),
            child: SlideTransition(
              position: position,
              child: Container(
                decoration: ShapeDecoration(
                    color: Colors.deepPurple,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16.0))),
                child: Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text(
                    'Notification!',
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

推荐阅读
跟我搞对象吧
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有