FluentUI - Navigation and state preservation example with Fluent_ui: 4.5.0

main_state_preservation_demo.dart

import 'package:fluent_ui/fluent_ui.dart';

main() {
  runApp(StatePreservation());
}

class StatePreservation extends StatefulWidget {
  @override
  State<StatePreservation> createState() => _StatePreservationState();
}

class _StatePreservationState extends State<StatePreservation> {
  int index = 0;

  @override
  Widget build(BuildContext context) => FluentApp(
        home: NavigationView(
          appBar: NavigationAppBar(title: Text("State preservation demo")),
          pane: NavigationPane(
              selected: index,
              onChanged: (i) {
                setState(() => index = i);
              },
              items: [
                PaneItem(
                  icon: Icon(
                    FluentIcons.accessibilty_checker,
                  ),
                  title: Text("LOREM"),
                  body: SizedBox.shrink(),
                ),
                PaneItem(
                    icon: Icon(FluentIcons.analytics_query),
                    title: Text("IPSUM"),
                    body: SizedBox.shrink()),
              ]),
          paneBodyBuilder: (item, body) => IndexedStack(
            index: index,
            children: [
              StatefullWidgetDemo(name: "LOREM"),
              StatefullWidgetDemo(name: "IPSUM")
            ],
          ),
        ),
      );
}

class StatefullWidgetDemo extends StatefulWidget {
  static final valueKey = ValueKey("___*test*___");

  final String name;

  const StatefullWidgetDemo({super.key, required this.name});

  @override
  State<StatefullWidgetDemo> createState() => _StatefullWidgetDemoState();
}

class _StatefullWidgetDemoState extends State<StatefullWidgetDemo>
    with AutomaticKeepAliveClientMixin {
  int i = 0;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text("${widget.name}"),
        Text(
          "$i",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 30,
          ),
        ),
        OutlinedButton(
            child: Text("ADD"),
            onPressed: () => setState(() {
                  i++;
                }))
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}