genui_button #

A GenUI-compatible button widget package, giving AI agents the ability to generate highly styled buttons connected to your app's interactions.

Features #

• Provides a GenUIButton widget defined as a GenUI CatalogItem.
• Theme Support: Seamlessly falls back to your app's Material 3 ThemeData if properties are absent!
• Deep UI Control: Supports full width layout, custom tooltips, shadowing, explicit border colors and widths.
• Typographic Control: Explicit font weight declarations and letter spacing customizations.
• Material Styles: Supports elevated, filled, outlined, and text visual button types.
• Integrates flawlessly with genui properties to accept a label string and action ID payload.
• Out-of-the-box UserActionEvent triggering when tapping.
• Handled Accessibility out-of-the-box with Semantics.

Getting started #

In your pubspec.yaml, add the dependency:

dependencies:
  flutter:
    sdk: flutter
  genui_button: ^0.0.3

Usage #

Simply register genUiButton with your GenUI catalogues:

import 'package:genui_button/genui_button.dart';
import 'package:genui/genui.dart';

final a2uiMessageProcessor = A2uiMessageProcessor(
  catalogs: [
    CoreCatalogItems.asCatalog().copyWith([genUiButton])
  ],
);

Then your FirebaseAiContentGenerator (or similar generator) system instruction can tell the agent to use GenUIButton globally.

final contentGenerator = FirebaseAiContentGenerator(
  systemInstruction: 'Use GenUIButton to provide user actions with custom styling.',
  additionalTools: a2uiMessageProcessor.getTools(),
);

Whenever the agent generates a UI containing a button, it can trigger UserActionEvent actions back to the app logic that you configure.

The AI can also deeply customize the button's look dynamically using the schema:

• type: elevated, filled, outlined, text
• backgroundColor: #FF5733
• foregroundColor: #FFFFFF
• borderColor: #000000
• borderWidth: 1.5
• shadowColor: #FF0000
• borderRadius: 8.0
• elevation: 4.0
• padding: 16.0
• fontSize: 18.0
• fontWeight: bold, normal, w700
• letterSpacing: 1.2
• fullWidth: true
• tooltip: "Click me to proceed!"

Example #

See the example/ folder for a more comprehensive Flutter project demonstrating how genui_button parses styling under the hood, including its interactions with parent themes!