xp_ui #

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

Screenshots #

[screenshot of flutter app window usin xp_ui components]

Installation #

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

dependencies:
  xp_ui: ^0.0.1

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'),
);

TitleBar

Provides the window title bar with customizable 4 action button.

[Xp style window title bar]

Scaffold(
    appBar: TitleBar(
        'Example',
        showHelpButton: true,
        showMaximizeButton: true,
        showMinimizeButton: true,
        showCloseButton: true,
        onHelpButtonPressed: () {},
      )
)

Button

[enabled button] [disabled 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.

[xp style green progress bar]

ProgressBar(
    value: 82.0
)

Checkbox

[two xp style checkboxes]

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

Textbox

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

[two xp style text boxes]

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

Dialogs

[two xp style alert dialog]

 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;

[two xp style alert dialog]

AlertType.warning;

[two xp style alert dialog]

AlertType.question;

[two xp style alert dialog]

AlertType.info;

[two xp style alert dialog]

AlertType.success;

[two xp style alert dialog]

Contributing #

You can contribute in different ways:

• Creating new Windows95 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.