Add sample command section to voice assistant app

Add a section that allows to choose and execute sample commands
and minor improvements to app UI.

Bug-AGL: SPEC-4906
Signed-off-by: Malik Talha <talhamalik727x@gmail.com>
Change-Id: I1a279c6ecd1904c428b8403d3ce0750bc063da3b

1 files changed, 87 insertions, 0 deletions

diff --git a/lib/widgets/try_commands.dart b/lib/widgets/try_commands.dart
new file mode 100644
index 0000000..0670bd2
--- /dev/null
+++ b/lib/widgets/try_commands.dart
@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+
+class TryCommandsSection extends StatelessWidget {
+  final Future<void> Function(String) onCommandTap; // Define a callback
+
+  TryCommandsSection({required this.onCommandTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+        width: double.infinity,
+        child: Card(
+          // padding: EdgeInsets.all(16),
+          // decoration: BoxDecoration(
+          //   borderRadius: BorderRadius.circular(12),
+          // ),
+          elevation: 4, // Add a subtle shadow
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
+                child: Text(
+                  "Try Commands",
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                  textAlign: TextAlign.left,
+                ),
+              ),
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
+                child: Text(
+                  "(Tap on any of the following commands to try them out)",
+                  style: TextStyle(fontSize: 14, fontStyle: FontStyle.italic),
+                  textAlign: TextAlign.left,
+                ),
+              ),
+              SizedBox(height: 6),
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 0, 12, 12),
+                child: Wrap(
+                  spacing: 10,
+                  children: [
+                    buildCommandButton("Set the volume to fifty percent"),
+                    buildCommandButton("Set the fan speed to max"),
+                    buildCommandButton(
+                        "Increase the temperature by three degrees"),
+                    buildCommandButton(
+                        "Decrease the fan speed by five percent"),
+                    buildCommandButton("Can you reduce the volume"),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ));
+  }
+
+  Widget buildCommandButton(String commandText) {
+    return GestureDetector(
+      onTap: () {
+        onCommandTap(commandText);
+      },
+      child: Container(
+        margin: EdgeInsets.all(6),
+        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        decoration: BoxDecoration(
+          color: Colors.green.withOpacity(0.1),
+          borderRadius: BorderRadius.circular(10),
+          border: Border.all(color: Colors.green, width: 2),
+        ),
+        child: Text(
+          commandText,
+          style: TextStyle(
+            color: Colors.green,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+      ),
+    );
+  }
+}