aurora_controls

Aurora UI-kit. This UI Kit aims to provide set of widgets and components that mimic the user interface of Aurora OS. It is designed to help Flutter applications look more similar to Aurora OS applications written in Qt.

Features

The current version of the UI Kit includes:

• A set of basic components such as:
  • Text fields: AuroraTextField, AuroraTextFormField, AuroraSearchField.
  • Interactive elements: AuroraButton, AuroraSwitch, AuroraSlider, AuroraNavigationIndicatorButton, AuroraAppBarButton.
  • Indicators: AuroraProgressCircle, AuroraProgressBar, AuroraBusyIndicator.
  • Navigation and decorative elements: AuroraPageRoute, AuroraScrollbar, AuroraScrollBehavior, AuroraSectionHeader.
  • The top menu is AuroraAppBar.
  • Pop-up menu _AuroraPopupMenu, which can be called by the openAuroraPopup function.
• Features of working with the app's theme:
• Show/hide the native background;
  • react to changing atmospheres;
  • receive information about the current atmosphere;
  • widgets AuroraApp, AuroraTheme.
• A set of icons and styles for the application.
• Demo application with all implemented components.

Usage

pubspec.yaml

Include aurora_controls as a dependency in your pubspec.yaml file:

  aurora_controls: ^1.0.0

Import the package in your Dart code:

    import 'package:aurora_controls/aurora_controls.dart';

Basic Example

Here's a simple example of how to create a button in the Aurora OS style:

import 'package:aurora_controls/aurora_controls.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return AuroraApp(
      home: Scaffold(
        appBar: const AuroraAppBar(headerText: 'Aurora OS Button Example'),
        body: Center(
          child: AuroraButton(
            onPressed: () {},
            label: 'Aurora OS Button',
          ),
        ),
      ),
    );
  }
}

For more comprehensive example, please see the demo application in the example folder.

Documentation

Each component have detailed documentation for its properties. The reference and the guidelines could be found in Figma and the Developer Portal.