Question about widgets inside Tabs.

[DitriXNew]

Hi, I am new to Flutter, and I'm trying to work with Tabs. I took an example and tried to add a ToggleSwitch, but I can't understand why it doesn't change its state when clicked. Could you please provide an example where we can add some widgets inside these tabs?

Thanks.

[bdlukaa]

You can see the toggle switch example here

[DitriXNew]

Yes, I saw its, but when I add it to the page - it stop switching. And this is my question - why? I take demo, and just add date and toggle switch, and now I can not change it.

import 'dart:math';

import 'package:example/widgets/page.dart';
import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/foundation.dart';
import 'package:window_manager/window_manager.dart';

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

  @override
  State<TabViewPage> createState() => _TabViewPageState();
}

class _TabViewPageState extends State<TabViewPage> with PageMixin {
  int currentIndex = 0;
  List<Tab>? tabs;

  TabWidthBehavior tabWidthBehavior = TabWidthBehavior.equal;
  CloseButtonVisibilityMode closeButtonVisibilityMode =
      CloseButtonVisibilityMode.always;
  bool showScrollButtons = true;
  bool wheelScroll = false;
  DateTime selectedDate = DateTime.now();
  bool toggleValue = false;

  Tab generateTab(int index) {
    final allIcons = FluentIcons.allIcons.values;
    late Tab tab;
    tab = Tab(
      text: Text('Document $index'),
      semanticLabel: 'Document #$index',
      icon: Icon(allIcons.elementAt(Random().nextInt(allIcons.length))),
      body: Container(
        padding: const EdgeInsets.all(16),
        color:
            Colors.accentColors[Random().nextInt(Colors.accentColors.length)],
        child: Column(
          children: [
             InfoLabel(
              label: 'Date:',
              child: DatePicker(
                selected: selectedDate,
                onChanged: (DateTime? date) {
                  if (date != null) {
                    setState(() {
                      selectedDate = date;
                    });
                  }
                },
              ),
            ),
            const SizedBox(height: 20),
            ToggleSwitch(
              checked: toggleValue,
              onChanged: (bool value) {
                setState(() {
                  toggleValue = value;
                });
              },
              content: const Text('ToggleSwitch'),
            ),
          ],
        ),
      ),
      onClosed: () {
        setState(() {
          tabs!.remove(tab);

          if (currentIndex > 0) currentIndex--;
        });
      },
    );
    return tab;
  }

  @override
  Widget build(BuildContext context) {
    tabs ??= List.generate(3, generateTab);
    final theme = FluentTheme.of(context);
    return ScaffoldPage.scrollable(
      header: const PageHeader(title: Text('TabView')),
      children: [
        SizedBox(
          height: 400,
          child: TabView(
            tabs: tabs!,
            currentIndex: currentIndex,
            onChanged: (index) => setState(() => currentIndex = index),
            tabWidthBehavior: tabWidthBehavior,
            closeButtonVisibility: closeButtonVisibilityMode,
            showScrollButtons: showScrollButtons,
            onNewPressed: () {
              setState(() {
                final index = tabs!.length + 1;
                final tab = generateTab(index);
                tabs!.add(tab);
              });
            },
            onReorder: (oldIndex, newIndex) {
              setState(() {
                if (oldIndex < newIndex) {
                  newIndex -= 1;
                }
                final item = tabs!.removeAt(oldIndex);
                tabs!.insert(newIndex, item);

                if (currentIndex == newIndex) {
                  currentIndex = oldIndex;
                } else if (currentIndex == oldIndex) {
                  currentIndex = newIndex;
                }
              });
            },
            stripBuilder: kIsWeb
                ? null
                : (context, strip) {
                    return DragToMoveArea(child: strip);
                  },
          ),
        ),
      ],
    );
  }
}

[bdlukaa]

Try to wrap the body of the page in a StatefulBuilder. Essentially, since the tabs are not rebuilt when the parent is rebuilt, their state remains the same - which means you need a stateful widget on the body of the tab to be updated.