Skip to content

Dynamically adding items in NavigationPane #744

@Tsuzat

Description

@Tsuzat

Hey @bdlukaa, First of all, thanks for the fantastic tool. I have one query. I'm trying to add a new item in NavigationPane but can not add it.
Here is the code I'm using but as I'm trying to add a new item it does not show any effect.

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _index = 0;

  List<NavigationPaneItem> items = [
    PaneItemHeader(
      header: const Text(
        'Inputs',
      ),
    ),
    PaneItem(
      icon: const Icon(FluentIcons.home),
      title: const Text('Home'),
      body: const Settings(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    AppTheme appTheme = context.watch<AppTheme>();
    List<NavigationPaneItem> footerItems = [
      PaneItemSeparator(),
      PaneItem(
        icon: const Icon(FluentIcons.settings),
        title: const Text('Settings'),
        body: const Settings(),
      ),
      PaneItemAction(
        icon: const Icon(FluentIcons.add),
        title: const Text("New Project"),
        onTap: () {
          String name = "Unknown";
          showDialog<String>(
            context: context,
            builder: (context) => ContentDialog(
              title: const Text('Create a new Project'),
              content: TextBox(
                header: 'Project Name',
                placeholder: 'Name',
                onChanged: (value) {
                  name = value;
                },
              ),
              actions: [
                Button(
                  child: const Text('Create'),
                  onPressed: () {
                    PaneItem newItem = PaneItem(
                      icon: const Icon(FluentIcons.fabric_folder),
                      title: Text(name),
                      body: const Settings(),
                    );
                    items.add(newItem);
                    Navigator.pop(context);
                    // Delete file here
                  },
                ),
                FilledButton(
                  child: const Text('Cancel'),
                  onPressed: () => Navigator.pop(context),
                ),
              ],
            ),
          );
          setState(() {});
        },
      ),
    ];
    return WindowBorder(
      color: Colors.black,
      width: 1,
      child: NavigationView(
        appBar: NavigationAppBar(
          height: 30,
          automaticallyImplyLeading: false,
          title: MoveWindow(
            child: const Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Deep Learning Defect Sampling",
              ),
            ),
          ),
          actions: Row(
            children: [
              Expanded(child: MoveWindow()),
              ToggleSwitch(
                checked: FluentTheme.of(context).brightness == Brightness.dark,
                onChanged: (v) {
                  appTheme.mode = v ? ThemeMode.dark : ThemeMode.light;
                },
                content: const Text("Dark Mode"),
              ),
              const WindowsButtons(),
            ],
          ),
        ),
        pane: NavigationPane(
          header: Padding(
            padding: const EdgeInsets.all(10.0),
            child: SizedBox(
              height: 24,
              child: Row(
                children: [
                  Image.asset(
                    "assets/app_icon.png",
                  ),
                  const SizedBox(width: 5),
                  Center(
                    child: Text(
                      "DLDS",
                      style: FluentTheme.of(context).typography.bodyStrong,
                    ),
                  ),
                ],
              ),
            ),
          ),
          selected: _index,
          onChanged: (value) => setState(() => _index = value),
          items: items,
          footerItems: footerItems,
        ),
      ),
    );
  }
}
demo.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions