pluto_layout 0.3.0 icon indicating copy to clipboard operation
pluto_layout: ^0.3.0 copied to clipboard

PlutoLayout is a Flutter UI package that can configure a menu or tab screen on each side.

PlutoLayout - v0.3.0 #

License: MIT

PlutoLayout is a Flutter UI package that can configure a menu or tab screen on each side.
You can adjust the width of the tab menu by dragging the right border of the tab menu.
You can also assign custom shortcut keys to open or close tab views and resize tab views.

Demo #

Demo Web

Installation #

pub.dev

Screenshot #

PlutoLayout Screenshot

Usage #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pluto_layout/pluto_layout.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const ExamplePage(),
    );
  }
}

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

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: 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.arrowUp):
          PlutoLayoutActions.increaseTabView(),
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowDown):
          PlutoLayoutActions.decreaseTabView(),
        },
        body: const PlutoLayoutContainer(
          child: Text('Body container'),
        ),
        top: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'top1',
                title: 'top1',
                tabViewBuilder: (e) => const Text('top1'),
              ),
              PlutoLayoutTabItem(
                id: 'top2',
                title: 'top2',
                tabViewBuilder: (e) => const Text('top2'),
              ),
            ],
          ),
        ),
        left: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'left1',
                title: 'left1',
                tabViewBuilder: (e) => const Text('left1'),
              ),
              PlutoLayoutTabItem(
                id: 'left2',
                title: 'left2',
                tabViewBuilder: (e) => const Text('left2'),
              ),
            ],
          ),
        ),
        right: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'right1',
                title: 'right1',
                tabViewBuilder: (e) => const Text('right1'),
              ),
              PlutoLayoutTabItem(
                id: 'right2',
                title: 'right2',
                tabViewBuilder: (e) => const Text('right2'),
              ),
            ],
          ),
        ),
        bottom: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'bottom1',
                title: 'bottom1',
                tabViewBuilder: (e) => const Text('bottom1'),
              ),
              PlutoLayoutTabItem(
                id: 'bottom2',
                title: 'bottom2',
                tabViewBuilder: (e) => const Text('bottom2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

develop packages that make it easy to develop admin pages or CMS with Flutter.


Buy me a coffee


Jetbrains provides a free license #

IDE license support

29
likes
140
pub points
64%
popularity

Publisher

verified publisher iconweblaze.dev

PlutoLayout is a Flutter UI package that can configure a menu or tab screen on each side.

Homepage
Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

collection, flutter, flutter_riverpod, rxdart

More

Packages that depend on pluto_layout