mirror of
https://gitlab.com/famedly/fluffychat.git
synced 2024-11-24 04:59:26 +01:00
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/cupertino.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
@ -241,7 +244,8 @@ class _ChatListViewBody extends StatelessWidget {
|
|||||||
builder: (context, snapshot) {
|
builder: (context, snapshot) {
|
||||||
return Builder(
|
return Builder(
|
||||||
builder: (context) {
|
builder: (context) {
|
||||||
if (controller.waitForFirstSync) {
|
if (controller.waitForFirstSync &&
|
||||||
|
Matrix.of(context).client.prevBatch != null) {
|
||||||
final rooms = Matrix.of(context)
|
final rooms = Matrix.of(context)
|
||||||
.client
|
.client
|
||||||
.rooms
|
.rooms
|
||||||
@ -286,19 +290,10 @@ class _ChatListViewBody extends StatelessWidget {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return Center(
|
return ListView(
|
||||||
child: Column(
|
children: List.filled(
|
||||||
mainAxisSize: MainAxisSize.min,
|
8,
|
||||||
children: [
|
const _DummyChat(),
|
||||||
Image.asset(
|
|
||||||
'assets/private_chat_wallpaper.png',
|
|
||||||
width: 100,
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
L10n.of(context).yourChatsAreBeingSynced,
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -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 {
|
enum ChatListPopupMenuItemActions {
|
||||||
createGroup,
|
createGroup,
|
||||||
createSpace,
|
createSpace,
|
||||||
|
Loading…
Reference in New Issue
Block a user