genui_button 0.0.4

A GenUI compatible button widget package. Provides a GenUIButton catalog item for GenUI agents to produce interactive UI.

example/lib/main.dart

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

// 1. Initialize the GenUI Message Processor equipped with our custom button:
final a2uiMessageProcessor = A2uiMessageProcessor(
  catalogs: [
    CoreCatalogItems.asCatalog().copyWith([genUiButton]),
  ],
);

// 2. Set up the AI Content Generator (e.g., Firebase, Gemini, etc.)
// Provide it with the tools/system instructions to tell the AI how to use it.
/*
final contentGenerator = FirebaseAiContentGenerator(
  systemInstruction: 'Use GenUIButton to provide user actions with custom styling.',
  additionalTools: a2uiMessageProcessor.getTools(),
);
*/

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GenUIButton Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GenUIButton Example')),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Here are some custom UI components from the catalog:',
              ),
              const SizedBox(height: 20),

              // Button 1: Custom Colored Button
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Custom Colored Button',
                        'type': 'filled',
                        'backgroundColor': '#FF5733',
                        'foregroundColor': '#FFFFFF',
                        'borderRadius': 8.0,
                        'elevation': 4.0,
                        'padding': 16.0,
                        'fontSize': 18.0,
                        'tooltip': 'I am a custom colored button',
                      },
                      id: 'mock_btn_1',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 2: Theme Fallback Button (No custom colors)
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Theme Fallback Button',
                        'type': 'filled',
                        'borderRadius': 8.0,
                        'elevation': 2.0,
                        'padding': 16.0,
                        'fontSize': 16.0,
                        'tooltip': 'I use the app theme primary color',
                      },
                      id: 'mock_btn_2',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 3: Theme Fallback Outlined Button
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Outlined Theme Button',
                        'type': 'outlined',
                        'borderRadius': 12.0,
                        'padding': 16.0,
                        'fontSize': 16.0,
                        'tooltip': 'I use the app theme outlne color',
                      },
                      id: 'mock_btn_3',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 4: Full Width Theme Fallback Button
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Full Width Button',
                        'type': 'elevated',
                        'borderRadius': 16.0,
                        'elevation': 4.0,
                        'padding': 20.0,
                        'fontSize': 18.0,
                        'fullWidth': true,
                        'tooltip': 'I stretch to fill available width',
                      },
                      id: 'mock_btn_4',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 5: Realistic Action with Confirmation
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Destructive Action',
                        'type': 'filled',
                        'backgroundColor': '#D32F2F',
                        'action': 'delete_item',
                        'confirmation': {
                          'title': 'Delete Item?',
                          'message': 'This action cannot be undone.',
                          'confirmText': 'Delete',
                          'cancelText': 'Keep',
                        },
                      },
                      id: 'mock_btn_5',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 6: Context Mapping Demo
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Send with Context',
                        'type': 'outlined',
                        'action': 'submit_form',
                        'contextMapping': {
                          'user_email': 'session/email',
                          'form_id': 'current_form_id',
                        },
                        'data': {
                          'source': 'example_app',
                        },
                      },
                      id: 'mock_btn_6',
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _MockContext implements CatalogItemContext {
  @override
  final Object data;

  @override
  final String id;

  final BuildContext context;

  _MockContext({required this.context, required this.data, required this.id});

  @override
  DispatchEventCallback get dispatchEvent => (UiEvent event) {
    if (event is UserActionEvent) {
      debugPrint('Mock Button clicked! Action: ${event.name}');
    }
  };

  @override
  ChildBuilderCallback get buildChild =>
      (String id, [DataContext? dataContext]) => const SizedBox.shrink();

  @override
  BuildContext get buildContext => context;

  @override
  late final DataContext dataContext = _MockDataContext();

  @override
  GetComponentCallback get getComponent =>
      (String id) => null;

  @override
  String get surfaceId => 'mock_surface';
}

class _MockDataContext extends DataContext {
  _MockDataContext() : super(DataModel(), '') {
    update(DataPath('session/email'), '[e-mail]');
    update(DataPath('current_form_id'), 'form_123');
  }
}