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

Ответ 1

Как упомянул RoyalGriffin, вы можете использовать библиотеку highlighter_coachmark, и я также знаю, что вы получаете ошибку, ошибка есть, потому что вы используете класс RangeSlider, который импортируется из 2 разных пакетов. Можете ли вы попробовать этот пример в своем приложении и проверить, работает ли он?

1. Добавьте highlighter_coachmark в свой файл pubspec.yaml

   dependencies:
     flutter:
       sdk: flutter
   
     highlighter_coachmark: ^0.0.3
   

2. Запустите flutter packages get

Пример:

import 'package:highlighter_coachmark/highlighter_coachmark.dart';

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GlobalKey _fabKey = GlobalObjectKey("fab"); // used by FAB
  GlobalKey _buttonKey = GlobalObjectKey("button"); // used by RaisedButton

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        key: _fabKey, // setting key
        onPressed: null,
        child: Icon(Icons.add),
      ),
      body: Center(
        child: RaisedButton(
          key: _buttonKey, // setting key
          onPressed: showFAB,
          child: Text("RaisedButton"),
        ),
      ),
    );
  }

  // we trigger this method on RaisedButton click
  void showFAB() {
    CoachMark coachMarkFAB = CoachMark();
    RenderBox target = _fabKey.currentContext.findRenderObject();

    // you can change the shape of the mark
    Rect markRect = target.localToGlobal(Offset.zero) & target.size;
    markRect = Rect.fromCircle(center: markRect.center, radius: markRect.longestSide * 0.6);

    coachMarkFAB.show(
      targetContext: _fabKey.currentContext,
      markRect: markRect,
      children: [
        Center(
          child: Text(
            "This is called\nFloatingActionButton",
            style: const TextStyle(
              fontSize: 24.0,
              fontStyle: FontStyle.italic,
              color: Colors.white,
            ),
          ),
        )
      ],
      duration: null, // we don't want to dismiss this mark automatically so we are passing null
      // when this mark is closed, after 1s we show mark on RaisedButton
      onClose: () => Timer(Duration(seconds: 1), () => showButton()),
    );
  }

  // this is triggered once first mark is dismissed
  void showButton() {
    CoachMark coachMarkTile = CoachMark();
    RenderBox target = _buttonKey.currentContext.findRenderObject();

    Rect markRect = target.localToGlobal(Offset.zero) & target.size;
    markRect = markRect.inflate(5.0);

    coachMarkTile.show(
      targetContext: _fabKey.currentContext,
      markRect: markRect,
      markShape: BoxShape.rectangle,
      children: [
        Positioned(
          top: markRect.bottom + 15.0,
          right: 5.0,
          child: Text(
            "And this is a RaisedButton",
            style: const TextStyle(
              fontSize: 24.0,
              fontStyle: FontStyle.italic,
              color: Colors.white,
            ),
          ),
        )
      ],
      duration: Duration(seconds: 5), // this effect will only last for 5s
    );
  }
}

Выход:

Ответ 2

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

Ответ 3

Оберните ваш текущий верхний виджет стековым виджетом, в котором первым дочерним элементом стека будет ваш текущий виджет. Ниже этого виджета добавьте Контейнер с черным цветом, завернутый в 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(...) для загрузки ваших изображений (они будут загружены в правильном разрешении) и поместить эти виджеты в другой контейнер, который также будет дочерним элементом стека, и будет помещен под черным контейнером в списке детей (виджет "Непрозрачность" в приведенном выше примере).

Ответ 4

Я считаю, что лучше всего иметь виджет, который будет размером с экран. Начните с контейнера и измените его непрозрачность, а поверх него начните добавлять элементы учебника. Чтобы получить размер контейнера, вы можете использовать MediaQuery для определения ширины и высоты телефона. Посетите этот сайт о том, как создавать адаптивные приложения

Ответ 5

Есть библиотека прожектора флаттера: flutter_spotlight которую вы можете попробовать. Вы можете найти это здесь. Он используется для освещения предметов для учебников и т.д.

Ответ 6

Попробуйте использовать Подсветку Coachmark, чтобы получить то, что вам нужно!

Кроме того, импортируйте пакет, используя псевдоним (например, frs), чтобы избежать столкновения его функций с собственными функциями Flutter, имеющими схожие имена.