PlutoLayout is a Flutter package for configuring layouts such as CMS or admin service.
You can configure tab views or menus on the top, bottom, left, and right sides.
It also supports keyboard shortcuts and allows you to toggle or resize the tab view.
Default container PlutoLayoutContainer
You need to set the body container by default, and you can optionally add containers to the top, bottom, left, and right sides.
final layout = PlutoLayout(
body: PlutoLayoutContainer(
child: Text('body container'),
),
top: PlutoLayoutContainer(
child: Text('top container'),
),
bottom: PlutoLayoutContainer(
child: Text('bottom container'),
),
left: PlutoLayoutContainer(
child: Text('left container'),
),
right: PlutoLayoutContainer(
child: Text('right container'),
),
);
The tab widget consists of a menu button and a tab view area that is opened or closed when the menu button is toggled.
final layout = PlutoLayout(
body: PlutoLayoutContainer(
child: Text('body container'),
),
left: PlutoLayoutContainer(
child: PlutoLayoutTabs(
tabViewSizeResolver: PlutoLayoutTabViewSizeConstrains(
minSize: 100,
maxSize: 500,
initialSize: 300,
),
items: [
PlutoLayoutTabItem(
id: 'Files',
title: 'Files',
icon: Icon(Icons.file_present),
sizeResolver: PlutoLayoutTabItemSizeFlexible(0.3),
tabViewWidget: Text('Files tab view'),
),
PlutoLayoutTabItem(
id: 'Users',
title: 'Users',
icon: Icon(Icons.account_box),
sizeResolver: PlutoLayoutTabItemSizeFlexible(0.7),
tabViewWidget: Text('Users tab view'),
),
],
),
),
);
The size of the tab view that appears when the menu of the tab widget is toggled depends on the direction in which the tab widget is positioned.
In the case of left and right tabs, the size of the tab view means the width.
For top and bottom tabs, the size of the tab view means the height.
Here, a tab view means a container that wraps all tab items.
Also, in the case of the size of the tab view of each item,
In the case of left and right tabs, the size of the tab view of each item means the height.
In the case of top and bottom tabs, the size of the tab view of each item means the width.
Size of TabViewSize
- The size of
TabViewSize is set by adding tabViewSizeResolver property of PlutoLayoutTabs.
If not set, the size is automatically set to fit the screen size.
- Set
PlutoLayoutTabViewSizeFixed and PlutoLayoutTabViewSizeRatio to a fixed size.
Once set, the size cannot be changed, and when the size of the parent widget of PlutoLayout is changed, the size may change automatically.
PlutoLayoutTabViewSizeConstrains can limit the minimum and maximum sizes, and you can also set the default size.
You can change the size after it is set.
Size of TabViewItemSize
- The size of
TabViewItemSize is set by adding the sizeResolver property of each PlutoLayoutTabItem.
If not set, PlutoLayoutTabItemSizeFlexible is set to a value of 1.
PlutoLayoutTabItemSizeFlexible can pass a value between 0 and 1, and will be set to 1 if not passed.
When two items are activated, assuming that both items have a value of 1, the size is set in a ratio of 1:1.PlutoLayoutTabItemSizeInitial sets the initial size when the tab item is activated.
Shortcut settings
Shortcuts work with Flutter's Shortcuts widget.
You can pass desired shortcuts and Actions to the shortcuts property of PlutoLayout.
final layout = PlutoLayout(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.escape):
PlutoLayoutActions.hideAllTabView(),
LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit1):
PlutoLayoutActions.rotateTabView(
PlutoLayoutContainerDirection.left,
),
LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit2):
PlutoLayoutActions.rotateTabView(
PlutoLayoutContainerDirection.right,
),
LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowRight):
PlutoLayoutActions.increaseTabView(reverseByDirection: true),
LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowLeft):
PlutoLayoutActions.decreaseTabView(reverseByDirection: true),
},
body: PlutoLayoutContainer(
child: Text('body container'),
),
);
If you have additional questions or features that need to be added, please register in the GitHub issue.
PlutoLayout Github
