Rudiksz / tabpanel

Hello!

First of all, thanks for this awesome package. It'll help me a lot if you can tell me how to set the initial size for each tabs. I want to achieve this layout when the application starts.

What I want:

What I'm getting:

I have tried to do something like this:

 midlePanel.updateSize(0,DragUpdateDetails(globalPosition: Offset(379.0, 504.0)));

But sadly its not working.... ☹

I tried to fork the project and add some updates but unfortunately I don't work with mobx 😅

Calling updateSize before the panels were built will have no effect.

https://pub.dev/documentation/tabpanel/latest/tabpanel/TabPanel-class.html
The TabPanel class has a panelSizes property that can be set using the constructor, but it accepts fixed width values. I think I added it in the constructor by reflex, because it is not intended to be used for initial sizing.

tabpanel/lib/src/tab_panel.dart

Line 230 in 473d645

panelSizes = List.filled(

Currently the space is divided equally between the tabs by default for simplicity.

Probably it would make more sense to have an flex property that would control the way children are sized, but that would require rewriting that line into a more sophisticated algorithm (or even adapt the one that the Flex widget uses).

Try the new 0.2.3 version.
I updated the readme with an example that does exactly your layout.

Note that the new flex property is just for proportional sizing and it defaults to 1.
There is no mechanism to have fixed width panels because they are meant to be infinitely nestable and dynamic.

Let me know if you have any issues.

Added a new version (0.2.4) with a body property for the panels, to set the widget to be displayed when it's empty.

This:

void main() async {
  // One initial panel
  // final tabPanel = TabPanel(defaultPage: YourDefaultPage());

  // or Create a more complex initial tab structure
  final tabPanel = TabPanel(
      defaultPage: PageA(),
      panels: [
        TabPanel(
          defaultPage: PageA(),
          panels: [],
          flex: 1,
        ),
        TabPanel(
          defaultPage: PageA(),
          axis: Axis.vertical,
          body: Container(color: Colors.blue),
          panels: [
            TabPanel(
              defaultPage: PageA(),
              panels: [],
              flex: 3,
              body: Container(color: Colors.green),
            ),
            TabPanel(
              defaultPage: PageA(),
              panels: [],
              flex: 1,
              body: Container(color: Colors.red),
            ),
          ],
          flex: 2,
        ),
        TabPanel(
          defaultPage: PageA(),
          panels: [],
          flex: 1,
        ),
      ],
    );

  runApp(
    MaterialApp(
      home: TabPanelWidget(tabPanel),
    ),
  );
}

Will give you this:

Try the new 0.2.3 version. I updated the readme with an example that does exactly your layout.

Note that the new flex property is just for proportional sizing and it defaults to 1. There is no mechanism to have fixed width panels because they are meant to be infinitely nestable and dynamic.

Let me know if you have any issues.

Man, You are Awesome! 😁 Thank you very much!! 🙏

How to set initial size for each Panel?

Hello!

What I want:

What I'm getting: