Skip to content

Commit 5171021

Browse files
Correct-SyntaxCorrect-Syntax
committed
Implement wide layout for tablets and landscape mode on phones
1 parent 93ed0d8 commit 5171021

4 files changed

Lines changed: 111 additions & 73 deletions

File tree

‎lib/ui/common/ui_helpers.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,8 @@ import 'package:flutter/material.dart';
33
bool isPortraitOrientation(BuildContext context) {
44
return MediaQuery.of(context).orientation == Orientation.portrait;
55
}
6+
7+
bool shouldSwitchToWideLayout(BuildContext context) {
8+
// Over 400px width, switch to the wide layout.
9+
return MediaQuery.of(context).size.width > 400;
10+
}

‎lib/ui/views/reader/reader_view.dart‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -51,49 +51,51 @@ class ReaderView extends StackedView<ReaderViewModel> {
5151
),
5252
)
5353
: null,
54-
body: Stack(
55-
children: [
56-
Column(
57-
mainAxisSize: MainAxisSize.min,
58-
crossAxisAlignment: CrossAxisAlignment.stretch,
59-
children: [
60-
Expanded(
61-
child: WebViewWidget(
62-
controller: viewModel.webviewController,
54+
body: SafeArea(
55+
child: Stack(
56+
children: [
57+
Column(
58+
mainAxisSize: MainAxisSize.min,
59+
crossAxisAlignment: CrossAxisAlignment.stretch,
60+
children: [
61+
Expanded(
62+
child: WebViewWidget(
63+
controller: viewModel.webviewController,
64+
),
6365
),
64-
),
65-
if (viewModel.primaryAreaBible != 'KJV' || viewModel.secondaryAreaBible != 'KJV')
66-
Padding(
67-
padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0),
68-
child: Text(
69-
'This is still a very early look into the unfinished text of the Open English Translation of the Bible. Please double-check the text in advance before using in public.',
70-
style: TextStyle(
71-
fontSize: 8.0,
72-
color: context.theme.appColors.readerText,
66+
if (viewModel.primaryAreaBible != 'KJV' || viewModel.secondaryAreaBible != 'KJV')
67+
Padding(
68+
padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0),
69+
child: Text(
70+
'This is still a very early look into the unfinished text of the Open English Translation of the Bible. Please double-check the text in advance before using in public.',
71+
style: TextStyle(
72+
fontSize: 8.0,
73+
color: context.theme.appColors.readerText,
74+
),
7375
),
7476
),
77+
],
78+
),
79+
if (viewModel.isSecondaryReaderAreaPopupActive)
80+
Align(
81+
alignment: Alignment.topCenter,
82+
child: ReaderAreaPopup(
83+
readerArea: Area.secondary,
84+
onToggleSecondaryArea: viewModel.onToggleSecondaryArea,
85+
onToggleLinkedScrolling: viewModel.onToggleLinkedScrolling,
7586
),
76-
],
77-
),
78-
if (viewModel.isSecondaryReaderAreaPopupActive)
79-
Align(
80-
alignment: Alignment.topCenter,
81-
child: ReaderAreaPopup(
82-
readerArea: Area.secondary,
83-
onToggleSecondaryArea: viewModel.onToggleSecondaryArea,
84-
onToggleLinkedScrolling: viewModel.onToggleLinkedScrolling,
8587
),
86-
),
87-
if (viewModel.isPrimaryReaderAreaPopupActive)
88-
Align(
89-
alignment: Alignment.bottomCenter,
90-
child: ReaderAreaPopup(
91-
readerArea: Area.primary,
92-
onToggleSecondaryArea: viewModel.onToggleSecondaryArea,
93-
onToggleLinkedScrolling: viewModel.onToggleLinkedScrolling,
88+
if (viewModel.isPrimaryReaderAreaPopupActive)
89+
Align(
90+
alignment: Alignment.bottomCenter,
91+
child: ReaderAreaPopup(
92+
readerArea: Area.primary,
93+
onToggleSecondaryArea: viewModel.onToggleSecondaryArea,
94+
onToggleLinkedScrolling: viewModel.onToggleLinkedScrolling,
95+
),
9496
),
95-
),
96-
],
97+
],
98+
),
9799
),
98100
endDrawer: SideNavigationDrawer(
99101
closeNavigation: () => _scaffoldKey.currentState?.closeEndDrawer(),

‎lib/ui/views/reader/reader_viewmodel.dart‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,13 @@ class ReaderViewModel extends ReactiveViewModel {
216216
margin-right: 0.8rem;
217217
}
218218
219+
.container {
220+
display: flex;
221+
flex-direction: column;
222+
max-height: 100vh;
223+
margin: 0;
224+
}
225+
219226
.container.hidden #primaryReader {
220227
height: 100vh;
221228
}
@@ -229,6 +236,10 @@ class ReaderViewModel extends ReactiveViewModel {
229236
display: none;
230237
}
231238
239+
.scrollable {
240+
overflow: auto;
241+
}
242+
232243
hr {
233244
margin-top: 8px;
234245
margin-bottom: 8px;
@@ -315,14 +326,26 @@ class ReaderViewModel extends ReactiveViewModel {
315326
border-color: var(--contrast-theme-white);
316327
}
317328
318-
.container {
319-
display: flex;
320-
flex-direction: column;
321-
max-height: 100vh;
322-
}
323-
324-
.scrollable {
325-
overflow: auto;
329+
@media screen and (min-width: 400px) {
330+
.container {
331+
flex-direction: row;
332+
}
333+
#primaryReader {
334+
width: 50vw;
335+
height: 100vh;
336+
padding-top: 0.1rem;
337+
}
338+
#secondaryReader {
339+
width: 50vw;
340+
height: 100vh;
341+
padding-top: 0.1rem;
342+
}
343+
hr {
344+
height: 100vh;
345+
max-width: 0.5px;
346+
margin-top: 0px;
347+
margin-bottom: 0px;
348+
}
326349
}
327350
</style>
328351

‎lib/ui/views/reader/widgets/reader_area_popup/reader_area_popup.dart‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'package:stacked/stacked.dart';
55
import '../../../../../common/bibles.dart';
66
import '../../../../../common/enums.dart';
77
import '../../../../../common/themes.dart';
8+
import '../../../../common/ui_helpers.dart';
89
import 'reader_area_popup_model.dart';
910

1011
class ReaderAreaPopup extends StackedView<ReaderAreaPopupModel> {
@@ -25,6 +26,7 @@ class ReaderAreaPopup extends StackedView<ReaderAreaPopupModel> {
2526
ReaderAreaPopupModel viewModel,
2627
Widget? child,
2728
) {
29+
bool isWideLayout = shouldSwitchToWideLayout(context);
2830
return Container(
2931
height: 200.0,
3032
color: context.theme.appColors.popupBackground,
@@ -42,22 +44,25 @@ class ReaderAreaPopup extends StackedView<ReaderAreaPopupModel> {
4244
children: [
4345
Row(
4446
children: [
45-
Stack(
46-
children: [
47-
PhosphorIcon(
48-
PhosphorIcons.squareSplitVertical(PhosphorIconsStyle.regular),
49-
color: context.theme.appColors.primaryOnDark,
50-
size: 22.0,
51-
),
52-
Padding(
53-
padding: const EdgeInsets.only(top: 4.0, left: 4.0),
54-
child: Container(
55-
width: 14.0,
56-
height: 7.0,
47+
RotatedBox(
48+
quarterTurns: isWideLayout ? -1 : 0,
49+
child: Stack(
50+
children: [
51+
PhosphorIcon(
52+
PhosphorIcons.squareSplitVertical(PhosphorIconsStyle.regular),
5753
color: context.theme.appColors.primaryOnDark,
54+
size: 22.0,
5855
),
59-
),
60-
],
56+
Padding(
57+
padding: const EdgeInsets.only(top: 4.0, left: 4.0),
58+
child: Container(
59+
width: 14.0,
60+
height: 7.0,
61+
color: context.theme.appColors.primaryOnDark,
62+
),
63+
),
64+
],
65+
),
6166
),
6267
const SizedBox(width: 14.0),
6368
Column(
@@ -141,22 +146,25 @@ class ReaderAreaPopup extends StackedView<ReaderAreaPopupModel> {
141146
children: [
142147
Row(
143148
children: [
144-
Stack(
145-
children: [
146-
PhosphorIcon(
147-
PhosphorIcons.squareSplitVertical(PhosphorIconsStyle.regular),
148-
color: context.theme.appColors.primaryOnDark,
149-
size: 22.0,
150-
),
151-
Padding(
152-
padding: const EdgeInsets.only(top: 12.0, left: 4.0),
153-
child: Container(
154-
width: 14.0,
155-
height: 7.0,
149+
RotatedBox(
150+
quarterTurns: isWideLayout ? 3 : 0,
151+
child: Stack(
152+
children: [
153+
PhosphorIcon(
154+
PhosphorIcons.squareSplitVertical(PhosphorIconsStyle.regular),
156155
color: context.theme.appColors.primaryOnDark,
156+
size: 22.0,
157157
),
158-
),
159-
],
158+
Padding(
159+
padding: const EdgeInsets.only(top: 12.0, left: 4.0),
160+
child: Container(
161+
width: 14.0,
162+
height: 7.0,
163+
color: context.theme.appColors.primaryOnDark,
164+
),
165+
),
166+
],
167+
),
160168
),
161169
const SizedBox(width: 14.0),
162170
Column(

0 commit comments

Comments
 (0)