genui_button 0.0.2

genui_button: ^0.0.2 copied to clipboard

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: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Here is our custom UI component from the catalog:',
            ),
            const SizedBox(height: 20),
            // Example showing just the schema structure.
            // In a real GenUI application, this would be dynamically
            // rendered by the layout engine using [genUiButton].
            Text(
              'Item Name: ${genUiButton.name}',
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            Builder(
              builder: (ctx) {
                // A mock context for testing local rendering
                return genUiButton.widgetBuilder(
                  _MockContext(
                    data: {
                      'label': 'Click Me!',
                      'type': 'filled',
                      'backgroundColor': '#FF5733',
                      'foregroundColor': '#FFFFFF',
                      'borderRadius': 8.0,
                      'elevation': 4.0,
                      'padding': 16.0,
                      'fontSize': 18.0,
                    },
                    id: 'mock_btn',
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class _MockContext implements CatalogItemContext {
  @override
  final Object data;

  @override
  final String id;

  _MockContext({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 => throw UnimplementedError();

  @override
  DataContext get dataContext => throw UnimplementedError();

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

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