xp_ui 0.3.0

A collection of Flutter widgets that faithfully replicate the iconic visual style of Windows XP. Easy to integrate to give your apps a unique retro tap.

xp_ui

Windows Xp UI components for Flutter apps, inspired on flutter95 and fluent_ui

Screenshots

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  xp_ui: ^0.3.0

To hide the native title bar and enable the maximize and minimize buttons install window_manager package. See Documentation

Components

XpApp

Required to load all Xp styles, is compatible with standart flutter material Widgets.

 XpApp(
    title: 'Flutter Demo',
    theme: XpThemeData(),
    debugShowCheckedModeBanner: false,
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
);

Window

XpWindow is the basic frame for a Xp-style layout. It supports a Sidebar on the left, and optional TitleBar at the top.

TitleBar

Provides the window title bar with customizable action buttons.

XpWindow(
    titlebar: TitleBar(
        'Example',
        leading: [
          XpCloseButton(),
          TitleBarActionButton(icon: ActionButtonIcon.minimize),
          TitleBarActionButton(icon: ActionButtonIcon.maximize),
        ],
        trailing: [
          TitleBarActionButton(icon: ActionButtonIcon.help),
        ]
      )
)

System Icon

Show Xp-style icons from SystemIcons collection.

SystemIcon(icon: XpSystemIcons.folderDocument)

Sidebar

Provides quick access to top-level collections of conent in your app.

XpWindow(
    sidebar: Sidebar(
          builder: (context, controller) => SingleChildScrollView(
                controller: controller,
                child: const Column(
                  spacing: 8,
                  children: [
                    SidebarExpandableItem(
                      initiallyExpanded: true,
                      title: Text('Details'),
                      children: [
                        Text(
                          'xp_ui package',
                          style: TextStyle(fontWeight: FontWeight.w600),
                        ),
                        Text(
                          'By Jessimalak',
                          style: TextStyle(fontSize: 14),
                        ),
                        Text(
                          'With 🩵 for Flutter community',
                          style: TextStyle(fontSize: 12),
                        )
                      ],
                    )
                  ],
                ),
              ),
          minWidth: 200,
          shownByDefault: true)
)

Sidebar Expandable Item

Similar to Material's ExpansionTitle with the style of original Xp style expandable panels on window sidebar.

SidebarExpandableItem(
    initiallyExpanded: true,
    title: Text('Expandable item'),
    children: [
        ListTile(
            label: Text('Documents'),
            icon: SystemIcon(icon: XpSystemIcons.folderDocument)),
        ListTile(
            label: Text('Music'),
            icon: SystemIcon(icon: XpSystemIcons.folderMusic)),
        ListTile(
            label: Text('My PC'),
            icon: SystemIcon(icon: XpSystemIcons.computer))
        ]),

Status bar

Provides the bottom window status bar with a child on the left side, and an optional list of widgets for the right side.

XpWindow(
    statusBar: StatusBar(
        trailing: const [Text('Slide 1'), Text('Data')],
        child: Text('Current progress 88%'),
      )
)

Button

 Button(
    child: const Text('Cancel'),
    onPressed: () {},
)

ProgressBar

you can provide a value between 0-100 to show progress, or null to show an indeterminated progress.

//with value
ProgressBar(value: 82.0)

//without value, indeterminated
ProgressBar()

Checkbox

XpCheckbox(
    value: true,
    label: 'checkbox label',
    onChanged: (value) {}
)
XpCheckbox(
    value: false,
    label: 'checkbox label',
    onChanged: (value) {}
)

Radio options

int _option = 0;
RadioOptions<int>(
  direction: Axis.horizontal,
  wrap: false,
  selected: _option,
  options:
  List.generate(5, (i) => RadioOption(enabled: true, value: i, label: 'Option $i')),
  onChanged: (value) {})

Textbox

The label can be a String or a Widget, is positioned by default on the top.

Textbox(
    labelText: 'Label Top Text',
)
            
Textbox(
    labelWidget: SystemIcon(icon: XpSystemIcons.email),
    labelPosition: TextboxLabelPosition.left,
)

Group

Group(
  label: Text("Group label"),
  spacing: 8,
  children: [
    Text('Group content'),
    SystemIcon(icon: XpSystemIcons.camera)
    ])

Dialogs

 showXpDialog(
    context: context,
    builder: (context) => const XpAlertDialog(
                    title: 'Simple Alert',
                    content: const Text('This is a simple alert dialog'),
                    actions: [
                            Button(
                                child: const Text('Cancel'),
                                onPressed: () {},
                                ),
                            Button(
                                child: const Text('Accept'),
                                onPressed: () {},
                                )
                            ],
                  ));

AlertType.error;

AlertType.warning;

AlertType.question;

AlertType.info;

AlertType.success;

---

Contributing

You can contribute in different ways:

• Creating new WindowsXp styled components.
  • Please include screenshots in your PRs!
  • Please update the example and tests to include the new component!
• Improving existing components with better options.
• Improving documentation both in code and this README file.
• Fixing lint issues.
• Creating feature requests.
  • Please include a screenshot.
  • Also don't expect a quick response, this is a hobby project.
• Reporting bugs.