feat(UX-1501): message input

example/android/app/build.gradle

@@ -8,7 +8,7 @@ plugins {
 android {
     namespace = "com.zebra.zeta.example"
     compileSdk = flutter.compileSdkVersion
-    ndkVersion = "25.1.8937393"
+    ndkVersion = "27.0.12077973"
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_17
@@ -24,7 +24,7 @@ android {
         applicationId = "com.zebra.zeta.example"
         // You can update the following values to match your application needs.
         // For more information, see: https://flutter.dev/to/review-gradle-config.
-        minSdk = 23
+        minSdkVersion flutter.minSdkVersion
         targetSdk = flutter.targetSdkVersion
         versionCode = flutter.versionCode
         versionName = flutter.versionName

example/android/app/src/main/AndroidManifest.xml

@@ -17,9 +17,9 @@
                  while the Flutter UI initializes. After that, this theme continues
                  to determine the Window background behind the Flutter UI. -->
             <meta-data
-              android:name="io.flutter.embedding.android.NormalTheme"
-              android:resource="@style/NormalTheme"
-              />
+                android:name="io.flutter.embedding.android.NormalTheme"
+                android:resource="@style/NormalTheme"
+            />
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>
@@ -41,5 +41,8 @@
             <action android:name="android.intent.action.PROCESS_TEXT"/>
             <data android:mimeType="text/plain"/>
         </intent>
+        <intent>
+            <action android:name="android.speech.RecognitionService"/>
+        </intent>
     </queries>
 </manifest>

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-all.zip

example/android/settings.gradle

@@ -18,8 +18,8 @@ pluginManagement {
 
 plugins {
     id "dev.flutter.flutter-plugin-loader" version "1.0.0"
-    id "com.android.application" version "8.3.1" apply false
-    id "org.jetbrains.kotlin.android" version "1.8.22" apply false
+    id "com.android.application" version "8.6.0" apply false
+    id "org.jetbrains.kotlin.android" version "2.1.0" apply false
 }
 
 include ":app"

example/lib/home.dart

@@ -24,6 +24,7 @@ import 'package:zeta_example/pages/components/global_header_example.dart';
 import 'package:zeta_example/pages/components/filter_selection_example.dart';
 import 'package:zeta_example/pages/components/list_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
+import 'package:zeta_example/pages/components/message_input_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/components/navigation_rail_example.dart';
 import 'package:zeta_example/pages/components/notification_list_example.dart';
@@ -32,7 +33,6 @@ import 'package:zeta_example/pages/components/radio_example.dart';
 import 'package:zeta_example/pages/components/range_selector_example.dart';
 import 'package:zeta_example/pages/components/screen_header_bar_example.dart';
 import 'package:zeta_example/pages/components/select_input_example.dart';
-
 import 'package:zeta_example/pages/components/search_bar_example.dart';
 import 'package:zeta_example/pages/components/segmented_control_example.dart';
 import 'package:zeta_example/pages/components/slider_example.dart';
@@ -97,6 +97,7 @@ final List<Component> components = [
   Component(Label.name, (context) => const Label()),
   Component(ListExample.name, (context) => const ListExample()),
   Component(ListItemExample.name, (context) => const ListItemExample()),
+  Component(MessageInputExample.name, (context) => const MessageInputExample()),
   Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
   Component(NavigationRailExample.name, (context) => const NavigationRailExample()),
   Component(NotificationListItemExample.name, (context) => const NotificationListItemExample()),

example/lib/pages/components/message_input_example.dart

@@ -0,0 +1,83 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class MessageInputExample extends StatefulWidget {
+  static const String name = 'MessageInput';
+
+  const MessageInputExample({super.key});
+
+  @override
+  State<MessageInputExample> createState() => _MessageInputExampleState();
+}
+
+class _MessageInputExampleState extends State<MessageInputExample> {
+  late TextEditingController controller;
+  List<String> messages = [];
+  List<File> attachments = [];
+
+  @override
+  void initState() {
+    super.initState();
+    controller = TextEditingController();
+    messages = [for (var i = 0; i < 3; i++) 'Message $i'];
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: MessageInputExample.name,
+      child: Column(
+        children: [
+          Expanded(
+            child: ListView.builder(
+              itemCount: messages.length,
+              itemBuilder: (context, index) {
+                return ListTile(
+                  title: Text(messages[index]),
+                );
+              },
+            ),
+          ),
+          ZetaMessageInput(
+            controller: controller,
+            disabled: false,
+            allowsVoiceInput: true,
+            cameraTrailingButton: true,
+            hasActionMenu: true,
+            onSendLocation: (location) => setState(() => messages.add('Location: $location')),
+            onSendVoiceMemo: (file, bytes) => setState(() {
+              messages.add('Voice memo: ${file.path}');
+            }),
+            attachments: attachments,
+            onSendAttachments: (fileList) {
+              fileList.forEach((file) {
+                setState(() {
+                  messages.add('File attachment: ${file.path}');
+                });
+              });
+              attachments.clear();
+            },
+            onSend: (message) {
+              if (message.isNotEmpty) {
+                setState(() {
+                  messages.add(message);
+                });
+                print('Message sent: $message');
+                controller.clear();
+              }
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

example/linux/flutter/generated_plugin_registrant.cc

@@ -7,12 +7,16 @@
 #include "generated_plugin_registrant.h"
 
 #include <audioplayers_linux/audioplayers_linux_plugin.h>
+#include <file_selector_linux/file_selector_plugin.h>
 #include <record_linux/record_linux_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
   g_autoptr(FlPluginRegistrar) audioplayers_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "AudioplayersLinuxPlugin");
   audioplayers_linux_plugin_register_with_registrar(audioplayers_linux_registrar);
+  g_autoptr(FlPluginRegistrar) file_selector_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "FileSelectorPlugin");
+  file_selector_plugin_register_with_registrar(file_selector_linux_registrar);
   g_autoptr(FlPluginRegistrar) record_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "RecordLinuxPlugin");
   record_linux_plugin_register_with_registrar(record_linux_registrar);

example/linux/flutter/generated_plugins.cmake

@@ -4,6 +4,7 @@
 
 list(APPEND FLUTTER_PLUGIN_LIST
   audioplayers_linux
+  file_selector_linux
   record_linux
 )
 

example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,15 +6,23 @@ import FlutterMacOS
 import Foundation
 
 import audioplayers_darwin
+import file_picker
+import file_selector_macos
+import location
 import path_provider_foundation
 import record_macos
 import shared_preferences_foundation
+import speech_to_text
 import sqflite_darwin
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   AudioplayersDarwinPlugin.register(with: registry.registrar(forPlugin: "AudioplayersDarwinPlugin"))
+  FilePickerPlugin.register(with: registry.registrar(forPlugin: "FilePickerPlugin"))
+  FileSelectorPlugin.register(with: registry.registrar(forPlugin: "FileSelectorPlugin"))
+  LocationPlugin.register(with: registry.registrar(forPlugin: "LocationPlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   RecordMacOsPlugin.register(with: registry.registrar(forPlugin: "RecordMacOsPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
+  SpeechToTextPlugin.register(with: registry.registrar(forPlugin: "SpeechToTextPlugin"))
   SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
 }

example/windows/flutter/generated_plugin_registrant.cc

@@ -7,11 +7,17 @@
 #include "generated_plugin_registrant.h"
 
 #include <audioplayers_windows/audioplayers_windows_plugin.h>
+#include <file_selector_windows/file_selector_windows.h>
 #include <record_windows/record_windows_plugin_c_api.h>
+#include <speech_to_text_windows/speech_to_text_windows.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
   AudioplayersWindowsPluginRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("AudioplayersWindowsPlugin"));
+  FileSelectorWindowsRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("FileSelectorWindows"));
   RecordWindowsPluginCApiRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("RecordWindowsPluginCApi"));
+  SpeechToTextWindowsRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("SpeechToTextWindows"));
 }

example/windows/flutter/generated_plugins.cmake

@@ -4,7 +4,9 @@
 
 list(APPEND FLUTTER_PLUGIN_LIST
   audioplayers_windows
+  file_selector_windows
   record_windows
+  speech_to_text_windows
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST

packages/zeta_flutter/lib/src/components/icon/icon.dart

@@ -247,3 +247,14 @@ extension IconExtensions on IconData {
     return this;
   }
 }
+
+/// Extension to add padding to ZetaIcon
+extension ZetaIconExtension on ZetaIcon {
+  /// Adds padding around the icon.
+  Widget padding(EdgeInsets padding) {
+    return Padding(
+      padding: padding,
+      child: this,
+    );
+  }
+}

packages/zeta_flutter/lib/src/components/message_input/actions/action_button.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../zeta_flutter.dart';
+
+/// Action button for the action menu in the message input
+class ActionButton extends ZetaStatelessWidget {
+  /// Creates an [ActionButton].
+  const ActionButton({
+    super.key,
+    required this.icon,
+    this.onPressed,
+    this.onLongPress,
+    this.color,
+    this.disabled,
+    this.size,
+    this.semanticLabel,
+  });
+
+  /// The icon to display.
+  final IconData icon;
+
+  /// The callback invoked when the button is pressed.
+  final VoidCallback? onPressed;
+
+  /// The callback invoked when the button is long pressed.
+  final VoidCallback? onLongPress;
+
+  /// The color of the icon. Defaults to mainDefault.
+  final Color? color;
+
+  /// Whether or not the button is disabled.
+  final bool? disabled;
+
+  /// A size override.
+  final double? size;
+
+  /// The semantic label on the icon button (used for screen readers).
+  final String? semanticLabel;
+
+  @override
+  Widget build(BuildContext context) {
+    final ZetaColors colors = Zeta.of(context).colors;
+    final ZetaSpacing spacing = Zeta.of(context).spacing;
+
+    return Semantics(
+      label: semanticLabel,
+      child: IconButton(
+        icon: Icon(
+          icon,
+          color: color ?? (onPressed == null || (disabled ?? false) ? colors.mainDisabled : colors.mainDefault),
+          size: size ?? spacing.xl_3,
+        ),
+        onPressed: (disabled ?? false) ? null : onPressed,
+      ),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty<IconData>('icon', icon))
+      ..add(ObjectFlagProperty<VoidCallback>.has('callback', onPressed))
+      ..add(ColorProperty('color', color))
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onLongPressed', onLongPress))
+      ..add(DiagnosticsProperty<bool?>('disabled', disabled))
+      ..add(StringProperty('semanticLabel', semanticLabel))
+      ..add(DoubleProperty('size', size));
+  }
+}