Question

我想显示一个自定义toast（我自己的窗口小部件布局）。我知道如何显示自定义alert dialogue，但这不是我想要的。

因为Alert dialogue：

背景为黑色
显示时防止触摸
必须手动关闭

我不想使用flutter烤面包库，因为我不能用它来定制布局。

我想在所有其他小部件上显示自己的布局，并使其在一段时间后消失。另外，在显示时也不应该阻止任何输入。

Answer 1

您可以添加this library来添加和自定义您的吐司。

Widget widget = Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(30.0),
        child: Container(
          width: 40.0,
          height: 40.0,
           color: Colors.grey.withOpacity(0.3),
          child: Icon(
            Icons.add,
            size: 30.0,
            color: Colors.green,
          ),
        ),
      ),
    );

    ToastFuture toastFuture = showToastWidget(
      widget,
      duration: Duration(seconds: 3),
      onDismiss: () {
        print("the toast dismiss"); // the method will be called on toast dismiss.
      },
    );

Answer 2

自定义吐司

public static void Main()
{
    var json = File.ReadAllText("Example.json");
    var x = JsonConvert.DeserializeObject<WithUser>(json);

    var user = x.User.Single();
    var age = Extract<long>(user, "Age");
    var name = Extract<string>(user, "Name");
    var elapsedTimeSinceLastMessage = TimeSpan.FromTicks(Extract<long>(user, "ElapsedTimeSinceLastMessage"));
    
}

public static T Extract<T>(User user, string name)
{
    var o = user.DataEntries
        .SingleOrDefault(d => (string)d["id"] == name) // Find the one with age
        .SingleOrDefault(kvp => kvp.Key != "id") // Find the not 'id' value
        .Value; // Take the value  
    return (T)o;
}

来电

    import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class Toast {
  static void show(
    String msg,
    BuildContext context) {
    Color textColor = Colors.white;
    Color backgroundColor = Colors.blueAccent;
    dismiss();
    Toast._createView(msg, context, backgroundColor, textColor);
  }

  static OverlayEntry _overlayEntry;
  static bool isVisible = false;

  static void _createView(
    String msg,
    BuildContext context,
    Color background,
    Color textColor,
  ) async {
    var overlayState = Overlay.of(context);

    final themeData = Theme.of(context);

    _overlayEntry = new OverlayEntry(
      builder: (BuildContext context) => _ToastAnimatedWidget(
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Container(
            alignment: Alignment.center,
            width: MediaQuery.of(context).size.width,
            child: Container(
              decoration: BoxDecoration(
                color: background,
                borderRadius: BorderRadius.circular(20),
              ),
              margin: EdgeInsets.symmetric(horizontal: 20),
              padding: EdgeInsets.fromLTRB(16, 10, 16, 10),
              child: Text(
                msg,
                softWrap: true,
                style: themeData.textTheme.body1.copyWith(
                  fontFamily: 'intel',
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
    isVisible = true;
    overlayState.insert(_overlayEntry);
  }

  static dismiss() async {
    if (!isVisible) {
      return;
    }
    isVisible = false;
    _overlayEntry?.remove();
  }
}
class _ToastAnimatedWidget extends StatefulWidget {
  _ToastAnimatedWidget({
    Key key,
    @required this.child,
  }) : super(key: key);

  final Widget child;

  @override
  _ToastWidgetState createState() => _ToastWidgetState();
}

class _ToastWidgetState extends State<_ToastAnimatedWidget>
    with SingleTickerProviderStateMixin {

  bool get _isVisible => true; //update this value later

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

  @override
  Widget build(BuildContext context) {
    return Positioned(
        bottom: 50,
        child: AnimatedOpacity(
          duration: Duration(seconds: 2),
          opacity: _isVisible ? 1.0 : 0.0,
          child: widget.child,
        )
    );
  }
}

如何在Flutter中显示自定义吐司对话框？

2 个答案: