Skip to content

Commit 36793b1

Browse files
authored
Merge pull request #1192 from lichess-org/square_layout
Square layout
2 parents 707b584 + 32cc6c7 commit 36793b1

6 files changed

Lines changed: 350 additions & 266 deletions

File tree

lib/src/view/analysis/analysis_layout.dart

Lines changed: 87 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import 'package:lichess_mobile/src/constants.dart';
44
import 'package:lichess_mobile/src/styles/lichess_icons.dart';
55
import 'package:lichess_mobile/src/utils/l10n_context.dart';
66
import 'package:lichess_mobile/src/utils/screen.dart';
7+
import 'package:lichess_mobile/src/view/engine/engine_gauge.dart';
78
import 'package:lichess_mobile/src/widgets/adaptive_action_sheet.dart';
89
import 'package:lichess_mobile/src/widgets/buttons.dart';
910
import 'package:lichess_mobile/src/widgets/platform.dart';
@@ -145,52 +146,53 @@ class AnalysisLayout extends StatelessWidget {
145146
Expanded(
146147
child: SafeArea(
147148
bottom: false,
148-
child: LayoutBuilder(
149-
builder: (context, constraints) {
150-
final aspectRatio = constraints.biggest.aspectRatio;
151-
final defaultBoardSize = constraints.biggest.shortestSide;
149+
child: OrientationBuilder(
150+
builder: (context, orientation) {
152151
final isTablet = isTabletOrLarger(context);
153-
final remainingHeight =
154-
constraints.maxHeight - defaultBoardSize;
155-
final isSmallScreen =
156-
remainingHeight < kSmallRemainingHeightLeftBoardThreshold;
157-
final boardSize = isTablet || isSmallScreen
158-
? defaultBoardSize - kTabletBoardTableSidePadding * 2
159-
: defaultBoardSize;
160-
161152
const tabletBoardRadius =
162153
BorderRadius.all(Radius.circular(4.0));
163154

164-
// If the aspect ratio is greater than 1, we are in landscape mode.
165-
if (aspectRatio > 1) {
155+
if (orientation == Orientation.landscape) {
166156
return Row(
167157
mainAxisSize: MainAxisSize.max,
168158
children: [
169-
Padding(
170-
padding: const EdgeInsets.only(
171-
left: kTabletBoardTableSidePadding,
172-
top: kTabletBoardTableSidePadding,
173-
bottom: kTabletBoardTableSidePadding,
174-
),
175-
child: Row(
176-
children: [
177-
boardBuilder(
178-
context,
179-
boardSize,
180-
isTablet ? tabletBoardRadius : null,
181-
),
182-
if (engineGaugeBuilder != null) ...[
183-
const SizedBox(width: 4.0),
184-
engineGaugeBuilder!(
185-
context,
186-
Orientation.landscape,
187-
),
188-
],
189-
],
159+
Expanded(
160+
flex: kFlexGoldenRatio,
161+
child: Padding(
162+
padding: const EdgeInsets.only(
163+
left: kTabletBoardTableSidePadding,
164+
top: kTabletBoardTableSidePadding,
165+
bottom: kTabletBoardTableSidePadding,
166+
),
167+
child: LayoutBuilder(
168+
builder: (context, constraints) {
169+
final boardSize =
170+
constraints.biggest.shortestSide -
171+
(engineGaugeBuilder != null
172+
? kEvalGaugeSize + 4.0
173+
: 0);
174+
return Row(
175+
children: [
176+
boardBuilder(
177+
context,
178+
boardSize,
179+
isTablet ? tabletBoardRadius : null,
180+
),
181+
if (engineGaugeBuilder != null) ...[
182+
const SizedBox(width: 4.0),
183+
engineGaugeBuilder!(
184+
context,
185+
Orientation.landscape,
186+
),
187+
],
188+
],
189+
);
190+
},
191+
),
190192
),
191193
),
192194
Flexible(
193-
fit: FlexFit.loose,
195+
flex: kFlexGoldenRatioBase,
194196
child: Column(
195197
mainAxisAlignment: MainAxisAlignment.start,
196198
children: [
@@ -224,47 +226,57 @@ class AnalysisLayout extends StatelessWidget {
224226
),
225227
],
226228
);
227-
}
228-
// If the aspect ratio is less than 1, we are in portrait mode.
229-
else {
230-
return Column(
231-
mainAxisAlignment: MainAxisAlignment.center,
232-
mainAxisSize: MainAxisSize.max,
233-
crossAxisAlignment: CrossAxisAlignment.center,
234-
children: [
235-
if (engineGaugeBuilder != null)
236-
engineGaugeBuilder!(
237-
context,
238-
Orientation.portrait,
239-
),
240-
if (engineLines != null) engineLines!,
241-
if (isTablet)
242-
Padding(
243-
padding: const EdgeInsets.all(
244-
kTabletBoardTableSidePadding,
245-
),
246-
child: boardBuilder(
247-
context,
248-
boardSize,
249-
tabletBoardRadius,
229+
} else {
230+
return LayoutBuilder(
231+
builder: (context, constraints) {
232+
final defaultBoardSize = constraints.biggest.shortestSide;
233+
final remainingHeight =
234+
constraints.maxHeight - defaultBoardSize;
235+
final isSmallScreen = remainingHeight <
236+
kSmallRemainingHeightLeftBoardThreshold;
237+
final boardSize = isTablet || isSmallScreen
238+
? defaultBoardSize - kTabletBoardTableSidePadding * 2
239+
: defaultBoardSize;
240+
241+
return Column(
242+
mainAxisAlignment: MainAxisAlignment.center,
243+
mainAxisSize: MainAxisSize.max,
244+
crossAxisAlignment: CrossAxisAlignment.center,
245+
children: [
246+
if (engineGaugeBuilder != null)
247+
engineGaugeBuilder!(
248+
context,
249+
Orientation.portrait,
250+
),
251+
if (engineLines != null) engineLines!,
252+
Padding(
253+
padding: isTablet
254+
? const EdgeInsets.all(
255+
kTabletBoardTableSidePadding,
256+
)
257+
: EdgeInsets.zero,
258+
child: boardBuilder(
259+
context,
260+
boardSize,
261+
tabletBoardRadius,
262+
),
250263
),
251-
)
252-
else
253-
boardBuilder(context, boardSize, null),
254-
Expanded(
255-
child: Padding(
256-
padding: isTablet
257-
? const EdgeInsets.symmetric(
258-
horizontal: kTabletBoardTableSidePadding,
259-
)
260-
: EdgeInsets.zero,
261-
child: TabBarView(
262-
controller: tabController,
263-
children: children,
264+
Expanded(
265+
child: Padding(
266+
padding: isTablet
267+
? const EdgeInsets.symmetric(
268+
horizontal: kTabletBoardTableSidePadding,
269+
)
270+
: EdgeInsets.zero,
271+
child: TabBarView(
272+
controller: tabController,
273+
children: children,
274+
),
275+
),
264276
),
265-
),
266-
),
267-
],
277+
],
278+
);
279+
},
268280
);
269281
}
270282
},

lib/src/view/puzzle/puzzle_screen.dart

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,6 @@ class _LoadNextPuzzle extends ConsumerWidget {
145145
if (data == null) {
146146
return const Center(
147147
child: BoardTable(
148-
topTable: kEmptyWidget,
149-
bottomTable: kEmptyWidget,
150148
fen: kEmptyFen,
151149
orientation: Side.white,
152150
errorMessage: 'No more puzzles. Go online to get more.',
@@ -165,8 +163,6 @@ class _LoadNextPuzzle extends ConsumerWidget {
165163
);
166164
return Center(
167165
child: BoardTable(
168-
topTable: kEmptyWidget,
169-
bottomTable: kEmptyWidget,
170166
fen: kEmptyFen,
171167
orientation: Side.white,
172168
errorMessage: e.toString(),
@@ -203,15 +199,12 @@ class _LoadPuzzleFromId extends ConsumerWidget {
203199
Expanded(
204200
child: SafeArea(
205201
bottom: false,
206-
child: BoardTable(
207-
fen: kEmptyFen,
208-
orientation: Side.white,
209-
topTable: kEmptyWidget,
210-
bottomTable: kEmptyWidget,
202+
child: BoardTable.empty(
203+
showEngineGaugePlaceholder: true,
211204
),
212205
),
213206
),
214-
SizedBox(height: kBottomBarHeight),
207+
BottomBar.empty(),
215208
],
216209
),
217210
error: (e, s) {
@@ -226,8 +219,6 @@ class _LoadPuzzleFromId extends ConsumerWidget {
226219
child: BoardTable(
227220
fen: kEmptyFen,
228221
orientation: Side.white,
229-
topTable: kEmptyWidget,
230-
bottomTable: kEmptyWidget,
231222
errorMessage: e.toString(),
232223
),
233224
),

lib/src/view/puzzle/puzzle_tab_screen.dart

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ Widget _buildMainListItem(
6262
int index,
6363
Animation<double> animation,
6464
PuzzleAngle Function(int index) getAngle,
65-
VoidCallback? onGoingBackFromPuzzleScreen,
6665
) {
6766
switch (index) {
6867
case 0:
@@ -91,7 +90,7 @@ Widget _buildMainListItem(
9190
builder: (context) => const PuzzleScreen(
9291
angle: PuzzleTheme(PuzzleThemeKey.mix),
9392
),
94-
).then((_) => onGoingBackFromPuzzleScreen?.call());
93+
);
9594
},
9695
);
9796
default:
@@ -103,7 +102,7 @@ Widget _buildMainListItem(
103102
context,
104103
rootNavigator: true,
105104
builder: (context) => PuzzleScreen(angle: angle),
106-
).then((_) => onGoingBackFromPuzzleScreen?.call());
105+
);
107106
},
108107
);
109108
}
@@ -187,12 +186,6 @@ class _CupertinoTabBodyState extends ConsumerState<_CupertinoTabBody> {
187186
index,
188187
animation,
189188
(index) => _angles[index],
190-
isTablet
191-
? () {
192-
ref.read(currentBottomTabProvider.notifier).state =
193-
BottomTab.home;
194-
}
195-
: null,
196189
);
197190

198191
if (isTablet) {
@@ -352,12 +345,6 @@ class _MaterialTabBodyState extends ConsumerState<_MaterialTabBody> {
352345
index,
353346
animation,
354347
(index) => _angles[index],
355-
isTablet
356-
? () {
357-
ref.read(currentBottomTabProvider.notifier).state =
358-
BottomTab.home;
359-
}
360-
: null,
361348
);
362349

363350
return PopScope(

0 commit comments

Comments
 (0)