2022-02-28 21:26:44 +08:00
|
|
|
import 'package:dash_chat/dash_chat.dart';
|
2022-03-03 14:58:57 +08:00
|
|
|
import 'package:draggable_float_widget/draggable_float_widget.dart';
|
2022-02-28 21:26:44 +08:00
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:flutter_hbb/common.dart';
|
2022-03-03 14:58:57 +08:00
|
|
|
import 'package:flutter_hbb/models/chat_model.dart';
|
|
|
|
import 'package:provider/provider.dart';
|
2022-03-23 15:28:21 +08:00
|
|
|
import '../models/model.dart';
|
2022-02-28 21:26:44 +08:00
|
|
|
import 'home_page.dart';
|
|
|
|
|
2022-03-03 14:58:57 +08:00
|
|
|
OverlayEntry? iconOverlayEntry;
|
|
|
|
OverlayEntry? windowOverlayEntry;
|
2022-02-28 21:26:44 +08:00
|
|
|
|
2022-03-03 14:58:57 +08:00
|
|
|
ChatPage chatPage = ChatPage();
|
2022-02-28 21:26:44 +08:00
|
|
|
|
2022-03-03 14:58:57 +08:00
|
|
|
class ChatPage extends StatelessWidget implements PageShape {
|
2022-02-28 21:26:44 +08:00
|
|
|
@override
|
2022-03-23 15:28:21 +08:00
|
|
|
final title = translate("Chat");
|
2022-02-28 21:26:44 +08:00
|
|
|
|
|
|
|
@override
|
|
|
|
final icon = Icon(Icons.chat);
|
|
|
|
|
|
|
|
@override
|
2022-03-25 16:34:27 +08:00
|
|
|
final appBarActions = [
|
|
|
|
PopupMenuButton<int>(
|
2022-04-04 01:38:53 +08:00
|
|
|
icon: Icon(Icons.more_vert),
|
2022-03-25 16:34:27 +08:00
|
|
|
itemBuilder: (context) {
|
|
|
|
final chatModel = FFI.chatModel;
|
|
|
|
final serverModel = FFI.serverModel;
|
|
|
|
return chatModel.messages.entries.map((entry) {
|
|
|
|
final id = entry.key;
|
|
|
|
final user = serverModel.clients[id]?.chatUser ?? chatModel.me;
|
|
|
|
return PopupMenuItem<int>(
|
|
|
|
child: Text("${user.name} - ${user.uid}"),
|
|
|
|
value: id,
|
|
|
|
);
|
|
|
|
}).toList();
|
|
|
|
},
|
|
|
|
onSelected: (id) {
|
|
|
|
FFI.chatModel.changeCurrentID(id);
|
|
|
|
})
|
|
|
|
];
|
2022-02-28 21:26:44 +08:00
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2022-03-25 16:34:27 +08:00
|
|
|
return ChangeNotifierProvider.value(
|
|
|
|
value: FFI.chatModel,
|
|
|
|
child: Container(
|
|
|
|
color: MyTheme.grayBg,
|
|
|
|
child: Consumer<ChatModel>(builder: (context, chatModel, child) {
|
|
|
|
return DashChat(
|
|
|
|
inputContainerStyle: BoxDecoration(color: Colors.white70),
|
|
|
|
sendOnEnter: false,
|
|
|
|
// if true,reload keyboard everytime,need fix
|
|
|
|
onSend: (chatMsg) {
|
|
|
|
chatModel.send(chatMsg);
|
|
|
|
},
|
|
|
|
user: chatModel.me,
|
|
|
|
messages: chatModel.messages[chatModel.currentID] ?? [],
|
|
|
|
// default scrollToBottom has bug https://github.com/fayeed/dash_chat/issues/53
|
|
|
|
scrollToBottom: false,
|
|
|
|
scrollController: chatModel.scroller,
|
|
|
|
);
|
|
|
|
})));
|
2022-03-03 14:58:57 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
showChatIconOverlay({Offset offset = const Offset(200, 50)}) {
|
|
|
|
if (iconOverlayEntry != null) {
|
|
|
|
iconOverlayEntry!.remove();
|
|
|
|
}
|
|
|
|
if (globalKey.currentState == null || globalKey.currentState!.overlay == null)
|
|
|
|
return;
|
|
|
|
final globalOverlayState = globalKey.currentState!.overlay!;
|
|
|
|
|
|
|
|
final overlay = OverlayEntry(builder: (context) {
|
|
|
|
return DraggableFloatWidget(
|
|
|
|
config: DraggableFloatWidgetBaseConfig(
|
|
|
|
initPositionYInTop: false,
|
|
|
|
initPositionYMarginBorder: 100,
|
|
|
|
borderTopContainTopBar: true,
|
|
|
|
),
|
|
|
|
child: FloatingActionButton(
|
|
|
|
onPressed: () {
|
|
|
|
if (windowOverlayEntry == null) {
|
|
|
|
showChatWindowOverlay();
|
|
|
|
} else {
|
|
|
|
hideChatWindowOverlay();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
child: Icon(Icons.message)));
|
|
|
|
});
|
|
|
|
globalOverlayState.insert(overlay);
|
|
|
|
iconOverlayEntry = overlay;
|
|
|
|
debugPrint("created");
|
|
|
|
}
|
|
|
|
|
|
|
|
hideChatIconOverlay() {
|
|
|
|
if (iconOverlayEntry != null) {
|
|
|
|
iconOverlayEntry!.remove();
|
|
|
|
iconOverlayEntry = null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
final FocusNode _focusNode = FocusNode();
|
|
|
|
|
|
|
|
showChatWindowOverlay() {
|
|
|
|
if (windowOverlayEntry != null) return;
|
|
|
|
if (globalKey.currentState == null || globalKey.currentState!.overlay == null)
|
|
|
|
return;
|
|
|
|
final globalOverlayState = globalKey.currentState!.overlay!;
|
|
|
|
|
|
|
|
final overlay = OverlayEntry(builder: (context) {
|
|
|
|
return ChatWindowOverlay();
|
|
|
|
});
|
|
|
|
_focusNode.requestFocus();
|
|
|
|
globalOverlayState.insert(overlay);
|
|
|
|
windowOverlayEntry = overlay;
|
|
|
|
debugPrint("chatEntry created");
|
|
|
|
}
|
|
|
|
|
|
|
|
hideChatWindowOverlay() {
|
|
|
|
if (windowOverlayEntry != null) {
|
|
|
|
windowOverlayEntry!.remove();
|
|
|
|
windowOverlayEntry = null;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleChatOverlay() {
|
|
|
|
if (iconOverlayEntry == null || windowOverlayEntry == null) {
|
|
|
|
showChatIconOverlay();
|
|
|
|
showChatWindowOverlay();
|
|
|
|
} else {
|
|
|
|
hideChatIconOverlay();
|
|
|
|
hideChatWindowOverlay();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class ChatWindowOverlay extends StatefulWidget {
|
|
|
|
final double windowWidth = 250;
|
2022-03-22 21:47:42 +08:00
|
|
|
final double windowHeight = 350;
|
2022-03-03 14:58:57 +08:00
|
|
|
|
|
|
|
@override
|
|
|
|
State<StatefulWidget> createState() => _ChatWindowOverlayState();
|
|
|
|
}
|
|
|
|
|
|
|
|
class _ChatWindowOverlayState extends State<ChatWindowOverlay> {
|
2022-03-22 21:47:42 +08:00
|
|
|
Offset _o = Offset(20, 80);
|
2022-03-03 14:58:57 +08:00
|
|
|
bool _keyboardVisible = false;
|
|
|
|
double _saveHeight = 0;
|
|
|
|
double _lastBottomHeight = 0;
|
|
|
|
|
|
|
|
changeOffset(Offset offset) {
|
|
|
|
final size = MediaQuery.of(context).size;
|
|
|
|
debugPrint("parent size:$size");
|
|
|
|
double x = 0;
|
|
|
|
double y = 0;
|
|
|
|
|
|
|
|
if (_o.dx + offset.dx + widget.windowWidth > size.width) {
|
|
|
|
x = size.width - widget.windowWidth;
|
|
|
|
} else if (_o.dx + offset.dx < 0) {
|
|
|
|
x = 0;
|
|
|
|
} else {
|
|
|
|
x = _o.dx + offset.dx;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (_o.dy + offset.dy + widget.windowHeight > size.height) {
|
|
|
|
y = size.height - widget.windowHeight;
|
|
|
|
} else if (_o.dy + offset.dy < 0) {
|
|
|
|
y = 0;
|
|
|
|
} else {
|
|
|
|
y = _o.dy + offset.dy;
|
|
|
|
}
|
|
|
|
setState(() {
|
|
|
|
_o = Offset(x, y);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-04-04 01:38:53 +08:00
|
|
|
checkScreenSize() {}
|
2022-03-03 14:58:57 +08:00
|
|
|
|
2022-03-22 21:47:42 +08:00
|
|
|
checkKeyboard() {
|
2022-03-03 14:58:57 +08:00
|
|
|
final bottomHeight = MediaQuery.of(context).viewInsets.bottom;
|
|
|
|
final currentVisible = bottomHeight != 0;
|
|
|
|
|
|
|
|
debugPrint(bottomHeight.toString() + currentVisible.toString());
|
|
|
|
// save
|
2022-03-22 21:47:42 +08:00
|
|
|
if (!_keyboardVisible && currentVisible) {
|
2022-03-03 14:58:57 +08:00
|
|
|
_saveHeight = _o.dy;
|
|
|
|
debugPrint("on save $_saveHeight");
|
|
|
|
}
|
|
|
|
|
|
|
|
// reset
|
2022-03-22 21:47:42 +08:00
|
|
|
if (_lastBottomHeight > 0 && bottomHeight == 0) {
|
2022-03-03 14:58:57 +08:00
|
|
|
debugPrint("on reset");
|
2022-03-22 21:47:42 +08:00
|
|
|
_o = Offset(_o.dx, _saveHeight);
|
2022-03-03 14:58:57 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// onKeyboardVisible
|
2022-03-22 21:47:42 +08:00
|
|
|
if (_keyboardVisible && currentVisible) {
|
2022-03-03 14:58:57 +08:00
|
|
|
final sumHeight = bottomHeight + widget.windowHeight;
|
|
|
|
final contextHeight = MediaQuery.of(context).size.height;
|
2022-03-22 21:47:42 +08:00
|
|
|
debugPrint(
|
|
|
|
"prepare update sumHeight:$sumHeight,contextHeight:$contextHeight");
|
|
|
|
if (sumHeight + _o.dy > contextHeight) {
|
2022-03-03 14:58:57 +08:00
|
|
|
final y = contextHeight - sumHeight;
|
|
|
|
debugPrint("on update");
|
2022-03-22 21:47:42 +08:00
|
|
|
_o = Offset(_o.dx, y);
|
2022-03-03 14:58:57 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_keyboardVisible = currentVisible;
|
|
|
|
_lastBottomHeight = bottomHeight;
|
|
|
|
}
|
2022-03-22 21:47:42 +08:00
|
|
|
|
2022-03-03 14:58:57 +08:00
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2022-03-22 21:47:42 +08:00
|
|
|
checkKeyboard();
|
2022-03-03 14:58:57 +08:00
|
|
|
checkScreenSize();
|
|
|
|
return Positioned(
|
|
|
|
top: _o.dy,
|
|
|
|
left: _o.dx,
|
|
|
|
width: widget.windowWidth,
|
|
|
|
height: widget.windowHeight,
|
|
|
|
child: Scaffold(
|
|
|
|
resizeToAvoidBottomInset: false,
|
|
|
|
appBar: CustomAppBar(
|
|
|
|
onPanUpdate: (d) => changeOffset(d.delta),
|
2022-03-22 21:47:42 +08:00
|
|
|
appBar: Container(
|
|
|
|
color: MyTheme.accent50,
|
|
|
|
height: 50,
|
|
|
|
child: Row(
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
|
children: [
|
2022-03-25 16:34:27 +08:00
|
|
|
Padding(
|
|
|
|
padding: EdgeInsets.symmetric(horizontal: 15),
|
|
|
|
child: Text(
|
|
|
|
translate("Chat"),
|
|
|
|
style: TextStyle(
|
|
|
|
color: Colors.white,
|
|
|
|
fontFamily: 'WorkSans',
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
fontSize: 20),
|
|
|
|
)),
|
2022-03-22 21:47:42 +08:00
|
|
|
Row(
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: [
|
2022-03-25 16:34:27 +08:00
|
|
|
IconButton(
|
|
|
|
onPressed: () {
|
|
|
|
hideChatWindowOverlay();
|
|
|
|
},
|
|
|
|
icon: Icon(Icons.keyboard_arrow_down)),
|
|
|
|
IconButton(
|
|
|
|
onPressed: () {
|
|
|
|
hideChatWindowOverlay();
|
|
|
|
hideChatIconOverlay();
|
|
|
|
},
|
|
|
|
icon: Icon(Icons.close))
|
2022-03-22 21:47:42 +08:00
|
|
|
],
|
|
|
|
)
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
2022-03-03 14:58:57 +08:00
|
|
|
),
|
|
|
|
body: chatPage,
|
|
|
|
));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
|
|
|
|
final GestureDragUpdateCallback onPanUpdate;
|
2022-03-22 21:47:42 +08:00
|
|
|
final Widget appBar;
|
2022-03-03 14:58:57 +08:00
|
|
|
|
|
|
|
const CustomAppBar(
|
|
|
|
{Key? key, required this.onPanUpdate, required this.appBar})
|
|
|
|
: super(key: key);
|
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return GestureDetector(onPanUpdate: onPanUpdate, child: appBar);
|
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
Size get preferredSize => new Size.fromHeight(kToolbarHeight);
|
|
|
|
}
|