Как сделать непрозрачный экран учебника во флаттере?

Question

Я хочу сделать обучающий экран, который покажет пользователю в начале.это как показано ниже:

мой конкретный вопрос, как заставить некоторые определенные элементы показывать нормально , а другие непрозрачные?

также the arrow и текст, как их сделать идеально указать в зависимости от размера экрана мобильного устройства ( отзывчивость мобильного телефона )?

Answer 1

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

Answer 2

Оберните ваш текущий верхний виджет стековым виджетом, в котором первым дочерним элементом стека будет ваш текущий виджет. Ниже этого виджета добавьте Контейнер с черным цветом, завернутый в Opacity, например:

return Stack(
  children: <Widget>[
    Scaffold( //first child of the stack - the current widget you have
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Foo"),
              Text("Bar"),
            ],
          ),
        )),
    Opacity( //seconds child - Opaque layer
      opacity: 0.7,
      child: Container(
        decoration: BoxDecoration(color: Colors.black),
      ),
    )
  ],
);

Затем вам нужно создать изображения с описаниями и стрелками в разрешениях 1x, 2x, 3x и поместить их в папку ресурсов в соответствующей структуре, как описано здесь: https://flutter.dev/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets

затем вы можете использовать виджет Image.asset (...) для загрузки ваших изображений (они будут загружены в правильном разрешении) и поместить эти виджеты в другой контейнер, который также будет дочерним для стека, и будет помещен под черным контейнером в списке детей (виджет «Непрозрачность» в приведенном выше примере).