Steps are not focused

[Andy]

Hi there,

I am trying to use the package to show onboarding tooltips, but all my steps are showing in the center of the screen and they are not focused on the proper widget. Also when I don't have any Focus widgets on my page all the steps show up regardless. What am I doing wrong?

Flutter version (Channel stable, 3.3.7)

Appreciate your help with this!

import 'package:flutter/material.dart';
import 'package:onboarding_overlay/onboarding_overlay.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Onboarding(
          steps: MyTooltips.steps,
          child: const MyHomePage(title: 'Flutter Demo Home Page')),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((Duration timeStamp) {
      final OnboardingState? onboarding = Onboarding.of(context);
      if (onboarding != null) {
        onboarding.show();
      }
    });
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        focusNode: MyTooltips.focusNodes[0],
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class MyTooltips {
  static List<FocusNode> get focusNodes {
    final List<FocusNode> list = [
      FocusNode(debugLabel: 'Onboarding Focus Node')
    ];

    return list;
  }

  static List<OnboardingStep> get steps {
    List<OnboardingStep> list = [
      OnboardingStep(
        focusNode: focusNodes[0],
        titleText: 'Right fab',
        bodyText: 'Tap to continue',
        shape: const CircleBorder(),
        fullscreen: false,
        overlayColor: Colors.blue.withOpacity(0.9),
        overlayShape: const CircleBorder(),
        hasLabelBox: true,
      )
    ];
    return list;
  }
}

[Zlati Pehlivanov]

The problem is your getter. Every time you call the MyTooltips.focusNodes, you get a new array of unique FocusNodes, so calling it twice you get 2 different arrays with different focus nodes.
If you replace

static List<FocusNode> get focusNodes {
    final List<FocusNode> list = [
      FocusNode(debugLabel: 'Onboarding Focus Node')
    ];

    return list;
  }

with

static List<FocusNode> focusNodes = [
    FocusNode(debugLabel: 'Onboarding Focus Node')
  ];

everything is working fine

[Andy]

You are so right! It works perfectly now. Thank you!