[ChannelListHeader] Refactor, Add support for trailing, leading widget taps.
This commit is contained in:
@@ -7,22 +7,57 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
|
|||||||
|
|
||||||
import 'stream_chat.dart';
|
import 'stream_chat.dart';
|
||||||
|
|
||||||
typedef TitleBuilder = Widget Function(
|
typedef _TitleBuilder = Widget Function(
|
||||||
BuildContext context,
|
BuildContext context,
|
||||||
ConnectionStatus status,
|
ConnectionStatus status,
|
||||||
Client client,
|
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 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 {
|
class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
|
||||||
|
/// Instantiates a ChannelListHeader
|
||||||
const ChannelListHeader({
|
const ChannelListHeader({
|
||||||
Key key,
|
Key key,
|
||||||
this.client,
|
this.client,
|
||||||
this.titleBuilder,
|
this.titleBuilder,
|
||||||
|
this.onUserAvatarTap,
|
||||||
|
this.onNewChatButtonTap,
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
final Client client;
|
final Client client;
|
||||||
|
|
||||||
final TitleBuilder titleBuilder;
|
final _TitleBuilder titleBuilder;
|
||||||
|
|
||||||
|
final Function(User) onUserAvatarTap;
|
||||||
|
|
||||||
|
final VoidCallback onNewChatButtonTap;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
@@ -37,7 +72,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
|
|||||||
leading: Center(
|
leading: Center(
|
||||||
child: UserAvatar(
|
child: UserAvatar(
|
||||||
user: user,
|
user: user,
|
||||||
onTap: (_) => Scaffold.of(context).openDrawer(),
|
onTap: onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
|
||||||
|
borderRadius: BorderRadius.circular(20),
|
||||||
constraints: BoxConstraints.tightFor(
|
constraints: BoxConstraints.tightFor(
|
||||||
height: 40,
|
height: 40,
|
||||||
width: 40,
|
width: 40,
|
||||||
@@ -68,7 +104,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
onPressed: () {},
|
onPressed: onNewChatButtonTap,
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
@@ -80,11 +116,11 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
|
|||||||
}
|
}
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case ConnectionStatus.connected:
|
case ConnectionStatus.connected:
|
||||||
return _buildConnectedTitleState();
|
return _buildConnectedTitleState(context);
|
||||||
case ConnectionStatus.connecting:
|
case ConnectionStatus.connecting:
|
||||||
return _buildConnectingTitleState();
|
return _buildConnectingTitleState(context);
|
||||||
case ConnectionStatus.disconnected:
|
case ConnectionStatus.disconnected:
|
||||||
return _buildDisconnectedTitleState(_client);
|
return _buildDisconnectedTitleState(context, _client);
|
||||||
default:
|
default:
|
||||||
return Offstage();
|
return Offstage();
|
||||||
}
|
}
|
||||||
@@ -93,16 +129,19 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildConnectedTitleState() => Text(
|
Widget _buildConnectedTitleState(BuildContext context) => Text(
|
||||||
'Stream Chat',
|
'Stream Chat',
|
||||||
style: TextStyle(
|
style: StreamChatTheme.of(context)
|
||||||
fontSize: 16,
|
.channelTheme
|
||||||
fontWeight: FontWeight.bold,
|
.channelHeaderTheme
|
||||||
color: Colors.black,
|
.title
|
||||||
),
|
.copyWith(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
Widget _buildConnectingTitleState() {
|
Widget _buildConnectingTitleState(BuildContext context) {
|
||||||
return Row(
|
return Row(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
@@ -116,37 +155,47 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
|
|||||||
SizedBox(width: 10),
|
SizedBox(width: 10),
|
||||||
Text(
|
Text(
|
||||||
'Searching for Network',
|
'Searching for Network',
|
||||||
style: TextStyle(
|
style: StreamChatTheme.of(context)
|
||||||
fontSize: 16,
|
.channelTheme
|
||||||
fontWeight: FontWeight.bold,
|
.channelHeaderTheme
|
||||||
color: Colors.black,
|
.title
|
||||||
),
|
.copyWith(
|
||||||
)
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildDisconnectedTitleState(Client client) {
|
Widget _buildDisconnectedTitleState(BuildContext context, Client client) {
|
||||||
return Row(
|
return Row(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
Text(
|
Text(
|
||||||
'Offline...',
|
'Offline...',
|
||||||
style: TextStyle(
|
style: StreamChatTheme.of(context)
|
||||||
fontSize: 16,
|
.channelTheme
|
||||||
fontWeight: FontWeight.bold,
|
.channelHeaderTheme
|
||||||
color: Colors.black,
|
.title
|
||||||
),
|
.copyWith(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
TextButton(
|
TextButton(
|
||||||
onPressed: () => client.connect(),
|
onPressed: () => client.connect(),
|
||||||
child: Text(
|
child: Text(
|
||||||
'Try Again',
|
'Try Again',
|
||||||
style: TextStyle(
|
style: StreamChatTheme.of(context)
|
||||||
fontSize: 16,
|
.channelTheme
|
||||||
fontWeight: FontWeight.bold,
|
.channelHeaderTheme
|
||||||
color: Color(0xFF006CFF),
|
.title
|
||||||
),
|
.copyWith(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: Color(0xFF006CFF),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user