¿Cómo hacer una pantalla tutorial opaca en flutter?

Si encuentras algún problema en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes añadir el código al trabajo final.

Solución:

Puede usar esta biblioteca para ayudarlo a lograr lo que necesita. Le permite marcar las vistas que desea resaltar y cómo desea resaltarlas.

Envuelva su widget superior actual con un widget Stack, teniendo el primer hijo de Stack su widget actual. Debajo de este widget, agregue un contenedor con color negro, envuelto con Opacidad así:

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

luego debe crear recursos de imagen de las descripciones y flechas, en resoluciones 1x, 2x, 3x, y colocarlos en su carpeta de recursos en la estructura apropiada como se describe aquí: https://flutter.dev/docs/development/ui/ activos-e-imágenes # declarando-activos-de-imagen-conscientes-de-resolución

luego puede usar el widget Image.asset (…) para cargar sus imágenes (se cargarán en la resolución correcta), y colocar estos widgets en un contenedor diferente que también será un elemento secundario de la pila, y se colocarán debajo del contenedor negro en la lista de niños (el widget Opacity en el ejemplo anterior).

Como mencionó RoyalGriffin, puede usar la biblioteca highlighter_coachmark, y también soy consciente del error que está recibiendo, el error está ahí porque está usando RangeSlider clase que se importa de 2 paquetes diferentes. ¿Puedes probar este ejemplo en tu aplicación y comprobar si funciona?

1. Agregar highlighter_coachmark para usted pubspec.yaml Archivo

   dependencies:
     flutter:
       sdk: flutter
   
     highlighter_coachmark: ^0.0.3
   

2. Correr flutter packages get

---

Ejemplo:

import 'package:highlighter_coachmark/highlighter_coachmark.dart';

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

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


class _HomePageState extends State 
  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 callednFloatingActionButton",
            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
    );
  

---

Producción:

---

Aquí tienes las reseñas y puntuaciones

---

---

Utiliza Nuestro Buscador