Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
Sahil Kumar
2020-12-30 14:50:13 +05:30
parent 1419027acd
commit 4e7fb6123c
4 changed files with 225 additions and 226 deletions
+1 -3
View File
@@ -90,9 +90,7 @@ class _ChannelFileDisplayScreenState extends State<ChannelFileDisplayScreen> {
builder: (context, snapshot) { builder: (context, snapshot) {
if (snapshot.data == null) { if (snapshot.data == null) {
return Center( return Center(
child: CircularProgressIndicator( child: const CircularProgressIndicator(),
backgroundColor: StreamChatTheme.of(context).accentColor,
),
); );
} }
+8 -3
View File
@@ -75,6 +75,7 @@ class ChannelListView extends StatefulWidget {
this.swipeToAction = false, this.swipeToAction = false,
this.pullToRefresh = true, this.pullToRefresh = true,
this.crossAxisCount = 1, this.crossAxisCount = 1,
this.padding,
this.selectedChannels = const [], this.selectedChannels = const [],
}) : super(key: key); }) : super(key: key);
@@ -139,6 +140,9 @@ class ChannelListView extends StatefulWidget {
/// The number of children in the cross axis. /// The number of children in the cross axis.
final int crossAxisCount; final int crossAxisCount;
/// The amount of space by which to inset the children.
final EdgeInsetsGeometry padding;
final List<Channel> selectedChannels; final List<Channel> selectedChannels;
@override @override
@@ -268,6 +272,7 @@ class _ChannelListViewState extends State<ChannelListView>
if (channels.isNotEmpty) { if (channels.isNotEmpty) {
if (widget.crossAxisCount > 1) { if (widget.crossAxisCount > 1) {
child = GridView.builder( child = GridView.builder(
padding: widget.padding,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: widget.crossAxisCount), crossAxisCount: widget.crossAxisCount),
itemCount: channels.length, itemCount: channels.length,
@@ -279,6 +284,7 @@ class _ChannelListViewState extends State<ChannelListView>
); );
} else { } else {
child = ListView.separated( child = ListView.separated(
padding: widget.padding,
physics: AlwaysScrollableScrollPhysics(), physics: AlwaysScrollableScrollPhysics(),
itemCount: itemCount:
channels.isNotEmpty ? channels.length + 1 : channels.length, channels.isNotEmpty ? channels.length + 1 : channels.length,
@@ -306,6 +312,7 @@ class _ChannelListViewState extends State<ChannelListView>
Widget _buildLoadingWidget() { Widget _buildLoadingWidget() {
return ListView( return ListView(
padding: widget.padding,
physics: AlwaysScrollableScrollPhysics(), physics: AlwaysScrollableScrollPhysics(),
children: List.generate( children: List.generate(
25, 25,
@@ -331,9 +338,7 @@ class _ChannelListViewState extends State<ChannelListView>
highlightColor: Color(0xffffffff), highlightColor: Color(0xffffffff),
child: Column( child: Column(
children: [ children: [
SizedBox( SizedBox(height: 4.0),
height: 4.0,
),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
+1 -3
View File
@@ -92,9 +92,7 @@ class _ChannelMediaDisplayScreenState extends State<ChannelMediaDisplayScreen> {
builder: (context, snapshot) { builder: (context, snapshot) {
if (snapshot.data == null) { if (snapshot.data == null) {
return Center( return Center(
child: CircularProgressIndicator( child: const CircularProgressIndicator(),
backgroundColor: StreamChatTheme.of(context).accentColor,
),
); );
} }
+215 -217
View File
@@ -16,7 +16,7 @@ import 'package:stream_chat_flutter/src/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
class ImageFooter extends StatefulWidget { class ImageFooter extends StatefulWidget implements PreferredSizeWidget {
/// Callback to call when pressing the back button. /// Callback to call when pressing the back button.
/// By default it calls [Navigator.pop] /// By default it calls [Navigator.pop]
final VoidCallback onBackPressed; final VoidCallback onBackPressed;
@@ -61,12 +61,12 @@ class ImageFooter extends StatefulWidget {
class _ImageFooterState extends State<ImageFooter> { class _ImageFooterState extends State<ImageFooter> {
bool _userSearchMode = false; bool _userSearchMode = false;
TextEditingController _searchController; TextEditingController _searchController;
TextEditingController _messageController = TextEditingController(); final TextEditingController _messageController = TextEditingController();
FocusNode _messageFocusNode = FocusNode(); final FocusNode _messageFocusNode = FocusNode();
String _channelNameQuery; String _channelNameQuery;
List<Channel> _selectedChannels = []; final List<Channel> _selectedChannels = [];
bool _loading = false; bool _loading = false;
Timer _debounce; Timer _debounce;
@@ -103,52 +103,54 @@ class _ImageFooterState extends State<ImageFooter> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SafeArea( return SizedBox.fromSize(
child: Container( size: widget.preferredSize,
color: child: MediaQuery.removePadding(
StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color, context: context,
padding: EdgeInsets.symmetric(vertical: 8.0), removeTop: true,
child: Row( child: BottomAppBar(
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: Row(
children: [ mainAxisAlignment: MainAxisAlignment.spaceBetween,
IconButton( children: [
icon: StreamSvgIcon.icon_SHARE( IconButton(
size: 24.0, icon: StreamSvgIcon.icon_SHARE(
color: Colors.black, size: 24.0,
color: Colors.black,
),
onPressed: () {
_buildShareModal(context);
},
), ),
onPressed: () { InkWell(
_buildShareModal(context); onTap: widget.onTitleTap,
}, child: Container(
), child: Column(
InkWell( crossAxisAlignment: CrossAxisAlignment.center,
onTap: widget.onTitleTap, mainAxisAlignment: MainAxisAlignment.center,
child: Container( mainAxisSize: MainAxisSize.min,
child: Column( children: <Widget>[
crossAxisAlignment: CrossAxisAlignment.center, Text(
mainAxisAlignment: MainAxisAlignment.center, '${widget.currentPage + 1} of ${widget.totalPages}',
mainAxisSize: MainAxisSize.min, style: TextStyle(
children: <Widget>[ fontSize: 16.0,
Text( fontWeight: FontWeight.w700,
'${widget.currentPage + 1} of ${widget.totalPages}', color: Colors.black,
style: TextStyle( ),
fontSize: 16.0,
fontWeight: FontWeight.w700,
color: Colors.black,
), ),
), ],
], ),
), ),
), ),
), IconButton(
IconButton( icon: StreamSvgIcon.Icon_grid(
icon: StreamSvgIcon.Icon_grid( color: Colors.black,
color: Colors.black, ),
onPressed: () {
_buildPhotosModal(context);
},
), ),
onPressed: () { ],
_buildPhotosModal(context); ),
},
),
],
), ),
), ),
); );
@@ -258,8 +260,8 @@ class _ImageFooterState extends State<ImageFooter> {
); );
} }
void _buildShareModal(context) { void _buildShareModal(context) async {
showDialog( final result = await showDialog(
context: context, context: context,
builder: (context) { builder: (context) {
return StatefulBuilder(builder: (context, modalSetState) { return StatefulBuilder(builder: (context, modalSetState) {
@@ -282,10 +284,6 @@ class _ImageFooterState extends State<ImageFooter> {
child: Column( child: Column(
children: [ children: [
_buildTextInputSection(modalSetState), _buildTextInputSection(modalSetState),
if (_userSearchMode)
SizedBox(
height: 22.0,
),
Expanded( Expanded(
child: ChannelsBloc( child: ChannelsBloc(
child: ChannelListView( child: ChannelListView(
@@ -302,6 +300,7 @@ class _ImageFooterState extends State<ImageFooter> {
}); });
} }
}, },
padding: const EdgeInsets.symmetric(vertical: 8),
crossAxisCount: 4, crossAxisCount: 4,
pagination: PaginationParams( pagination: PaginationParams(
limit: 25, limit: 25,
@@ -342,7 +341,8 @@ class _ImageFooterState extends State<ImageFooter> {
), ),
), ),
Text( Text(
'No chat matches these keywords...'), 'No chat matches these keywords...',
),
], ],
), ),
), ),
@@ -360,42 +360,30 @@ class _ImageFooterState extends State<ImageFooter> {
Align( Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: Container( child: Container(
color: Colors.white, height: kToolbarHeight,
height: 48.0, child: SizedBox.expand(
child: Material( child: RaisedButton(
child: InkWell( onPressed: () async {
onTap: () async { final attachment = widget
var url = widget .mediaAttachments[widget.currentPage];
.mediaAttachments[widget.currentPage] var url = attachment.imageUrl ??
.imageUrl ?? attachment.assetUrl ??
widget attachment.thumbUrl;
.mediaAttachments[widget.currentPage] if (attachment.type == 'video') {
.assetUrl ??
widget
.mediaAttachments[widget.currentPage]
.thumbUrl;
if (widget
.mediaAttachments[widget.currentPage]
.type ==
'video') {
await _saveVideo(url); await _saveVideo(url);
Navigator.pop(context);
} else { } else {
await _saveImage(url); await _saveImage(url);
Navigator.pop(context);
} }
Navigator.pop(context);
}, },
child: SizedBox.expand( color: Colors.white,
child: Center( elevation: 8,
child: Text( child: Text(
'Save to Photos', 'Save to Photos',
style: TextStyle( style: TextStyle(
color: StreamChatTheme.of(context) color:
.accentColor, StreamChatTheme.of(context).accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
),
),
), ),
), ),
), ),
@@ -411,62 +399,74 @@ class _ImageFooterState extends State<ImageFooter> {
}); });
}, },
); );
if (result == null) {
_selectedChannels.clear();
}
} }
Widget _buildTextInputSection(modalSetState) { Widget _buildTextInputSection(modalSetState) {
if (_userSearchMode) { if (_userSearchMode) {
return Column( return Column(
children: [ children: [
SizedBox( SizedBox(height: 16.0),
height: 16.0,
),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
SizedBox( SizedBox(width: 8.0),
width: 16.0,
),
Expanded( Expanded(
child: TextField( child: Container(
controller: _searchController, height: 36,
cursorColor: Colors.black, margin: const EdgeInsets.symmetric(
autofocus: true, vertical: 8,
decoration: InputDecoration( horizontal: 8,
isDense: true, ),
prefixIconConstraints: child: TextField(
BoxConstraints.tight(Size(36.0, 44.0)), controller: _searchController,
prefixIcon: Padding( cursorColor: Colors.black,
padding: const EdgeInsets.symmetric( autofocus: true,
vertical: 2.0, horizontal: 6.0), decoration: InputDecoration(
child: StreamSvgIcon.search( prefixIconConstraints: BoxConstraints.tight(Size(40, 24)),
color: Colors.black, prefixIcon: Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: StreamSvgIcon.search(
color: Colors.black,
size: 24,
),
), ),
hintText: 'Search',
hintStyle: TextStyle(
color: Colors.black.withOpacity(0.5),
fontSize: 14,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black.withOpacity(0.08),
),
borderRadius: BorderRadius.circular(24),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(24.0),
borderSide: BorderSide(
color: Colors.black.withOpacity(0.08),
),
),
contentPadding: EdgeInsets.zero,
), ),
hintText: 'Search',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0),
borderSide:
BorderSide(color: Colors.black.withOpacity(0.08)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0),
borderSide:
BorderSide(color: Colors.black.withOpacity(0.08)),
),
contentPadding: EdgeInsets.zero,
), ),
), ),
), ),
SizedBox(
width: 8.0,
),
IconButton( IconButton(
icon: StreamSvgIcon.close_small( icon: StreamSvgIcon.close_small(
color: Colors.black.withOpacity(0.5), color: Colors.black.withOpacity(0.5),
), ),
splashRadius: 24,
onPressed: () { onPressed: () {
modalSetState(() { modalSetState(() {
_userSearchMode = false; if (_searchController.text.isNotEmpty) {
_searchController.text = '';
} else {
_userSearchMode = false;
}
}); });
setState(() {}); setState(() {});
}, },
@@ -475,80 +475,80 @@ class _ImageFooterState extends State<ImageFooter> {
), ),
], ],
); );
} else {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: IconButton(
icon: StreamSvgIcon.search(
color: Colors.black,
),
iconSize: 24.0,
onPressed: () {
modalSetState(() {
_userSearchMode = true;
});
},
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Select a Chat to Share',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: IconButton(
icon: StreamSvgIcon.share_arrow(
color: Colors.black,
),
onPressed: () async {
var url =
widget.mediaAttachments[widget.currentPage].imageUrl ??
widget.mediaAttachments[widget.currentPage].assetUrl ??
widget.mediaAttachments[widget.currentPage].thumbUrl;
var type =
widget.mediaAttachments[widget.currentPage].type == 'image'
? 'jpg'
: url?.split('?')?.first?.split('.')?.last ?? 'jpg';
var request = await HttpClient().getUrl(Uri.parse(url));
var response = await request.close();
var bytes = await consolidateHttpClientResponseBytes(response);
await Share.file('File', 'image.$type', bytes, 'image/$type');
},
),
),
],
);
} }
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: IconButton(
icon: StreamSvgIcon.search(
color: Colors.black,
),
iconSize: 24.0,
onPressed: () {
modalSetState(() {
_userSearchMode = true;
});
},
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Select a Chat to Share',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: IconButton(
icon: StreamSvgIcon.share_arrow(
color: Colors.black,
),
onPressed: () async {
final attachment = widget.mediaAttachments[widget.currentPage];
var url = attachment.imageUrl ??
attachment.assetUrl ??
attachment.thumbUrl;
var type = attachment.type == 'image'
? 'jpg'
: url?.split('?')?.first?.split('.')?.last ?? 'jpg';
var request = await HttpClient().getUrl(Uri.parse(url));
var response = await request.close();
var bytes = await consolidateHttpClientResponseBytes(response);
await Share.file('File', 'image.$type', bytes, 'image/$type');
},
),
),
],
);
} }
Widget _buildShareTextInputSection(modalSetState) { Widget _buildShareTextInputSection(modalSetState) {
return Align( return Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: Container( child: BottomAppBar(
color: Colors.white, child: Container(
height: 56.0, height: 40.0,
child: _loading margin: const EdgeInsets.symmetric(
? Center( vertical: 8,
child: Padding( horizontal: 8,
padding: const EdgeInsets.all(8.0), ),
child: CircularProgressIndicator(), child: _loading
), ? Center(
) child: Padding(
: Row( padding: const EdgeInsets.all(8.0),
children: [ child: CircularProgressIndicator(),
Expanded( ),
child: Padding( )
padding: const EdgeInsets.only(left: 8.0), : Row(
children: [
Expanded(
child: TextField( child: TextField(
controller: _messageController, controller: _messageController,
focusNode: _messageFocusNode, focusNode: _messageFocusNode,
@@ -560,54 +560,52 @@ class _ImageFooterState extends State<ImageFooter> {
setState(() {}); setState(() {});
}, },
decoration: InputDecoration( decoration: InputDecoration(
isDense: true,
prefixText: ' ', prefixText: ' ',
hintText: 'Add a comment', hintText: 'Add a comment',
border: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0), borderRadius: BorderRadius.circular(24.0),
borderSide: BorderSide( borderSide: BorderSide(
color: Colors.black.withOpacity(0.16), color: Colors.black.withOpacity(0.16),
), ),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0), borderRadius: BorderRadius.circular(24.0),
borderSide: BorderSide( borderSide: BorderSide(
color: Colors.black.withOpacity(0.16), color: Colors.black.withOpacity(0.16),
)), )),
contentPadding: EdgeInsets.symmetric(vertical: 12.0), contentPadding: const EdgeInsets.all(0),
), ),
), ),
), ),
), SizedBox(width: 8),
IconTheme( IconTheme(
data: StreamChatTheme.of(context) data: StreamChatTheme.of(context)
.channelTheme .channelTheme
.messageInputButtonIconTheme, .messageInputButtonIconTheme,
child: Center( child: IconButton(
child: Padding( onPressed: () async {
padding: const EdgeInsets.all(8.0), modalSetState(() => _loading = true);
child: InkWell( await sendMessage();
onTap: () async { modalSetState(() => _loading = false);
modalSetState(() { },
_loading = true; splashRadius: 24,
}); visualDensity: VisualDensity.compact,
await sendMessage(); constraints: BoxConstraints.tightFor(
modalSetState(() { height: 24,
_loading = false; width: 24,
}); ),
}, padding: EdgeInsets.zero,
child: Transform.rotate( icon: Transform.rotate(
angle: -pi / 2, angle: -pi / 2,
child: StreamSvgIcon.Icon_send_message( child: StreamSvgIcon.Icon_send_message(
color: StreamChatTheme.of(context).accentColor, color: StreamChatTheme.of(context).accentColor,
),
), ),
), ),
), ),
), ),
), ],
], ),
), ),
), ),
); );
} }