Is there modeless dialog in Flutter?

Question

Is there an analog of modeless dialog in Flutter? If not, it's possible build widget with properties of modeless dialog?

I will try to explain in more detail. My source question was edited. By clicking the canvas, I've must call _handleTapDown function:

void _handleTapDown (TapDownDetails details)
{
      _showModeless (context);
}

In this function, need to visualize your Modeless widget:

void _showModeless (BuildContext context)
{
// How do I show Modeless Widget?
}

Please add few more details as to help others better understand your problem, and if possible code sample, or images of what you want or trying to achieve. — Ganapat, Jun 18 '18 at 18:51
You can create modeless dialogue. check showDialogue method, and create your own custimized — Tree, Jun 18 '18 at 19:21
@Tree that creates a modal dialog in that it blocks the rest of the screen, which I think is what the OP is trying to avoid. Although some clarification of that is needed. — rmtmckenzie, Jun 18 '18 at 19:25
Modeless is just the opposite of modal. `showDialog` only show modals. `Overlay` is for modaless — Rémi Rousselet, Jun 18 '18 at 19:37
I was try to explain in more detail: my source question has been updated. — Michael Kanzieper, Jun 20 '18 at 14:53

score 2 · Answer 1 · answered Jun 18 '18 at 19:30

2

You can use Overlay to add widget above everything else ; and use them however you like.

class ModeLess extends StatefulWidget {
  final Widget child;

  ModeLess({this.child});

  @override
  _ModeLessState createState() => new _ModeLessState();
}

class _ModeLessState extends State<ModeLess> {
  OverlayEntry modeless;

  @override
  void initState() {
    super.initState();
    modeless = new OverlayEntry(
        opaque: false,
        builder: (context) {
          return new Positioned(
            top: 50.0,
            left: 50.0,
            child: new SizedBox(
              height: 50.0,
              child: new Card(
                child: new Text("I'm a modeless")
              ),
            ),
          );
        });

    Future.microtask(() {
      Overlay.of(context).insert(modeless);
    });
  }

  @override
  void dispose() {
    modeless.remove();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

answered Jun 18 '18 at 19:30

Rémi Rousselet

256,336
79
519
432

The compiler is tells error in construction: Future.microtask (() { Overlay.of (context) .insert (modeless); }); Maybe "new Future.microtask (() {..});" ? – Michael Kanzieper Jun 20 '18 at 13:12
In dart2 `new` should be optional. But yeah, if you need it, add it – Rémi Rousselet Jun 20 '18 at 13:16
How can I render this widget in the body of function _showModeless: void _showModeless (BuildContext context) { // How do I show Modeless Widget? } – Michael Kanzieper Jun 20 '18 at 13:32
I don't understand – Rémi Rousselet Jun 20 '18 at 13:45
I edited the message and clarify the questions. I hope that I can get answers to them. – Michael Kanzieper Jun 20 '18 at 14:56
Just call `Overlay.of(context).insert(new OverlayEntry(...))` – Rémi Rousselet Jun 20 '18 at 15:06

score 0 · Answer 2 · answered Jun 21 '18 at 06:09

Rémi Rousselet, thank you very much. Your advice has helped. Below is the prototype of function that I need:

  OverlayEntry
    _modeless = null;

  void _showModeless(BuildContext context)
  {
     _modeless = new OverlayEntry(
        opaque: false,
        builder: (context) {
          return new Positioned(
            top: 100.0,
            left: 100.0,
            child:
            new Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.content_paste, color: Colors.blueGrey),
                  new Padding(
                    padding: const EdgeInsets.only(left: 16.0),
                    child: new Text('Modeless', overflow: TextOverflow.ellipsis,
                      style: new TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold, color: Colors.lightBlue, decoration: TextDecoration.none
                      ),
                    ),
                  ),
              ],
            ),
          );
        });
    Overlay.of(context).insert(_modeless);
     _startWaiting();
  }

 static const TIMEOUT = const Duration(seconds: 8);
 static Timer _timer = null;

  void _startWaiting()
  {
    _timer = new Timer(TIMEOUT, _handleTimeout);
  }

  void _handleTimeout()
  {
    if (_modeless != null)
      _modeless.remove();
  }

PS. I added only another function that allows to remove the modeless after 8 sec. Once again many thanks.

Is there modeless dialog in Flutter?

2 Answers2