Feature to hide tabs area

[garthawaters]

Hi

Just a quick question please. Is it possible to hide the top tab widget if there is only one tab?

Many Thanks Garth

[caduandrade]

Hi @garthawaters!

Currently, there is no such feature but I will think about how to do it. I hadn't thought of that.

For now, you could manually handle it in your State creating or not the TabbedView given the number of tabs.

[garthawaters]

Thanks Carlos Wow, your response is amazing – Thank you Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Friday, 18 November 2022 21:39To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) Hi @garthawaters!Currently, there is no such feature but I will think about how to do it. I hadn't thought of that.For now, you could manually handle it in your State creating or not the TabbedView given the number of tabs.—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> 

[caduandrade]

I think it could be a parameter in TabbedView. The developer could hide the tab area using whatever rule he wants (not necessarily when it has only one tab). What do you think?

[garthawaters]

That would be great, thank you Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Friday, 18 November 2022 21:45To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) I think it could be a parameter in TabbedView. The developer could hide the tab area using whatever rule he wants (not necessarily when it has only one tab). What do you think?—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> 

[garthawaters]

I have a problem though, I am using your flutter docking library which in turn uses the tabbed view project. The will be a version issue.I am so sorry that I am complicating your life, but your flutter libraries are excellent and I use them extensively. Many ThanksGarth Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Friday, 18 November 2022 21:45To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) I think it could be a parameter in TabbedView. The developer could hide the tab area using whatever rule he wants (not necessarily when it has only one tab). What do you think?—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> 

[caduandrade]

Hi @garthawaters! I did the commit but maybe I will have to change it.

Do you intend to hide the tabs area in the Docking? If so, maybe it's better if I put the tabsAreaVisible property on the theme and not on the TabbedView. Then you can create the theme around Docking.

If you're really going to use it in Docking, you want to hide the area when there's only one DockingItem, right? I ask this because otherwise there will be no way to perform the drag that is done through the tab.

Awaiting return. I can move to the theme without any problem. :+1:

[garthawaters]

Hi Carlos Yes I am creating the TabbedView via docking.  So the ‘tabsAreaVisible’  option does sound right. Once again, I really appreciate you entertaining my request for a change. Is it possible to still keep the TabButtons visible when the tab is hidden?  Garth  Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Saturday, 19 November 2022 21:43To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) Hi @garthawaters! I did the commit but maybe I will have to change it.Do you intend to hide the tabs area in the Docking? If so, maybe it's better if I put the tabsAreaVisible property on the theme and not on the TabbedView. Then you can create the theme around Docking.—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> 

[caduandrade]

No problem. With the change I made, no TabButton will be visible as the entire area will hide. Then the Tab and its TabButton will disappear. The TabButton inside the area (Tabs area buttons) as well. I didn't quite understand which TabButton you would like to keep. Would the ones in the area (Tabs area buttons) build by tabsAreaButtonsBuilder?

[garthawaters]

Thank you Carlos. Hiding the tab buttons as well will be perfect. Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Saturday, 19 November 2022 22:18To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) No problem. With the change I made, no TabButton will be visible as the entire area will hide. Then all TabButton inside the tabs will disappear with them. The TabButton inside the area (Tabs area buttons) as well. I didn't quite understand which TabButton you would like to keep. Would the ones in the area (Tabs area buttons) build by tabsAreaButtonsBuilder?—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> 

[caduandrade]

Hi @garthawaters !

I kept the tabsAreaVisible property in the TabbedView and added a visible property in the theme data. The Widget property is optional and overrides the theme property.

My test in the Docking main example (Using Layout listener to detect one single DockingItem):

import 'package:docking/docking.dart';
import 'package:flutter/material.dart';
import 'package:tabbed_view/tabbed_view.dart';

void main() {
  runApp(DockingExampleApp());
}

class DockingExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Docking example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DockingExamplePage(),
    );
  }
}

class DockingExamplePage extends StatefulWidget {
  @override
  _DockingExamplePageState createState() => _DockingExamplePageState();
}

class _DockingExamplePageState extends State<DockingExamplePage> {
  late DockingLayout _layout;

  @override
  void initState() {
    super.initState();

    int v = 1;
    _layout = DockingLayout(
        root: DockingRow([
      _build(v++),
      DockingColumn([
        DockingRow(
            [_build(v++, maximizable: false), _build(v++, closable: false)]),
        DockingTabs([_build(v++), _build(v++), _build(v++)]),
        _build(v++)
      ])
    ]));
    _layout.addListener(_updateTabsAreaVisibility);
  }

  DockingItem _build(int value, {bool closable = true, bool? maximizable}) {
    return DockingItem(
        name: value.toString(),
        closable: closable,
        maximizable: maximizable,
        widget: Container(child: Center(child: Text('Child $value'))));
  }

  bool _checkboxValue = true;
  bool _tabsAreaVisible = true;

  @override
  Widget build(BuildContext context) {
    TabbedViewThemeData themeData = TabbedViewThemeData.classic();
    themeData.tabsArea.visible = _tabsAreaVisible;
    return Scaffold(
        body: TabbedViewTheme(
            data: themeData,
            child: Container(
                child: Column(children: [
                  ListTile(
                      leading: Checkbox(
                          value: _checkboxValue,
                          onChanged: (value) => _onCheckboxChange()),
                      title: Text('Tabs area visible')),
                  Expanded(child: Docking(layout: _layout))
                ]),
                padding: EdgeInsets.all(16))));
  }

  void _onCheckboxChange() {
    setState(() {
      _checkboxValue = !_checkboxValue;
      _tabsAreaVisible = _checkboxValue && !(_layout.root is DockingItem);
    });
  }

  void _updateTabsAreaVisibility() {
    final bool visible = _checkboxValue && !(_layout.root is DockingItem);
    if (_tabsAreaVisible != visible) {
      setState(() {
        _tabsAreaVisible = visible;
      });
    }
  }
}

What do you think? Is this what you wanted? Need something extra?

[garthawaters]

Thank you Carlos That is exactly what I had in mind. I really appreciate your hard work. Many ThanksGarth Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Saturday, 19 November 2022 23:03To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) Hi @garthawaters !I kept the tabsAreaVisible property in the TabbedView and added a visible property in the theme data. The Widget property is optional and overrides the theme property.My test in the Docking main example (Using Layout listener to detect one single DockingItem):import 'package:docking/docking.dart';import 'package:flutter/material.dart';import 'package:tabbed_view/tabbed_view.dart'; void main() {  runApp(DockingExampleApp());} class DockingExampleApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: 'Docking example',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: DockingExamplePage(),    );  }} class DockingExamplePage extends StatefulWidget {  @override  _DockingExamplePageState createState() => _DockingExamplePageState();} class _DockingExamplePageState extends State {  late DockingLayout _layout;   @override  void initState() {    super.initState();     int v = 1;    _layout = DockingLayout(        root: DockingRow([      _build(v++),      DockingColumn([        DockingRow(            [_build(v++, maximizable: false), _build(v++, closable: false)]),        DockingTabs([_build(v++), _build(v++), _build(v++)]),        _build(v++)      ])    ]));    _layout.addListener(_updateTabsAreaVisibility);  }   DockingItem _build(int value, {bool closable = true, bool? maximizable}) {    return DockingItem(        name: value.toString(),        closable: closable,        maximizable: maximizable,        widget: Container(child: Center(child: Text('Child $value'))));  }   bool _checkboxValue = true;  bool _tabsAreaVisible = true;   @override  Widget build(BuildContext context) {    TabbedViewThemeData themeData = TabbedViewThemeData.classic();    themeData.tabsArea.visible = _tabsAreaVisible;    return Scaffold(        body: TabbedViewTheme(            data: themeData,            child: Container(                child: Column(children: [                  ListTile(                      leading: Checkbox(                          value: _checkboxValue,                          onChanged: (value) => _onCheckboxChange()),                      title: Text('Tabs area visible')),                  Expanded(child: Docking(layout: _layout))                ]),                padding: EdgeInsets.all(16))));  }   void _onCheckboxChange() {    setState(() {      _checkboxValue = !_checkboxValue;      _tabsAreaVisible = _checkboxValue && !(_layout.root is DockingItem);    });  }   void _updateTabsAreaVisibility() {    final bool visible = _checkboxValue && !(_layout.root is DockingItem);    if (_tabsAreaVisible != visible) {      setState(() {        _tabsAreaVisible = visible;      });    }  }}What do you think? Is this what you wanted? Need something extra?—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> 

[garthawaters]

I am sorry but I am unable to support your project financially right now. The economy in South Africa is not great.So for the moment I live without an income but I am developing a product that hopefully will change my financial position soon. I will then, gladly contribute to your great libraries. Many ThanksGarth Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Saturday, 19 November 2022 23:03To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) Hi @garthawaters !I kept the tabsAreaVisible property in the TabbedView and added a visible property in the theme data. The Widget property is optional and overrides the theme property.My test in the Docking main example (Using Layout listener to detect one single DockingItem):import 'package:docking/docking.dart';import 'package:flutter/material.dart';import 'package:tabbed_view/tabbed_view.dart'; void main() {  runApp(DockingExampleApp());} class DockingExampleApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: 'Docking example',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: DockingExamplePage(),    );  }} class DockingExamplePage extends StatefulWidget {  @override  _DockingExamplePageState createState() => _DockingExamplePageState();} class _DockingExamplePageState extends State {  late DockingLayout _layout;   @override  void initState() {    super.initState();     int v = 1;    _layout = DockingLayout(        root: DockingRow([      _build(v++),      DockingColumn([        DockingRow(            [_build(v++, maximizable: false), _build(v++, closable: false)]),        DockingTabs([_build(v++), _build(v++), _build(v++)]),        _build(v++)      ])    ]));    _layout.addListener(_updateTabsAreaVisibility);  }   DockingItem _build(int value, {bool closable = true, bool? maximizable}) {    return DockingItem(        name: value.toString(),        closable: closable,        maximizable: maximizable,        widget: Container(child: Center(child: Text('Child $value'))));  }   bool _checkboxValue = true;  bool _tabsAreaVisible = true;   @override  Widget build(BuildContext context) {    TabbedViewThemeData themeData = TabbedViewThemeData.classic();    themeData.tabsArea.visible = _tabsAreaVisible;    return Scaffold(        body: TabbedViewTheme(            data: themeData,            child: Container(                child: Column(children: [                  ListTile(                      leading: Checkbox(                          value: _checkboxValue,                          onChanged: (value) => _onCheckboxChange()),                      title: Text('Tabs area visible')),                  Expanded(child: Docking(layout: _layout))                ]),                padding: EdgeInsets.all(16))));  }   void _onCheckboxChange() {    setState(() {      _checkboxValue = !_checkboxValue;      _tabsAreaVisible = _checkboxValue && !(_layout.root is DockingItem);    });  }   void _updateTabsAreaVisibility() {    final bool visible = _checkboxValue && !(_layout.root is DockingItem);    if (_tabsAreaVisible != visible) {      setState(() {        _tabsAreaVisible = visible;      });    }  }}What do you think? Is this what you wanted? Need something extra?—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***> 

[caduandrade]

Don't worry about support. I'm glad the package is helping you. Hope all goes well with your project! :wink:

TabbedView ( 1.15.0) and Docking ( 1.5.0) available. Closing this issue. If you need anything else, just let me know.

[garthawaters]

Thank you Carlos, I am extremely grateful for your help. Sent from Mail for Windows From: Carlos Eduardo Leite de AndradeSent: Sunday, 20 November 2022 16:39To: caduandrade/tabbed_viewCc: garthawaters; MentionSubject: Re: [caduandrade/tabbed_view] Feature to hide tabs area (Issue #19) Don't worry about support. I'm glad the package is helping you. Hope all goes well with your project! 😉Version 1.15.0 of TabbedView and Docking available. Closing this issue. If you need anything else, just let me know.—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>