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) if (widget.parentMessage != null && !widget.hideSendAsDm)
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), padding: const EdgeInsets.only(
right: 12.0,
left: 12.0,
bottom: 12.0,
),
child: _buildDmCheckbox(), child: _buildDmCheckbox(),
), ),
_buildFilePickerSection(), _buildFilePickerSection(),
@@ -354,68 +358,68 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildDmCheckbox() { Widget _buildDmCheckbox() {
return Container( return Row(
height: 36, crossAxisAlignment: CrossAxisAlignment.center,
padding: const EdgeInsets.only( children: [
left: 12, Container(
bottom: 12, height: 16,
top: 8, width: 16,
), foregroundDecoration: BoxDecoration(
child: Row( border: _sendAsDm
crossAxisAlignment: CrossAxisAlignment.center, ? null
children: [ : Border.all(
Container( color: StreamChatTheme.of(context)
height: 16, .colorTheme
width: 16, .black
foregroundDecoration: BoxDecoration( .withOpacity(.5),
border: _sendAsDm width: 2,
? null ),
: Border.all( borderRadius: BorderRadius.circular(3),
color: StreamChatTheme.of(context) ),
.colorTheme child: Center(
.black child: Material(
.withOpacity(.5),
width: 2,
),
borderRadius: BorderRadius.circular(3), borderRadius: BorderRadius.circular(3),
), color: _sendAsDm
child: Center( ? StreamChatTheme.of(context).colorTheme.accentBlue
child: Material( : StreamChatTheme.of(context).colorTheme.white,
borderRadius: BorderRadius.circular(3), child: InkWell(
color: _sendAsDm onTap: () {
? StreamChatTheme.of(context).colorTheme.accentBlue setState(() {
: StreamChatTheme.of(context).colorTheme.white, _sendAsDm = !_sendAsDm;
child: InkWell( });
onTap: () { },
setState(() { child: AnimatedCrossFade(
_sendAsDm = !_sendAsDm; duration: Duration(milliseconds: 300),
}); reverseDuration: Duration(milliseconds: 300),
}, crossFadeState: _sendAsDm
child: AnimatedCrossFade( ? CrossFadeState.showFirst
duration: Duration(milliseconds: 300), : CrossFadeState.showSecond,
reverseDuration: Duration(milliseconds: 300), firstChild: StreamSvgIcon.check(
crossFadeState: _sendAsDm size: 16.0,
? CrossFadeState.showFirst color: StreamChatTheme.of(context).colorTheme.white,
: CrossFadeState.showSecond, ),
firstChild: StreamSvgIcon.check( secondChild: SizedBox(
size: 16.0, height: 16,
color: StreamChatTheme.of(context).colorTheme.white, width: 16,
),
secondChild: SizedBox(
height: 16,
width: 16,
),
), ),
), ),
), ),
), ),
), ),
Padding( ),
padding: const EdgeInsets.symmetric(horizontal: 16.0), Padding(
child: Text('Also send as direct message'), 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( child = LazyLoadScrollView(
onEndOfPage: () async { onEndOfPage: () => _messageSearchListController.paginateData(),
return _messageSearchListController.paginateData();
},
child: child, 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) if (showBottomRow)
@@ -682,6 +683,8 @@ class _MessageWidgetState extends State<MessageWidget>
} }
}; };
const usernameKey = Key('username');
children.addAll([ children.addAll([
if (showInChannel || showThreadReplyIndicator) ...[ if (showInChannel || showThreadReplyIndicator) ...[
if (showThreadParticipants) if (showThreadParticipants)
@@ -697,7 +700,10 @@ class _MessageWidgetState extends State<MessageWidget>
if (showUsername) if (showUsername)
Text( Text(
widget.message.user.name, widget.message.user.name,
maxLines: 1,
key: usernameKey,
style: widget.messageTheme.messageAuthor, style: widget.messageTheme.messageAuthor,
overflow: TextOverflow.ellipsis,
), ),
if (showTimeStamp) if (showTimeStamp)
Text( Text(
@@ -710,18 +716,17 @@ class _MessageWidgetState extends State<MessageWidget>
final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) && final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
(showThreadReplyIndicator || showInChannel); (showThreadReplyIndicator || showInChannel);
return Flex( return Row(
direction: Axis.horizontal,
clipBehavior: Clip.none,
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
children: [ children: [
if (showThreadTail) if (showThreadTail)
Container( Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(
bottom: widget.messageTheme.replies.fontSize / 2, bottom: context.textScaleFactor *
(widget.messageTheme.replies.fontSize / 2),
), ),
child: CustomPaint( child: CustomPaint(
size: const Size(16, 32), size: Size(16, 32) * context.textScaleFactor,
painter: _ThreadReplyPainter( painter: _ThreadReplyPainter(
context: context, context: context,
color: widget.messageTheme.messageBorderColor, color: widget.messageTheme.messageBorderColor,
@@ -729,16 +734,20 @@ class _MessageWidgetState extends State<MessageWidget>
), ),
), ),
...children.map( ...children.map(
(child) => Transform( (child) {
transform: Matrix4.rotationY(widget.reverse ? pi : 0), Widget mappedChild = Transform(
alignment: Alignment.center, transform: Matrix4.rotationY(widget.reverse ? pi : 0),
child: Container( alignment: Alignment.center,
height: 16, child: Container(
child: Center( height: context.textScaleFactor * 14,
child: child, child: child,
), ),
), );
), if (child.key == usernameKey) {
mappedChild = Flexible(child: mappedChild);
}
return mappedChild;
},
), ),
].insertBetween(const SizedBox(width: 8.0)), ].insertBetween(const SizedBox(width: 8.0)),
); );
@@ -241,9 +241,7 @@ class _UserListViewState extends State<UserListView>
child: Text(message), child: Text(message),
), ),
TextButton( TextButton(
onPressed: () { onPressed: () => _userListController.loadData(),
_userListController.loadData();
},
child: Text('Retry'), child: Text('Retry'),
), ),
], ],
@@ -298,9 +296,7 @@ class _UserListViewState extends State<UserListView>
); );
return LazyLoadScrollView( return LazyLoadScrollView(
onEndOfPage: () async { onEndOfPage: () => _userListController.paginateData(),
return _userListController.paginateData();
},
child: child, child: child,
); );
} }