Add themes to voice assistant app

Add four themes: "light", "dark", "textured-light", and
"textured-dark" to the voice assistant app. Themes can be
changed by modifying assets/config.json file.

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

4 files changed, 133 insertions, 91 deletions

diff --git a/lib/widgets/assistant_mode_choice.dart b/lib/widgets/assistant_mode_choice.dart
index d0c1953..c2afe5b 100644
--- a/lib/widgets/assistant_mode_choice.dart
+++ b/lib/widgets/assistant_mode_choice.dart
@@ -75,8 +75,10 @@ enum AssistantMode { wakeWord, manual }
 
 class AssistantModeChoice extends StatefulWidget {
   final Function(AssistantMode) onModeChanged;
+  final String theme;
 
-  const AssistantModeChoice({Key? key, required this.onModeChanged})
+  const AssistantModeChoice(
+      {Key? key, required this.onModeChanged, required this.theme})
       : super(key: key);
 
   @override
@@ -85,11 +87,14 @@ class AssistantModeChoice extends StatefulWidget {
 
 class AssistantModeChoiceState extends State<AssistantModeChoice> {
   late AssistantMode _selectedMode;
+  late String _theme;
 
   @override
   void initState() {
     super.initState();
     _selectedMode = AssistantMode.manual; // Initialize the selection
+    _theme = widget.theme;
+    print(widget.theme);
   }
 
   @override
@@ -112,7 +117,9 @@ class AssistantModeChoiceState extends State<AssistantModeChoice> {
               ),
               color: _selectedMode == AssistantMode.wakeWord
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
@@ -157,7 +164,9 @@ class AssistantModeChoiceState extends State<AssistantModeChoice> {
               ),
               color: _selectedMode == AssistantMode.manual
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
diff --git a/lib/widgets/chat_section.dart b/lib/widgets/chat_section.dart
index ca48cab..0a6a053 100644
--- a/lib/widgets/chat_section.dart
+++ b/lib/widgets/chat_section.dart
@@ -1,56 +1,71 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 class ChatSection extends StatelessWidget {
   final ScrollController scrollController;
   final List<ChatMessage> chatMessages;
   final Function(String text, {bool isUserMessage}) addChatMessage;
+  final String theme;
 
   ChatSection({
     required this.scrollController,
     required this.chatMessages,
     required this.addChatMessage,
+    required this.theme,
   });
 
   @override
   @override
   Widget build(BuildContext context) {
-    return Card(
-      elevation: 4, // Add a subtle shadow
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
-      ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          // Chat heading
-          Container(
-            padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
-            // alignment: Alignment.l,
-            child: Text(
-              'Conversation Logs',
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 18,
-              ),
-              textAlign: TextAlign.left,
-            ),
+    return ClipRect(
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+        child: Card(
+          color: theme == "textured-dark" || theme == "textured-light"
+              ? Colors.transparent
+              : null,
+          elevation: 4, // Add a subtle shadow
+          shadowColor: theme == "textured-dark" || theme == "textured-light"
+              ? Colors.transparent
+              : null,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
           ),
-          // Chat messages with fixed height
-          Container(
-            padding: EdgeInsets.all(10),
-            height: 180, // Adjust the height as needed
-            child: ListView.builder(
-              controller: scrollController,
-              itemCount: chatMessages.length,
-              itemBuilder: (context, index) {
-                final message = chatMessages[index];
-                return ChatMessageTile(message: message);
-              },
-            ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Chat heading
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
+                // alignment: Alignment.l,
+                child: Text(
+                  'Conversation Logs',
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 18,
+                  ),
+                  textAlign: TextAlign.left,
+                ),
+              ),
+              // Chat messages with fixed height
+              Container(
+                padding: EdgeInsets.all(10),
+                height: 180, // Adjust the height as needed
+                child: ListView.builder(
+                  controller: scrollController,
+                  itemCount: chatMessages.length,
+                  itemBuilder: (context, index) {
+                    final message = chatMessages[index];
+                    return ChatMessageTile(message: message);
+                  },
+                ),
+              ),
+              // User input field (if needed)
+              // ...
+            ],
           ),
-          // User input field (if needed)
-          // ...
-        ],
+        ),
       ),
     );
   }
@@ -82,7 +97,7 @@ class ChatMessageTile extends StatelessWidget {
           children: [
             if (!message.isUserMessage)
               CircleAvatar(
-                backgroundColor: Colors.green[400],
+                backgroundColor: Colors.green,
                 child: Icon(
                   Icons.smart_toy_outlined,
                   color: Colors.white,
@@ -103,8 +118,7 @@ class ChatMessageTile extends StatelessWidget {
                         ? Radius.circular(0)
                         : Radius.circular(16),
                   ),
-                  color:
-                      message.isUserMessage ? Colors.blue : Colors.green[400],
+                  color: message.isUserMessage ? Colors.blue : Colors.green,
                 ),
                 child: Text(
                   message.text,
diff --git a/lib/widgets/nlu_engine_choice.dart b/lib/widgets/nlu_engine_choice.dart
index 22b7074..32db7dd 100644
--- a/lib/widgets/nlu_engine_choice.dart
+++ b/lib/widgets/nlu_engine_choice.dart
@@ -73,8 +73,10 @@ enum NLUEngine { snips, rasa }
 
 class NLUEngineChoice extends StatefulWidget {
   final Function(NLUEngine) onEngineChanged;
+  final String theme;
 
-  const NLUEngineChoice({Key? key, required this.onEngineChanged})
+  const NLUEngineChoice(
+      {Key? key, required this.onEngineChanged, required this.theme})
       : super(key: key);
 
   @override
@@ -83,11 +85,13 @@ class NLUEngineChoice extends StatefulWidget {
 
 class _NLUEngineChoiceState extends State<NLUEngineChoice> {
   late NLUEngine _selectedEngine;
+  late String _theme;
 
   @override
   void initState() {
     super.initState();
     _selectedEngine = NLUEngine.snips; // Initialize the selection
+    _theme = widget.theme;
   }
 
   @override
@@ -110,7 +114,9 @@ class _NLUEngineChoiceState extends State<NLUEngineChoice> {
               ),
               color: _selectedEngine == NLUEngine.snips
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
@@ -155,7 +161,9 @@ class _NLUEngineChoiceState extends State<NLUEngineChoice> {
               ),
               color: _selectedEngine == NLUEngine.rasa
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
diff --git a/lib/widgets/try_commands.dart b/lib/widgets/try_commands.dart
index 0670bd2..3e47e9c 100644
--- a/lib/widgets/try_commands.dart
+++ b/lib/widgets/try_commands.dart
@@ -1,64 +1,75 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 class TryCommandsSection extends StatelessWidget {
   final Future<void> Function(String) onCommandTap; // Define a callback
+  final String theme;
 
-  TryCommandsSection({required this.onCommandTap});
+  TryCommandsSection({required this.onCommandTap, required this.theme});
 
   @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,
+      width: double.infinity,
+      child: ClipRect(
+        child: BackdropFilter(
+          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+          child: Card(
+            color: theme == "textured-dark" || theme == "textured-light"
+                ? Colors.transparent
+                : null,
+            elevation: 4, // Add a subtle shadow
+            shadowColor: theme == "textured-dark" || theme == "textured-light"
+                ? Colors.transparent
+                : null,
+            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,
                   ),
-                  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,
+                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"),
-                  ],
+                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) {