adrianos42/desktop

Desktop

pub package

Minimal Desktop widgets for Flutter.

• Navigation
  • Breadcrumb
  • Nav
  • Tab
  • Tree
• Data
  • List table
  • Date form field
  • Text form field
• Dialogs
  • Dialog
  • Message
  • Tooltip
  • Date picker
  • Drawer
• Input
  • Button
  • Context menu
  • Dropdown menu
  • Hyperlink
  • Slider
  • Checkbox
  • Radio
  • Toggle switch
• Status
  • Progress indicator
• Text
  • Text field
  • Selectable text
• Scrollbar

Gallery

Navigation

Breadcrumb	Nav
breadcrumb	nav_vertical

Nav Horizontal	Tree
nav_horizontal	tree

Tab	Custom Tab
tab	tab_custom

Data

List Table	List Table Borderless
list_table	list_table_borderless

Text Form Field	Date Form Field
text_form_field	date_form_field

Dialogs

Dialog	Date Picker
dialog	date_picker

Tooltip	Message
tooltip	message_error

Input

Button	Hyperlink
button	hyperlink

Slider	Checkbox
slider	checkbox

Radio	Toggle Switch
radio	toggle_switch

Status

Linear Progress Indicator	Circular Progress Indicator
linear_progress_bar	circular_progress

See Gallery, for more examples.

Example

DesktopApp(
  theme: ThemeData(
    brightness: Brightness.dark,
    primaryColor: PrimaryColors.royalBlue.primaryColor,
  ),
  home: Nav(
    trailingMenu: [
      NavItem(
        title: 'settings',
        builder: (context) => NavDialog(
          child: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(32.0),
            width: 600.0,
            child: Text(
              'Settings page',
              style: textTheme.subtitle,
            ),
          ),
        ),
        icon: Icons.settings,
      ),
    ],
    items: [
      NavItem(
        builder: (context) => Center(
            child: Text(
          'Home',
          style: textTheme.title,
        )),
        title: 'Home',
        icon: Icons.today,
      ),
      NavItem(
        builder: (context) => Center(
            child: Text(
          'Library',
          style: textTheme.title,
        )),
        title: 'Library',
        icon: Icons.today,
      ),
    ],
  ),
)

Project structure

• desktop - The main package.
• docs - The folder with the html page built by the docs_web component.
• docs_web - The implementation of desktop documentation.