feat: Fancy chat list loading animation
This commit is contained in:
parent
1ddfcdef5e
commit
bdc7a606bc
@ -1,3 +1,6 @@
|
||||
import 'dart:async';
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
@ -241,7 +244,8 @@ class _ChatListViewBody extends StatelessWidget {
|
||||
builder: (context, snapshot) {
|
||||
return Builder(
|
||||
builder: (context) {
|
||||
if (controller.waitForFirstSync) {
|
||||
if (controller.waitForFirstSync &&
|
||||
Matrix.of(context).client.prevBatch != null) {
|
||||
final rooms = Matrix.of(context)
|
||||
.client
|
||||
.rooms
|
||||
@ -286,19 +290,10 @@ class _ChatListViewBody extends StatelessWidget {
|
||||
},
|
||||
);
|
||||
} else {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Image.asset(
|
||||
'assets/private_chat_wallpaper.png',
|
||||
width: 100,
|
||||
),
|
||||
Text(
|
||||
L10n.of(context).yourChatsAreBeingSynced,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
return ListView(
|
||||
children: List.filled(
|
||||
8,
|
||||
const _DummyChat(),
|
||||
),
|
||||
);
|
||||
}
|
||||
@ -307,6 +302,100 @@ class _ChatListViewBody extends StatelessWidget {
|
||||
});
|
||||
}
|
||||
|
||||
class _DummyChat extends StatefulWidget {
|
||||
const _DummyChat({Key key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<_DummyChat> createState() => _DummyChatState();
|
||||
}
|
||||
|
||||
class _DummyChatState extends State<_DummyChat> {
|
||||
double opacity = Random().nextDouble();
|
||||
|
||||
Timer _timer;
|
||||
|
||||
static const duration = Duration(seconds: 1);
|
||||
|
||||
void _setRandomOpacity(_) {
|
||||
if (mounted) {
|
||||
setState(() => opacity = Random().nextDouble());
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
WidgetsBinding.instance.addPostFrameCallback(_setRandomOpacity);
|
||||
_timer ??= Timer.periodic(duration, _setRandomOpacity);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_timer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final titleColor =
|
||||
Theme.of(context).textTheme.bodyText1.color.withAlpha(100);
|
||||
final subtitleColor =
|
||||
Theme.of(context).textTheme.bodyText1.color.withAlpha(50);
|
||||
return AnimatedOpacity(
|
||||
opacity: opacity,
|
||||
duration: duration,
|
||||
child: ListTile(
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: titleColor,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 1,
|
||||
color: Theme.of(context).textTheme.bodyText1.color,
|
||||
),
|
||||
),
|
||||
title: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Container(
|
||||
height: 14,
|
||||
decoration: BoxDecoration(
|
||||
color: titleColor,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 36),
|
||||
Container(
|
||||
height: 14,
|
||||
width: 14,
|
||||
decoration: BoxDecoration(
|
||||
color: subtitleColor,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Container(
|
||||
height: 14,
|
||||
width: 14,
|
||||
decoration: BoxDecoration(
|
||||
color: subtitleColor,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
subtitle: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: subtitleColor,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
height: 12,
|
||||
margin: const EdgeInsets.only(right: 22),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
enum ChatListPopupMenuItemActions {
|
||||
createGroup,
|
||||
createSpace,
|
||||
|
Loading…
Reference in New Issue
Block a user