Model Selector
Dropdown selector for switching between AI models with descriptions. Displays model name, provider, and capability badges.
Preview
Preview
⚡
Claude Sonnet 4
▼
Installation
$
flai add model_selector
Import
import 'package:my_app/flai/components/model_selector/model_selector.dart';
Usage
FlaiModelSelector(
models: [
ModelOption(
id: 'gpt-4o',
name: 'GPT-4o',
provider: 'OpenAI',
description: 'Most capable model. Great for complex tasks.',
capabilities: ['vision', 'tools', 'streaming'],
),
ModelOption(
id: 'claude-3-5-sonnet',
name: 'Claude 3.5 Sonnet',
provider: 'Anthropic',
description: 'Fast and intelligent. Best for most tasks.',
capabilities: ['vision', 'tools', 'thinking', 'streaming'],
),
ModelOption(
id: 'gpt-4o-mini',
name: 'GPT-4o Mini',
provider: 'OpenAI',
description: 'Fast and affordable for simple tasks.',
capabilities: ['tools', 'streaming'],
),
],
selectedId: 'claude-3-5-sonnet',
onSelect: (model) {
switchProvider(model.id);
},
)
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| models | List<ModelOption> | required | Available models to choose from. |
| selectedId | String | required | ID of the currently selected model. |
| onSelect | Function(ModelOption) | required | Called when a model is selected. |
| compact | bool | false | Compact mode shows only the model name, no description. |
ModelOption
class ModelOption {
final String id; // Unique model ID
final String name; // Display name
final String provider; // Provider name (OpenAI, Anthropic)
final String? description; // Short description
final List<String> capabilities; // ['vision', 'tools', 'thinking']
}