Add 'key' parameter to PaneItem..

[arrowxpr]

Is your feature request related to a problem? Please describe.

I have been using NavigationPane with some static PanItems as part of my application's home page. I later used the same widget to build something dynamic, generating PanItems based on some data model.. Now I think the idea is clear. But the problem is that PanItem lacks the key parameter, and that causes my widgets to recreate themselves on every setState call..

But what is the next problem that follows? Well, Imagine I have a PanItem widget that contains a textfield, and let's say I update the data model whenever the textfield's value changes... now since my PanItems come from the data model, my widget gets recreated and the textfield loses its focus, and that is not a desirable behavior.

Describe the solution you'd like
Adding key parameter to the PanItem widget, or any other approach to solve the addressed issue, is much appreciated.

Describe alternatives you've considered
In the meantime I'm using PageView widget to achieve a sort of desirable outcome.

Additional context
Sample code to replicate the issue

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      pane: NavigationPane(
          selected: index,
          onChanged: (i) {
            setState(() {
              index = i;
            });
          },
          items: [
            ...List.generate(
                7,
                (index) => PaneItem(
                      /// I wish the 'key' parameter existed here :(.... Will it prevent the Kaboom though?
                      title: const Text('title'),
                      icon: const Icon(FluentIcons.radio_bullet),
                      body: Center(
                        child: TextBox(
                          header: index.toString(),
                          onChanged: (value) {
                            setState(() {
                              /// KABOOM.. WE LOSE TextBox's FOCUS HERE!!!
                            });
                          },
                        ),
                      ),
                    ))
          ]),
    );
  }
}

Share your thoughts
Thank you!

[codeeuser]

I have this issue on iPad iOS Simulator but work properly on iPhone iOS and macOS. I am not sure the root cause and hope will be resolved as soon as possible.

As I reproduced the issue, i found that the TextBox has setted autofocus true which give me OK as a workaround.

[bdlukaa]

Hey! Can you check if #660 fixes the issue?

[arrowxpr]

Hey! Thank you for the response. I just performed a quick test on that, it looks like the key parameter accepts GlobalKey! I went with it but the issue still persisted in my case. A key of type Key would be more preferable I guess. Thank you again for your efforts.