updated chatTextfield.dart design and added file and gallery picker

.idea/libraries/Dart_Packages.xml

@@ -219,6 +219,13 @@
             </list>
           </value>
         </entry>
+        <entry key="cross_file">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/cross_file-0.3.3+4/lib" />
+            </list>
+          </value>
+        </entry>
         <entry key="crypto">
           <value>
             <list>
@@ -282,6 +289,13 @@
             </list>
           </value>
         </entry>
+        <entry key="file_picker">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/file_picker-5.2.11/lib" />
+            </list>
+          </value>
+        </entry>
         <entry key="filesize">
           <value>
             <list>
@@ -359,6 +373,13 @@
             </list>
           </value>
         </entry>
+        <entry key="flutter_plugin_android_lifecycle">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/flutter_plugin_android_lifecycle-2.0.14/lib" />
+            </list>
+          </value>
+        </entry>
         <entry key="flutter_test">
           <value>
             <list>
@@ -436,6 +457,41 @@
             </list>
           </value>
         </entry>
+        <entry key="image_picker">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker-0.8.7+4/lib" />
+            </list>
+          </value>
+        </entry>
+        <entry key="image_picker_android">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_android-0.8.6+11/lib" />
+            </list>
+          </value>
+        </entry>
+        <entry key="image_picker_for_web">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_for_web-2.1.12/lib" />
+            </list>
+          </value>
+        </entry>
+        <entry key="image_picker_ios">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_ios-0.8.7+3/lib" />
+            </list>
+          </value>
+        </entry>
+        <entry key="image_picker_platform_interface">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_platform_interface-2.6.3/lib" />
+            </list>
+          </value>
+        </entry>
         <entry key="intl">
           <value>
             <list>
@@ -1060,6 +1116,7 @@
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/collection-1.17.0/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/convert-3.1.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/cookie_jar-3.0.1/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/cross_file-0.3.3+4/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/crypto-3.0.3/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/crypton-2.1.0/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/csslib-0.17.2/lib" />
@@ -1069,6 +1126,7 @@
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/fake_async-1.3.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/ffi-2.0.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/file-6.1.4/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/file_picker-5.2.11/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/filesize-2.0.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/fixnum-1.1.0/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/flutter_blurhash-0.7.0/lib" />
@@ -1078,6 +1136,7 @@
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/flutter_lints-2.0.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/flutter_login-4.1.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/flutter_native_splash-2.2.19/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/flutter_plugin_android_lifecycle-2.0.14/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/font_awesome_flutter-10.4.0/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/frontend_server_client-3.2.0/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/glob-2.1.1/lib" />
@@ -1087,6 +1146,11 @@
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/http_multi_server-3.2.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/http_parser-4.0.2/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image-4.0.16/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker-0.8.7+4/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_android-0.8.6+11/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_for_web-2.1.12/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_ios-0.8.7+3/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_platform_interface-2.6.3/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/intl-0.17.0/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/io-1.0.4/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/jiffy-5.0.0/lib" />

.idea/libraries/Flutter_Plugins.xml

@@ -22,6 +22,11 @@
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/path_provider_windows-2.1.6" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/path_provider-2.0.14" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/sqflite-2.2.8+1" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_for_web-2.1.12" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_android-0.8.6+11" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker-0.8.7+4" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/image_picker_ios-0.8.7+3" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/file_picker-5.2.11" />
     </CLASSES>
     <JAVADOC />
     <SOURCES />

lib/screen/pages/talk/chatBubble.dart

@@ -15,7 +15,7 @@ class ChatBubble {
     color: Color(0xffd4eaf4),
     borderWidth: 1,
     elevation: 2,
-    margin: BubbleEdges.only(bottom: 15),
+    margin: BubbleEdges.only(bottom: 20, top: 10),
     alignment: Alignment.center,
   );
 
@@ -25,7 +25,7 @@ class ChatBubble {
       color: seamless ? Colors.transparent : Colors.white,
       borderWidth: seamless ? 0 : 1,
       elevation: seamless ? 0 : 1,
-      margin: const BubbleEdges.only(bottom: 15, left: 10, right: 50),
+      margin: const BubbleEdges.only(bottom: 10, left: 10, right: 50),
       alignment: Alignment.topLeft,
     );
   }
@@ -36,7 +36,7 @@ class ChatBubble {
       color: seamless ? Colors.transparent : const Color(0xffd9fdd3),
       borderWidth: seamless ? 0 : 1,
       elevation: seamless ? 0 : 1,
-      margin: const BubbleEdges.only(bottom: 15, right: 10, left: 50),
+      margin: const BubbleEdges.only(bottom: 10, right: 10, left: 50),
       alignment: Alignment.topRight,
     );
   }

lib/screen/pages/talk/chatList.dart

@@ -5,6 +5,7 @@ import 'package:jiffy/jiffy.dart';
 import 'package:marianum_mobile/api/marianumcloud/talk/chat/richObjectStringProcessor.dart';
 import 'package:marianum_mobile/api/marianumcloud/talk/room/getRoomResponse.dart';
 import 'package:marianum_mobile/data/chatList/chatListProps.dart';
+import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
 import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
@@ -91,13 +92,11 @@ class _ChatListState extends State<ChatList> {
               ),
               leading: circleAvatar,
               onTap: () async {
-                Navigator.of(context).push(MaterialPageRoute(builder: (context) {
+                PersistentNavBarNavigator.pushNewScreen(
-                  return ChatView(
+                    context,
-                    room: chatRoom,
+                    screen: ChatView(room: chatRoom, selfId: username, avatar: circleAvatar),
-                    selfId: username,
+                    withNavBar: false
-                    avatar: circleAvatar,
+                );
-                  );
-                }));
               },
             ));
           }

lib/screen/pages/talk/chatTextfield.dart

@@ -1,4 +1,7 @@
+import 'dart:developer';
+
 import 'package:flutter/material.dart';
+import 'package:marianum_mobile/widget/filePick.dart';
 import 'package:provider/provider.dart';
 
 import '../../../api/marianumcloud/talk/sendMessage/sendMessage.dart';
@@ -19,44 +22,94 @@ class _ChatTextfieldState extends State<ChatTextfield> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Stack(
-      color: Theme.of(context).dividerColor,
+      children: <Widget>[
-      padding: const EdgeInsets.all(10),
+        Align(
-      child: Row(
+          alignment: Alignment.bottomLeft,
-        children: [
+          child: Container(
-          Expanded(
+            padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
-            child: TextField(
+            height: 60,
-              controller: _textBoxController,
+            width: double.infinity,
-              readOnly: sending,
+            color: Colors.white,
-              maxLines: null,
+            child: Row(
-              decoration: const InputDecoration(
+              children: <Widget>[
-                hintText: "Nachricht",
+                GestureDetector(
-                border: OutlineInputBorder(),
+                  onTap: (){
-                labelText: "",
+                    showDialog(context: context, builder: (context) {
-              ),
+                      return SimpleDialog(
+                        children: [
+                          ListTile(
+                            leading: const Icon(Icons.file_open),
+                            title: const Text("Aus Dateien auswählen"),
+                            onTap: () {
+                              FilePick.documentPick().then((value) {
+                                log(value ?? "?");
+                              });
+                              Navigator.of(context).pop();
+                            },
+                          ),
+                          ListTile(
+                            leading: const Icon(Icons.image),
+                            title: const Text("Aus Gallerie auswählen"),
+                            onTap: () {
+                              FilePick.galleryPick().then((value) {
+                                log(value?.path ?? "?");
+                              });
+                              Navigator.of(context).pop();
+                            },
+                          ),
+                        ],
+                      );
+                    });
+                  },
+                  child: Container(
+                    height: 30,
+                    width: 30,
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).primaryColor,
+                      borderRadius: BorderRadius.circular(30),
+                    ),
+                    child: const Icon(Icons.add, color: Colors.white, size: 20, ),
+                  ),
+                ),
+                const SizedBox(width: 15),
+                Expanded(
+                  child: TextField(
+                    controller: _textBoxController,
+                    readOnly: sending,
+                    maxLines: 10,
+                    decoration: const InputDecoration(
+                        hintText: "Nachricht schreiben...",
+                        hintStyle: TextStyle(color: Colors.black54),
+                        border: InputBorder.none
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 15),
+                FloatingActionButton(
+                  onPressed: (){
+                    if(_textBoxController.text.isEmpty) return;
+                    setState(() {
+                      sending = true;
+                    });
+                    SendMessage(widget.sendToToken, SendMessageParams(_textBoxController.text)).run().then((value) => {
+                      Provider.of<ChatProps>(context, listen: false).run(),
+                      _textBoxController.text = "",
+                      setState(() {
+                        sending = false;
+                      }),
+                    });
+                  },
+                  backgroundColor: Theme.of(context).primaryColor,
+                  elevation: 0,
+                  child: const Icon(Icons.send, color: Colors.white, size: 18),
+                ),
+              ],
+
             ),
           ),
-          Padding(
+        ),
-            padding: const EdgeInsets.symmetric(horizontal: 15),
+      ],
-            child: sending ? const Center(child: CircularProgressIndicator()) : IconButton(
-                onPressed: () {
-                  if(_textBoxController.text.isEmpty) return;
-                  setState(() {
-                    sending = true;
-                  });
-                  SendMessage(widget.sendToToken, SendMessageParams(_textBoxController.text)).run().then((value) => {
-                    Provider.of<ChatProps>(context, listen: false).run(),
-                    _textBoxController.text = "",
-                    setState(() {
-                      sending = false;
-                    }),
-                  });
-                },
-                icon: const Icon(Icons.send)
-            ),
-          )
-        ],
-      ),
     );
   }
 }

lib/widget/filePick.dart

@@ -0,0 +1,22 @@
+import 'dart:developer';
+
+import 'package:file_picker/file_picker.dart';
+import 'package:image_picker/image_picker.dart';
+
+class FilePick {
+  static final _picker = ImagePicker();
+
+  static Future<XFile?> galleryPick() async {
+    final XFile? pickedImage = await _picker.pickImage(source: ImageSource.gallery);
+    if (pickedImage != null) {
+      log("Picked ${pickedImage.path} (${pickedImage.mimeType})");
+      return pickedImage;
+    }
+    return null;
+  }
+
+  static Future<String?> documentPick() async {
+    FilePickerResult? result = await FilePicker.platform.pickFiles();
+    return result?.files.single.path;
+  }
+}

pubspec.yaml

@@ -64,6 +64,8 @@ dependencies:
       url: https://github.com/Harsh223/flowder.git
   persistent_bottom_nav_bar: ^5.0.2
   badges: ^3.0.2
+  image_picker: ^0.8.7+4
+  file_picker: ^5.2.11
 
 dependency_overrides:
   xml: ^6.2.2