From ef02ee4e8365639a31db04ce52b1656b1103a41e Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Sun, 8 Jan 2023 11:25:04 -0800 Subject: [PATCH 1/3] msglist: Have white background extend to left and right edge of screen By adding a Center widget. Leaving the 8px padding and the `maxWidth: 760` constraint on the list-view child. --- lib/widgets/message_list.dart | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart index e52e1a0600..f57530d477 100644 --- a/lib/widgets/message_list.dart +++ b/lib/widgets/message_list.dart @@ -65,11 +65,12 @@ class _MessageListState extends State { style: const TextStyle(color: Color.fromRGBO(0, 0, 0, 1)), child: ColoredBox( color: Colors.white, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 8), - child: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 760), - child: _buildListView(context))))); + child: Center( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 8), + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 760), + child: _buildListView(context)))))); } Widget _buildListView(context) { From 20ba62a3dc3254d89124c44bafd92b831a8797f1 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Sun, 8 Jan 2023 11:31:09 -0800 Subject: [PATCH 2/3] msglist: Pad left and right insets On some small devices in landscape mode, the `maxWidth: 760` constraint doesn't (and isn't meant to) prevent the content from extending into the left and right insets. So, use a SafeArea widget for that. In contrast to the SafeAreaView component from react-native-safe-area-context in the RN app, this SafeArea widget: - knows when an ancestor has declared the given inset(s) consumed (by reading the ambient MediaQueryData.padding), and - declares the given inset(s) consumed (by changing its descendants' ambient MediaQueryData.padding). It's left unaware of non-ancestors that consume insets. It turns out that some insets are consumed by non-ancestors in this case; study how that's done and add a few lines to adapt. See the doc: https://api.flutter.dev/flutter/widgets/SafeArea-class.html The `minimum: 8` should preserve the existing 8px padding in all the places we want it, including: - phones with no notches/etc. - notched phones in portrait mode where the norm is to have no notches/etc. on the left or right. --- lib/widgets/message_list.dart | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart index f57530d477..d4ec6e5e84 100644 --- a/lib/widgets/message_list.dart +++ b/lib/widgets/message_list.dart @@ -65,9 +65,23 @@ class _MessageListState extends State { style: const TextStyle(color: Color.fromRGBO(0, 0, 0, 1)), child: ColoredBox( color: Colors.white, - child: Center( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 8), + + // Pad the left and right insets, for small devices in landscape. + child: SafeArea( + // A non-ancestor (the compose box) pads the bottom inset; + // prevent extra padding here. + bottom: false, + + // A non-ancestor (the app bar) pads the top inset. But no + // need to prevent extra padding with `top: false`, because + // Scaffold, which knows about the app bar, sets `body`'s + // ambient `MediaQueryData.padding` to have `top: 0`: + // https://github.com/flutter/flutter/blob/3.7.0-1.2.pre/packages/flutter/lib/src/material/scaffold.dart#L2778 + + // Keep some padding when there are no horizontal insets, + // which is usual in portrait mode. + minimum: const EdgeInsets.symmetric(horizontal: 8), + child: Center( child: ConstrainedBox( constraints: const BoxConstraints(maxWidth: 760), child: _buildListView(context)))))); From 88f3b73a6f04f8facf6d72757758cf1d3dc078b7 Mon Sep 17 00:00:00 2001 From: Greg Price Date: Fri, 3 Feb 2023 16:26:09 -0800 Subject: [PATCH 3/3] msglist [nfc]: Add a TODO to simplify SafeArea usage --- lib/widgets/message_list.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart index d4ec6e5e84..21d0238e6c 100644 --- a/lib/widgets/message_list.dart +++ b/lib/widgets/message_list.dart @@ -70,6 +70,8 @@ class _MessageListState extends State { child: SafeArea( // A non-ancestor (the compose box) pads the bottom inset; // prevent extra padding here. + // TODO have MessageListPage adjust the MediaQuery so we don't + // have to worry about this here bottom: false, // A non-ancestor (the app bar) pads the top inset. But no