Реализация уровня руководства / пошагового руководства - PullRequest
0 голосов
/ 05 ноября 2018

Как бы вы реализовали во Flutter направляющий слой поверх реального экрана. Примерно так:

enter image description here

Ответы [ 3 ]

0 голосов
/ 05 ноября 2018

Это не позволяет простой ответ.

Вы можете использовать плагин Highlighter Coach Mark от Марины Кузнецовой.

0 голосов
/ 06 ноября 2018

Это не тривиально. Вот необходимые компоненты:

Прежде всего, вам нужно открыть прозрачный полноэкранный диалог . В качестве альтернативы вы можете напрямую создать Overlay, хотя я бы не рекомендовал его.

Чтобы правильно расположить виджеты в оверлее, вы можете использовать CompositedTransformTarget и CompositedTransformFollower

https://docs.flutter.io/flutter/widgets/CompositedTransformTarget-class.html

0 голосов
/ 05 ноября 2018

Вы можете отобразить его в виде диалогового окна со свойством Colors.black.withOpacity() виджета «Материал» и поместить его в GestureDetector, поэтому нажатие в любом месте экрана вернется:

static Future<Null> guideDialog(BuildContext context) async {
  return showDialog<Null>(
    context: context,
    builder: (BuildContext context) {
      return new GestureDetector(
        onTap: () {
          Navigator.of(context).pop();
        },
        child: Material(
          color: Colors.black.withOpacity(0.5),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                child: Text(
                  "(Tap anywhere to dismiss)",
                  style: TextStyle(color: Colors.white),
                ),
              ),
              //your other widgets to guide here 
            ],
          ),
        ),
      );
    },
  );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...