updated chatTextfield.dart design and added file and gallery picker

This commit is contained in:
Elias Müller 2023-05-06 14:51:11 +02:00
parent cc43a9e081
commit 8d890f1a26
7 changed files with 191 additions and 46 deletions

View File

@ -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" />

View File

@ -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 />

View File

@ -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,
);
}

View File

@ -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) {
return ChatView(
room: chatRoom,
selfId: username,
avatar: circleAvatar,
);
}));
PersistentNavBarNavigator.pushNewScreen(
context,
screen: ChatView(room: chatRoom, selfId: username, avatar: circleAvatar),
withNavBar: false
);
},
));
}

View File

@ -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(
color: Theme.of(context).dividerColor,
padding: const EdgeInsets.all(10),
child: Row(
children: [
Expanded(
child: TextField(
controller: _textBoxController,
readOnly: sending,
maxLines: null,
decoration: const InputDecoration(
hintText: "Nachricht",
border: OutlineInputBorder(),
labelText: "",
),
return Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Container(
padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
height: 60,
width: double.infinity,
color: Colors.white,
child: Row(
children: <Widget>[
GestureDetector(
onTap: (){
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)
),
)
],
),
),
],
);
}
}

22
lib/widget/filePick.dart Normal file
View File

@ -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;
}
}

View File

@ -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