gluestack-ui-flutter (alpha)

gluestack-ui-flutter is a universal UI library that provides optionally styled and accessible widgets. These widgets are designed for easy integration into applications developed with Flutter.

Documentation

You can try out the gluestack-ui-flutter widgets on this storybook link

Web app built with gluestack-ui-flutter

We are referring gluestack-ui to create gluestack-ui-flutter. Flutter documentation is in progress. You can find the detailed documentation for each component, including a list of props and examples, in gluestack-ui website.

Installation

flutter pub add gluestack_ui

Usage

Wrap the GSApp with GluestackProvider.

GluestackProvider(
  child: GSApp.router(
    ....
)

Here's an example of how to use GSButton widget into your flutter app:

import 'package:gluestack_ui/gluestack_ui.dart';

GSButton(
  action: GSActions.negative,
  variant: GSVariants.solid,
  size: GSSizes.$lg,
  onPressed: () {},
  style: GSStyle(
    web: GSStyle(
      bg: $GSColors.amber600,
    ),
    ios: GSStyle(
      bg: $GSColors.pink600,
    ),
    onHover: GSStyle(
      bg: $GSColors.green400,
    ),
    md: GSStyle(
      bg: $GSColors.pink400,
    ),
  ),
  child: const GSButtonText(text: "Click Here"),
)

All gluestack_ui_flutter widgets support dark theme. Package detects the current theme from Gluestack's inbuilt GSTheme.of(context).brightness. Hence, you can manage the theme mode from GSApp itself using the state management of your choice.

Customize tokens via token config

You can customize the default tokens to provide your own design values.

GluestackProvider(
  gluestackTokenConfig: GluestackTokenConfig(
    gsColorsToken: const GSColorsToken(
      primary600: Colors.pink,
      primary700: Colors.pink,
    ),
    gsFontSizeToken: const GSFontSizeToken(
      $sm: 12,
      $md: 14,
    ),
    // More token configurations....
  ),
  child: GSApp.router(
    ....
  ),
)

We have build the widgets from Figma config file. In case you want to customise the default values provided by the package for individual widgets, you can specify your own configuration for the widgets.

NOTE: Format of the configuration must be same as the one used by Gluestack internally. For example, for button please refer to the default config file for GSButton.

Below example provides custom configuration for GSButton widget.

// Example of button configuration.

const Map<String, dynamic> customButtonConfig = {
  ...
  '_dark': {
    'bg': '\$primary400',
    'borderColor': '\$primary700',
    ':hover': {
      'bg': '\$error300',
      'borderColor': '\$primary400',
    }
  }
  ...
};


GluestackProvider(
  gluestackCustomConfig: GluestackCustomConfig(
    button: customButtonConfig,
    buttonText: customButtonTextConfig,
    ...
  ),
  gluestackTokenConfig: GluestackTokenConfig(...),
  child: GSApp.router(
    ...
  ),
)

Future Scope

Enhanced Widget Configuration: The widgets will be designed in a modular fashion, allowing users to plug in different components or features as needed. This modular approach enables more complex and varied widget compositions.With more control over the widget design, developers can create applications that offer a better user experience, tailored to their target audience.
Configurable Token System: Design the token system to be scalable and customizable. Users should be able to add new tokens or modify existing ones to suit their project needs.

License

Edit this page on GitHub