Commit 4b643393 authored by Wilko Manger's avatar Wilko Manger

Add loading bubbles with shimmer

parent bdcd38a2
......@@ -144,7 +144,7 @@ class _ChatPageState extends State<ChatPage> {
child: Column(
children: <Widget>[
Expanded(
child: _MessageList(),
child: _MessageList(room: _room),
),
ConstrainedBox(
constraints: BoxConstraints.loose(
......@@ -164,6 +164,10 @@ class _ChatPageState extends State<ChatPage> {
}
class _MessageList extends StatefulWidget {
final Room room;
const _MessageList({Key key, @required this.room}) : super(key: key);
@override
State<StatefulWidget> createState() => _MessageListState();
}
......@@ -253,7 +257,16 @@ class _MessageListState extends State<_MessageList> {
);
}
return CircularProgressIndicator();
return ListView(
padding: EdgeInsets.symmetric(horizontal: 16),
reverse: true,
children: List.generate(10, (i) {
return MessageBubble.loading(
room: widget.room,
isMine: i % 2 == 0,
);
}),
);
},
);
}
......
// Copyright (C) 2020 Wilko Manger
//
// This file is part of Pattle.
//
// Pattle is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Pattle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with Pattle. If not, see <https://www.gnu.org/licenses/>.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:pattle/src/section/main/chat/widgets/bubble/message.dart';
import 'package:shimmer/shimmer.dart';
class LoadingContent extends StatefulWidget {
@override
State<StatefulWidget> createState() => _LoadingContentState();
}
class _LoadingContentState extends State<LoadingContent> {
static const _minWidth = 164;
static const _maxWidth = 256;
static const _minHeight = 56;
static const _maxHeight = 95;
double _width, _height;
@override
void initState() {
super.initState();
final random = Random();
_width = _minWidth + random.nextInt(_maxWidth - _minWidth).toDouble();
_height = _minHeight + random.nextInt(_maxHeight - _minHeight).toDouble();
}
@override
Widget build(BuildContext context) {
final bubble = MessageBubble.of(context);
return Shimmer.fromColors(
baseColor: bubble.color,
highlightColor: Colors.grey[200],
child: Container(
width: _width,
height: _height,
decoration: BoxDecoration(
borderRadius: bubble.borderRadius,
color: bubble.color,
),
),
);
}
}
......@@ -18,6 +18,7 @@
import 'package:flutter/material.dart';
import 'package:matrix_sdk/matrix_sdk.dart';
import 'package:pattle/src/resources/theme.dart';
import 'package:pattle/src/section/main/chat/widgets/bubble/message/content/loading.dart';
import 'package:pattle/src/section/main/models/chat_message.dart';
import 'package:pattle/src/section/main/widgets/message_state.dart';
import 'package:pattle/src/util/color.dart';
......@@ -44,6 +45,8 @@ class MessageBubble extends StatelessWidget {
final BorderRadius borderRadius;
final Color color;
final Widget child;
final EdgeInsets contentPadding = EdgeInsets.all(8);
......@@ -57,21 +60,23 @@ class MessageBubble extends StatelessWidget {
MessageBubble._({
@required this.message,
@required this.previousMessage,
@required this.nextMessage,
this.previousMessage,
this.nextMessage,
@required this.isStartOfGroup,
@required this.isEndOfGroup,
this.reply,
@required this.borderRadius,
@required this.child,
this.color,
});
factory MessageBubble({
ChatMessage message,
@required ChatMessage message,
ChatMessage previousMessage,
ChatMessage nextMessage,
ChatMessage reply,
Widget child,
Color color,
@required Widget child,
}) {
final isStartOfGroup = _isStartOfGroup(message, previousMessage, reply);
final isEndOfGroup = _isEndofGroup(message, nextMessage, reply);
......@@ -84,6 +89,7 @@ class MessageBubble extends StatelessWidget {
isEndOfGroup: isEndOfGroup,
reply: reply,
borderRadius: _borderRadius(message, isEndOfGroup, isStartOfGroup),
color: color,
child: child,
);
}
......@@ -116,6 +122,34 @@ class MessageBubble extends StatelessWidget {
);
}
factory MessageBubble.loading({@required Room room, bool isMine = false}) {
return MessageBubble(
color: Colors.grey[300],
message: ChatMessage(
room,
TextMessageEvent(
RoomEventArgs(
id: EventId('1234'),
sender: User(
id: UserId('@wilko:pattle.im'),
state: UserState(
roomId: RoomId('!343432:pattle.im'),
displayName: 'Wilko',
since: DateTime.now(),
),
),
time: DateTime.now(),
),
content: TextMessage(
body: 'Blabla',
),
),
isMine: isMine,
),
child: LoadingContent(),
);
}
static bool _isStartOfGroup(
ChatMessage message,
ChatMessage previousMessage,
......@@ -215,17 +249,18 @@ class MessageBubble extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = message.isMine
? themed(
context,
light: LightColors.red[450],
dark: LightColors.red[700],
)
: themed(
context,
light: Colors.white,
dark: Colors.grey[800],
);
final color = this.color ??
(message.isMine
? themed(
context,
light: LightColors.red[450],
dark: LightColors.red[700],
)
: themed(
context,
light: Colors.white,
dark: Colors.grey[800],
));
final border = RoundedRectangleBorder(borderRadius: borderRadius);
......
......@@ -430,6 +430,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "0.5.4+3"
shimmer:
dependency: "direct main"
description:
name: shimmer
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
sky_engine:
dependency: transitive
description: flutter
......
......@@ -62,6 +62,8 @@ dependencies:
mdi: ^0.2.1
shimmer: ^1.1.0
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment