talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #146 from GetStream/feature/channel-list-header

Browse Source 
Feature/channel list header
This commit is contained in:
Salvatore Giordano
2020-11-24 11:29:00 +01:00
committed by GitHub
parent b20caeee8f 92b88c505e
commit 642db9a70c
7 changed files with 242 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/group_chat_details_screen.dart
+1 -2
View File
@@ -3,7 +3,6 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:uuid/uuid.dart';
import 'main.dart';
import 'neumorphic_button.dart';
class GroupChatDetailsScreen extends StatefulWidget {
final List<User> selectedUsers;
@@ -103,7 +102,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
),
),
actions: [
NeumorphicButton(
StreamNeumorphicButton(
child: IconButton(
padding: const EdgeInsets.all(0),
icon: Icon(StreamIcons.check),
example/lib/main.dart
+8 -6
View File
@@ -69,12 +69,14 @@ class ChannelListPage extends StatelessWidget {
Widget build(BuildContext context) {
final user = StreamChat.of(context).user;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
'Stream Chat',
style: TextStyle(color: Colors.black),
),
appBar: ChannelListHeader(
onNewChatButtonTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => NewChatScreen(),
),
);
},
),
drawer: _buildDrawer(context, user),
drawerEdgeDragWidth: 50,
example/lib/new_chat_screen.dart
+1 -2
View File
@@ -5,7 +5,6 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'chips_input_text_field.dart';
import 'main.dart';
import 'neumorphic_button.dart';
import 'new_group_chat_screen.dart';
class NewChatScreen extends StatefulWidget {
@@ -193,7 +192,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
NeumorphicButton(
StreamNeumorphicButton(
child: Icon(
StreamIcons.group,
color: Color(0xFF006CFF),
lib/src/channel_list_header.dart
+223
View File
@@ -0,0 +1,223 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'stream_chat.dart';
typedef _TitleBuilder = Widget Function(
BuildContext context,
ConnectionStatus status,
Client client,
);
///
/// It shows the current [Client] status.
///
/// ```dart
/// class MyApp extends StatelessWidget {
/// final Client client;
///
/// MyApp(this.client);
///
/// @override
/// Widget build(BuildContext context) {
/// return MaterialApp(
/// home: StreamChat(
/// client: client,
/// child: Scaffold(
/// appBar: ChannelListHeader(),
/// ),
/// ),
/// );
/// }
/// }
/// ```
///
/// Usually you would use this widget as an [AppBar] inside a [Scaffold].
/// However you can also use it as a normal widget.
///
/// The widget by default uses the inherited [Client] to fetch information about the status.
/// However you can also pass your own [Client] if you don't have it in the widget tree.
///
/// The widget components render the ui based on the first ancestor of type [StreamChatTheme] and on its [ChannelTheme.channelHeaderTheme] property.
/// Modify it to change the widget appearance.
class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
/// Instantiates a ChannelListHeader
const ChannelListHeader({
Key key,
this.client,
this.titleBuilder,
this.onUserAvatarTap,
this.onNewChatButtonTap,
}) : super(key: key);
/// Pass this if you don't have a [Client] in your widget tree.
final Client client;
/// Use this to build your own title as per different [ConnectionStatus]
final _TitleBuilder titleBuilder;
/// Callback to call when pressing the user avatar button.
/// By default it calls Scaffold.of(context).openDrawer()
final Function(User) onUserAvatarTap;
/// Callback to call when pressing the new chat button.
final VoidCallback onNewChatButtonTap;
@override
Widget build(BuildContext context) {
final _client = client ?? StreamChat.of(context).client;
final user = _client.state.user;
return AppBar(
brightness: Theme.of(context).brightness,
elevation: 1,
backgroundColor:
StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
centerTitle: true,
leading: Center(
child: UserAvatar(
user: user,
showOnlineStatus: false,
onTap: onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
borderRadius: BorderRadius.circular(20),
constraints: BoxConstraints.tightFor(
height: 40,
width: 40,
),
),
),
actions: [
StreamNeumorphicButton(
child: IconButton(
icon: ValueListenableBuilder<ConnectionStatus>(
valueListenable: _client.wsConnectionStatus,
builder: (context, status, child) {
var color;
switch (status) {
case ConnectionStatus.connected:
color = Color(0xFF006CFF);
break;
case ConnectionStatus.connecting:
color = Colors.grey;
break;
case ConnectionStatus.disconnected:
color = Colors.grey;
break;
}
return SvgPicture.asset(
'svgs/icon_pen_write.svg',
package: 'stream_chat_flutter',
width: 24.0,
height: 24.0,
color: color,
);
},
),
onPressed: onNewChatButtonTap,
),
)
],
title: ValueListenableBuilder<ConnectionStatus>(
valueListenable: _client.wsConnectionStatus,
builder: (context, status, child) {
if (titleBuilder != null) {
return titleBuilder(context, status, _client);
}
switch (status) {
case ConnectionStatus.connected:
return _buildConnectedTitleState(context);
case ConnectionStatus.connecting:
return _buildConnectingTitleState(context);
case ConnectionStatus.disconnected:
return _buildDisconnectedTitleState(context, _client);
default:
return Offstage();
}
},
),
);
}
Widget _buildConnectedTitleState(BuildContext context) => Text(
'Stream Chat',
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.title
.copyWith(
fontSize: 16,
fontWeight: FontWeight.bold,
),
);
Widget _buildConnectingTitleState(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 16,
width: 16,
child: Center(
child: CircularProgressIndicator(),
),
),
SizedBox(width: 10),
Text(
'Searching for Network',
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.title
.copyWith(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
);
}
Widget _buildDisconnectedTitleState(BuildContext context, Client client) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Offline...',
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.title
.copyWith(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
TextButton(
onPressed: () async {
await client.disconnect();
return client.connect();
},
child: Text(
'Try Again',
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.title
.copyWith(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xFF006CFF),
),
),
),
],
);
}
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
}
example/lib/neumorphic_button.dart → lib/src/stream_neumorphic_button.dart
+2 -2
View File
@@ -1,10 +1,10 @@
import 'package:flutter/material.dart';
class NeumorphicButton extends StatelessWidget {
class StreamNeumorphicButton extends StatelessWidget {
final Widget child;
final Color backgroundColor;
const NeumorphicButton({
const StreamNeumorphicButton({
Key key,
@required this.child,
this.backgroundColor = Colors.white,
lib/stream_chat_flutter.dart
+2
View File
@@ -33,3 +33,5 @@ export 'src/video_attachment.dart';
export 'src/users_bloc.dart';
export 'src/user_list_view.dart';
export 'src/user_item.dart';
export 'src/stream_neumorphic_button.dart';
export 'src/channel_list_header.dart';
svgs/icon_pen_write.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21 21H3V16.757L16.435 3.322C16.8255 2.93162 17.4585 2.93162 17.849 3.322L20.678 6.151C21.0684 6.5415 21.0684 7.1745 20.678 7.565L9.243 19H21V21ZM5 19H6.414L15.728 9.686L14.314 8.272L5 17.586V19ZM18.556 6.858L17.142 8.272L15.728 6.858L17.142 5.444L18.556 6.858Z"
fill="#006CFF" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 453 B