Как показать пользовательский диалог тоста во флаттере?

Я хочу показать пользовательский toast (мой собственный макет виджета). Я знаю, как показать кастомный alert dialogue, но я не этого хочу.

Потому что Alert dialogue:

  1. Имеет черный фон
  2. Предотвращает прикосновения при отображении
  3. Должен уволить вручную

Я не хочу использовать flutter библиотеку тостов, потому что я не могу создать с ней собственный макет.

Я хочу показать свой собственный макет поверх всех других виджетов и заставить его исчезнуть через некоторое время. Кроме того, он не должен препятствовать вводу, когда он отображается.


person Xihuny    schedule 16.04.2019    source источник


Ответы (2)


Вы можете добавить эту библиотеку, чтобы добавлять и настраивать свои собственные тосты.

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.
      },
    );
person Jalil    schedule 16.04.2019
comment
да. Эта библиотека - именно то, что я искал. - person Xihuny; 16.04.2019

персонализированный тост

введите описание изображения здесь

    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,
        )
    );
  }
}

для звонка

Toast.show(ApiContent.something_wrong, context);

введите описание изображения здесь

person Sandeep Pareek    schedule 01.05.2021