Merge pull request #365 from GetStream/fix/accessibility-text-size-scaling

This commit is contained in:
Sahil Kumar
2021-03-31 20:47:27 +05:30
committed by GitHub
5 changed files with 91 additions and 79 deletions
@@ -97,3 +97,8 @@ extension InputDecorationX on InputDecoration {
);
}
}
extension BuildContextX on BuildContext {
double get textScaleFactor =>
MediaQuery.maybeOf(this)?.textScaleFactor ?? 1.0;
}
@@ -319,7 +319,11 @@ class MessageInputState extends State<MessageInput> {
),
if (widget.parentMessage != null && !widget.hideSendAsDm)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
padding: const EdgeInsets.only(
right: 12.0,
left: 12.0,
bottom: 12.0,
),
child: _buildDmCheckbox(),
),
_buildFilePickerSection(),
@@ -354,68 +358,68 @@ class MessageInputState extends State<MessageInput> {
}
Widget _buildDmCheckbox() {
return Container(
height: 36,
padding: const EdgeInsets.only(
left: 12,
bottom: 12,
top: 8,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 16,
width: 16,
foregroundDecoration: BoxDecoration(
border: _sendAsDm
? null
: Border.all(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
width: 2,
),
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 16,
width: 16,
foregroundDecoration: BoxDecoration(
border: _sendAsDm
? null
: Border.all(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
width: 2,
),
borderRadius: BorderRadius.circular(3),
),
child: Center(
child: Material(
borderRadius: BorderRadius.circular(3),
),
child: Center(
child: Material(
borderRadius: BorderRadius.circular(3),
color: _sendAsDm
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.white,
child: InkWell(
onTap: () {
setState(() {
_sendAsDm = !_sendAsDm;
});
},
child: AnimatedCrossFade(
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
crossFadeState: _sendAsDm
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: StreamSvgIcon.check(
size: 16.0,
color: StreamChatTheme.of(context).colorTheme.white,
),
secondChild: SizedBox(
height: 16,
width: 16,
),
color: _sendAsDm
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.white,
child: InkWell(
onTap: () {
setState(() {
_sendAsDm = !_sendAsDm;
});
},
child: AnimatedCrossFade(
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
crossFadeState: _sendAsDm
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: StreamSvgIcon.check(
size: 16.0,
color: StreamChatTheme.of(context).colorTheme.white,
),
secondChild: SizedBox(
height: 16,
width: 16,
),
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text('Also send as direct message'),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Text(
'Also send as direct message',
style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
),
),
],
),
),
],
);
}
@@ -268,9 +268,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
}
child = LazyLoadScrollView(
onEndOfPage: () async {
return _messageSearchListController.paginateData();
},
onEndOfPage: () => _messageSearchListController.paginateData(),
child: child,
);
@@ -585,7 +585,8 @@ class _MessageWidgetState extends State<MessageWidget>
),
],
),
if (showBottomRow) SizedBox(height: 20.0),
if (showBottomRow)
SizedBox(height: context.textScaleFactor * 18.0),
],
),
if (showBottomRow)
@@ -682,6 +683,8 @@ class _MessageWidgetState extends State<MessageWidget>
}
};
const usernameKey = Key('username');
children.addAll([
if (showInChannel || showThreadReplyIndicator) ...[
if (showThreadParticipants)
@@ -697,7 +700,10 @@ class _MessageWidgetState extends State<MessageWidget>
if (showUsername)
Text(
widget.message.user.name,
maxLines: 1,
key: usernameKey,
style: widget.messageTheme.messageAuthor,
overflow: TextOverflow.ellipsis,
),
if (showTimeStamp)
Text(
@@ -710,18 +716,17 @@ class _MessageWidgetState extends State<MessageWidget>
final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
(showThreadReplyIndicator || showInChannel);
return Flex(
direction: Axis.horizontal,
clipBehavior: Clip.none,
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
if (showThreadTail)
Container(
margin: EdgeInsets.only(
bottom: widget.messageTheme.replies.fontSize / 2,
bottom: context.textScaleFactor *
(widget.messageTheme.replies.fontSize / 2),
),
child: CustomPaint(
size: const Size(16, 32),
size: Size(16, 32) * context.textScaleFactor,
painter: _ThreadReplyPainter(
context: context,
color: widget.messageTheme.messageBorderColor,
@@ -729,16 +734,20 @@ class _MessageWidgetState extends State<MessageWidget>
),
),
...children.map(
(child) => Transform(
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
alignment: Alignment.center,
child: Container(
height: 16,
child: Center(
(child) {
Widget mappedChild = Transform(
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
alignment: Alignment.center,
child: Container(
height: context.textScaleFactor * 14,
child: child,
),
),
),
);
if (child.key == usernameKey) {
mappedChild = Flexible(child: mappedChild);
}
return mappedChild;
},
),
].insertBetween(const SizedBox(width: 8.0)),
);
@@ -241,9 +241,7 @@ class _UserListViewState extends State<UserListView>
child: Text(message),
),
TextButton(
onPressed: () {
_userListController.loadData();
},
onPressed: () => _userListController.loadData(),
child: Text('Retry'),
),
],
@@ -298,9 +296,7 @@ class _UserListViewState extends State<UserListView>
);
return LazyLoadScrollView(
onEndOfPage: () async {
return _userListController.paginateData();
},
onEndOfPage: () => _userListController.paginateData(),
child: child,
);
}