Flutter AI Prompt Composer Card with Quick Actions
An AI assistant prompt composer card with a model badge, a streaming response preview, quick-action chips, and a prompt input with a generate button. A marketing-ready AI chat UI built with Wind utility classes and full dark-mode pairing.
main.dart
WDiv(
className: 'max-w-sm w-full mx-auto p-5 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full mb-4',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-10 h-10 rounded-2xl bg-indigo-600 dark:bg-indigo-500 flex flex-row items-center justify-center mr-3',
child: WIcon(
Icons.bolt,
className: 'text-white text-xl'
),
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'AI Assistant',
className: 'text-gray-900 dark:text-white text-sm font-bold'
),
WText(
'Powered by Wind',
className: 'text-gray-400 dark:text-gray-500 text-xs'
),
],
),
],
),
WDiv(
className: 'px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-950',
child: WText(
'gpt-4o',
className: 'text-indigo-600 dark:text-indigo-300 text-xs font-semibold'
),
),
],
),
WDiv(
className: 'w-full p-3 rounded-2xl bg-gray-50 dark:bg-gray-800 mb-3',
children: [
WText(
'Here is a responsive pricing card built with Wind utility classes:',
className: 'text-gray-700 dark:text-gray-200 text-sm mb-3'
),
WDiv(
className: 'flex flex-col gap-2 w-full',
children: [
WDiv(
className: 'h-3 w-full rounded-full bg-gray-200 dark:bg-gray-700',
children: []
),
WDiv(
className: 'h-3 w-3/4 rounded-full bg-gray-200 dark:bg-gray-700',
children: []
),
WDiv(
className: 'h-3 w-1/2 rounded-full bg-indigo-200 dark:bg-indigo-800',
children: []
),
],
),
],
),
WDiv(
className: 'wrap gap-2 w-full mb-4',
children: [
WButton(
className: 'px-3 py-2 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
child: WText(
'Explain code',
className: 'text-gray-700 dark:text-gray-200 text-xs font-medium'
),
),
WButton(
className: 'px-3 py-2 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
child: WText(
'Write test',
className: 'text-gray-700 dark:text-gray-200 text-xs font-medium'
),
),
WButton(
className: 'px-3 py-2 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
child: WText(
'Refactor',
className: 'text-gray-700 dark:text-gray-200 text-xs font-medium'
),
),
],
),
WInput(
placeholder: "Ask anything...",
type: "text",
className: 'w-full px-4 py-3 rounded-2xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white mb-3',
),
WButton(
className: 'w-full py-3 rounded-2xl bg-indigo-600 dark:bg-indigo-500',
child: WDiv(
className: 'flex flex-row items-center justify-center w-full',
children: [
WIcon(
Icons.bolt,
className: 'text-white text-base'
),
WText(
'Generate',
className: 'text-white text-sm font-semibold ml-2'
),
],
),
),
],
)
Stats
- Views
- 10
- Stars
- 0
- Revisions
- 1
- Size
- 3,803 chars
- Created
- Jun 24, 2026