flux_ai_ui 1.0.0

Open Flutter primitives for AI-native mobile interfaces.

Flux AI UI

中文 | English

Flux AI UI is a dependency-light Flutter component kit for AI-native mobile interfaces. It provides reusable widgets for agent progress, streaming answers, approvals, prompt input, source context, recommendations, compact tables, search, insight cards, code output, and fine-tuning controls.

The package is intentionally small: it depends only on Flutter, uses regular Material widgets, and exposes a single public barrel import.

Preview

Status

Flux AI UI is early but usable. The current release is best treated as a component gallery and starter kit for teams building AI products in Flutter. The widgets expose constructor data, callbacks, and theme tokens so teams can copy, customize, or wrap them for production workflows.

Platform Support

Flux AI UI is built with plain Flutter and Material widgets, so the component package can be used anywhere Flutter renders widgets:

• iOS
• Android
• Web
• macOS
• Windows
• Linux

The visual design and interaction defaults are optimized for mobile AI products. Components use touch-friendly spacing, narrow-screen layouts, adaptive wrapping, and responsive constraints so they work well on iPhone and Android devices first, while still rendering cleanly on Web and desktop surfaces. The example/ app includes Runner projects for all supported Flutter platforms.

Components

Core primitives:

• FluxAiTheme theme extension
• FluxPanel
• FluxPill

Agent and reasoning surfaces:

• FluxLoadingState
• FluxThinkingTrace
• FluxStreamingText
• FluxApprovalCard
• FluxToolChips
• FluxTaskRows

Conversation and input:

• FluxChatPanel
• FluxPromptBar
• FluxSearchPanel

Decision and context:

• FluxRecommendationCard
• FluxContextCards
• FluxInsightCards

Data and developer surfaces:

• FluxDataTableCard
• FluxDiffTable
• FluxRecordsTable
• FluxFilterTable
• FluxCodeBlock
• FluxFineTuneCard

Install

Install the published package from pub.dev:

flutter pub add flux_ai_ui

Or use the Git dependency when testing the latest source version:

dependencies:
  flux_ai_ui:
    git:
      url: https://github.com/kelvenbit/flux_ai_ui.git

Import the public barrel file:

import 'package:flux_ai_ui/flux_ai_ui.dart';

Quick Start

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

void main() => runApp(const DemoApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: FluxAiTheme.materialLight(),
      home: const Scaffold(
        body: Center(
          child: FluxStreamingText(
            text: 'The agent found three strong signals in the latest data.',
            sources: [
              FluxSource(title: 'Sales table', subtitle: 'Internal dataset'),
            ],
            followUps: ['Show the source rows', 'Draft a summary'],
          ),
        ),
      ),
    );
  }
}

Theme Customization

FluxAiTheme is a ThemeExtension, so you can keep the default Material theme and override only the design tokens you need.

final brandTheme = FluxAiTheme.light.copyWith(
  accent: const Color(0xFF2454E8),
  canvas: const Color(0xFFF7F8FB),
  panel: Colors.white,
  radius: 12,
  gap: 10,
);

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    scaffoldBackgroundColor: brandTheme.canvas,
    extensions: [brandTheme],
  ),
  home: const FluxPromptBar(hint: 'Ask your workspace...'),
);

Current tokens:

• ink, mutedInk
• canvas, panel, line
• accent, good, warn, bad
• radius, gap

Customization Model

Flux AI UI is designed to be copied, themed, and extended.

• Data-driven today: FluxThinkingTrace, FluxStreamingText, FluxApprovalCard, FluxToolChips, FluxTaskRows, FluxChatPanel, FluxPromptBar, FluxRecommendationCard, FluxContextCards, FluxDataTableCard, FluxDiffTable, FluxRecordsTable, FluxFilterTable, FluxSearchPanel, FluxInsightCards, FluxCodeBlock, and FluxFineTuneCard.
• Gallery presets: FluxDiffTable, FluxRecordsTable, FluxFilterTable, and FluxFineTuneCard include default demo data, but they now accept external data and callbacks.
• Visual customization: use FluxAiTheme for color, radius, spacing, and status tones.
• Behavior customization: use constructor data and callbacks for chat submission, prompt source/model selection, recommendation decisions, table filtering/selection, fine-tune changes, and insight page changes.

FluxPromptBar(
  sources: const [
    FluxPromptSource(
      label: 'Docs',
      subtitle: 'Knowledge base',
      icon: Icons.article,
    ),
  ],
  models: const [FluxPromptModel('Careful')],
  onSubmitted: (text) => debugPrint(text),
  onSourceSelected: (source) => debugPrint(source.label),
)

Run The Gallery

cd example
flutter pub get
flutter run

Choose an iOS simulator, Android emulator, web target, desktop target, or physical device from Flutter's device picker.

For a specific connected device:

cd example
flutter run -d <device-id>

The root package does not include an app entrypoint. Run and debug the gallery from example/, which contains the platform Runner projects and depends on the local package through path: ...

To preview the full component wall on Web:

cd example
flutter run -d chrome --web-port 8080 --web-hostname 127.0.0.1

Open http://127.0.0.1:8080/?preview=all.

Quality Checks

Run these before opening a pull request:

dart format .
flutter analyze
flutter test
cd example
flutter analyze
flutter test
cd ..
flutter pub publish --dry-run

Project Structure

lib/
  flux_ai_ui.dart              Public exports
  src/
    theme/                     Theme extension and Material theme helper
    models/                    Component data models
    components/                Reusable AI UI widgets
      flux_ai_agent.dart
      flux_ai_chat_prompt.dart
      flux_ai_insights_code_finetune.dart
      flux_ai_recommendation_context.dart
      flux_ai_surfaces.dart
      flux_ai_tables.dart

example/
  lib/main.dart                Demo gallery app
  ios/, android/, web/         Runnable gallery platforms
  macos/, linux/, windows/     Desktop gallery platforms

doc/
  screenshots/                 README and pub.dev preview assets

test/
  public_api_test.dart         Root package smoke test

example/test/
  gallery_test.dart            Widget coverage for gallery interactions

.github/
  workflows/flutter.yml        CI for format, analyze, and tests
  ISSUE_TEMPLATE/              Bug and feature issue templates

Contributing

Contributions are welcome. Keep the public API small, composable, documented through examples, and free of unnecessary runtime dependencies. See CONTRIBUTING.md.

License

Flux AI UI is released under the MIT License.