design: Improved animations in chat view when changing account

This commit is contained in:
The one with the Braid 2021-12-22 08:11:30 +00:00 committed by Krille Fear
parent 61c3075dc0
commit fe95c8b2ca
4 changed files with 151 additions and 73 deletions

View File

@ -47,6 +47,7 @@ class ChatListController extends State<ChatList> {
StreamSubscription _intentUriStreamSubscription; StreamSubscription _intentUriStreamSubscription;
String _activeSpaceId; String _activeSpaceId;
String get activeSpaceId => String get activeSpaceId =>
Matrix.of(context).client.getRoomById(_activeSpaceId) == null Matrix.of(context).client.getRoomById(_activeSpaceId) == null
? null ? null
@ -54,6 +55,10 @@ class ChatListController extends State<ChatList> {
final ScrollController scrollController = ScrollController(); final ScrollController scrollController = ScrollController();
bool scrolledToTop = true; bool scrolledToTop = true;
final StreamController<Client> _clientStream = StreamController.broadcast();
Stream<Client> get clientStream => _clientStream.stream;
void _onScroll() { void _onScroll() {
final newScrolledToTop = scrollController.position.pixels <= 0; final newScrolledToTop = scrollController.position.pixels <= 0;
if (newScrolledToTop != scrolledToTop) { if (newScrolledToTop != scrolledToTop) {
@ -478,6 +483,7 @@ class ChatListController extends State<ChatList> {
selectedRoomIds.clear(); selectedRoomIds.clear();
Matrix.of(context).setActiveClient(client); Matrix.of(context).setActiveClient(client);
}); });
_clientStream.add(client);
} }
void setActiveBundle(String bundle) { void setActiveBundle(String bundle) {

View File

@ -4,6 +4,7 @@ import 'dart:math';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:animations/animations.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:vrouter/vrouter.dart'; import 'package:vrouter/vrouter.dart';
@ -233,77 +234,147 @@ class ChatListView extends StatelessWidget {
} }
} }
class _ChatListViewBody extends StatelessWidget { class _ChatListViewBody extends StatefulWidget {
final ChatListController controller; final ChatListController controller;
const _ChatListViewBody(this.controller, {Key key}) : super(key: key); const _ChatListViewBody(this.controller, {Key key}) : super(key: key);
@override @override
Widget build(BuildContext context) => StreamBuilder( State<_ChatListViewBody> createState() => _ChatListViewBodyState();
stream: Matrix.of(context) }
class _ChatListViewBodyState extends State<_ChatListViewBody> {
// the matrix sync stream
StreamSubscription _subscription;
StreamSubscription _clientSubscription;
// used to check the animation direction
String _lastUserId;
String _lastSpaceId;
@override
void initState() {
_subscription = Matrix.of(context)
.client
.onSync
.stream
.where((s) => s.hasRoomUpdate)
.rateLimit(const Duration(seconds: 1))
.listen((d) => setState(() {}));
_clientSubscription =
widget.controller.clientStream.listen((d) => setState(() {}));
super.initState();
}
@override
Widget build(BuildContext context) {
final reversed = _animationReversed();
Widget child;
if (widget.controller.waitForFirstSync &&
Matrix.of(context).client.prevBatch != null) {
final rooms = Matrix.of(context)
.client .client
.onSync .rooms
.stream .where(widget.controller.roomCheck)
.where((s) => s.hasRoomUpdate) .toList();
.rateLimit(const Duration(seconds: 1)), if (rooms.isEmpty) {
builder: (context, snapshot) { child = Column(
return Builder( key: const ValueKey(null),
builder: (context) { mainAxisAlignment: MainAxisAlignment.center,
if (controller.waitForFirstSync && mainAxisSize: MainAxisSize.min,
Matrix.of(context).client.prevBatch != null) { children: <Widget>[
final rooms = Matrix.of(context) const Icon(
.client Icons.maps_ugc_outlined,
.rooms size: 80,
.where(controller.roomCheck) color: Colors.grey,
.toList(); ),
if (rooms.isEmpty) { Center(
return Column( child: Text(
mainAxisAlignment: MainAxisAlignment.center, L10n.of(context).startYourFirstChat,
mainAxisSize: MainAxisSize.min, textAlign: TextAlign.start,
children: <Widget>[ style: const TextStyle(
const Icon( color: Colors.grey,
Icons.maps_ugc_outlined, fontSize: 16,
size: 80,
color: Colors.grey,
),
Center(
child: Text(
L10n.of(context).startYourFirstChat,
textAlign: TextAlign.start,
style: const TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
],
);
}
return ListView.builder(
controller: controller.scrollController,
itemCount: rooms.length,
itemBuilder: (BuildContext context, int i) {
return ChatListItem(
rooms[i],
selected: controller.selectedRoomIds.contains(rooms[i].id),
onTap: controller.selectMode == SelectMode.select
? () => controller.toggleSelection(rooms[i].id)
: null,
onLongPress: () => controller.toggleSelection(rooms[i].id),
activeChat: controller.activeChat == rooms[i].id,
);
},
);
} else {
return ListView(
children: List.filled(
8,
const _DummyChat(),
), ),
); ),
} ),
}, ],
); );
}); }
child = ListView.builder(
key: ValueKey(Matrix.of(context).client.userID.toString() +
widget.controller.activeSpaceId.toString()),
controller: widget.controller.scrollController,
itemCount: rooms.length,
itemBuilder: (BuildContext context, int i) {
return ChatListItem(
rooms[i],
selected: widget.controller.selectedRoomIds.contains(rooms[i].id),
onTap: widget.controller.selectMode == SelectMode.select
? () => widget.controller.toggleSelection(rooms[i].id)
: null,
onLongPress: () => widget.controller.toggleSelection(rooms[i].id),
activeChat: widget.controller.activeChat == rooms[i].id,
);
},
);
} else {
child = ListView(
key: const ValueKey(false),
children: List.filled(
8,
const _DummyChat(),
),
);
}
return PageTransitionSwitcher(
reverse: reversed,
transitionBuilder: (
Widget child,
Animation<double> primaryAnimation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
animation: primaryAnimation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
child: child,
);
},
child: child,
);
}
@override
void dispose() {
_subscription.cancel();
_clientSubscription.cancel();
super.dispose();
}
bool _animationReversed() {
bool reversed;
// in case the matrix id changes, check the indexOf the matrix id
final newClient = Matrix.of(context).client;
if (_lastUserId != newClient.userID) {
reversed = Matrix.of(context)
.currentBundle
.indexWhere((element) => element.userID == _lastUserId) <
Matrix.of(context)
.currentBundle
.indexWhere((element) => element.userID == newClient.userID);
}
// otherwise, the space changed...
else {
reversed = widget.controller.spaces
.indexWhere((element) => element.id == _lastSpaceId) <
widget.controller.spaces.indexWhere(
(element) => element.id == widget.controller.activeSpaceId);
}
_lastUserId = newClient.userID;
_lastSpaceId = widget.controller.activeSpaceId;
return reversed;
}
} }
class _DummyChat extends StatefulWidget { class _DummyChat extends StatefulWidget {

View File

@ -37,12 +37,12 @@ packages:
source: hosted source: hosted
version: "0.7.0" version: "0.7.0"
animations: animations:
dependency: transitive dependency: "direct main"
description: description:
name: animations name: animations
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.0.0" version: "2.0.2"
ansicolor: ansicolor:
dependency: transitive dependency: transitive
description: description:
@ -77,7 +77,7 @@ packages:
name: async name: async
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.8.1" version: "2.8.2"
audioplayers: audioplayers:
dependency: "direct main" dependency: "direct main"
description: description:
@ -140,7 +140,7 @@ packages:
name: characters name: characters
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.1.0" version: "1.2.0"
charcode: charcode:
dependency: transitive dependency: transitive
description: description:
@ -811,7 +811,7 @@ packages:
name: matcher name: matcher
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.12.10" version: "0.12.11"
matrix: matrix:
dependency: "direct main" dependency: "direct main"
description: description:
@ -1383,21 +1383,21 @@ packages:
name: test name: test
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.17.10" version: "1.17.12"
test_api: test_api:
dependency: transitive dependency: transitive
description: description:
name: test_api name: test_api
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.4.2" version: "0.4.3"
test_core: test_core:
dependency: transitive dependency: transitive
description: description:
name: test_core name: test_core
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.4.0" version: "0.4.2"
timezone: timezone:
dependency: transitive dependency: transitive
description: description:
@ -1551,7 +1551,7 @@ packages:
name: vector_math name: vector_math
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.1.0" version: "2.1.1"
video_player: video_player:
dependency: transitive dependency: transitive
description: description:

View File

@ -9,6 +9,7 @@ environment:
dependencies: dependencies:
adaptive_dialog: ^1.1.0 adaptive_dialog: ^1.1.0
adaptive_theme: ^2.2.0 adaptive_theme: ^2.2.0
animations: ^2.0.2
audioplayers: ^0.20.1 audioplayers: ^0.20.1
blurhash_dart: ^1.1.0 blurhash_dart: ^1.1.0
cached_network_image: ^3.1.0 cached_network_image: ^3.1.0