Skip to content

Commit

Permalink
[Presentation] Added a portrait / landscape layout to the calculator …
Browse files Browse the repository at this point in the history 
…ascension materials page
  • Loading branch information
@Wolfteam
Wolfteam committed Jul 13, 2021
1 parent bf112dd commit 6a50079
Showing 1 changed file with 176 additions and 47 deletions.
223 changes: 176 additions & 47 deletions lib/presentation/calculator_asc_materials/calculator_ascension_materials_page.dart
View file
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:genshindb/application/bloc.dart';
import 'package:genshindb/domain/extensions/iterable_extensions.dart';
import 'package:genshindb/domain/extensions/string_extensions.dart';
import 'package:genshindb/domain/models/models.dart';
import 'package:genshindb/generated/l10n.dart';
Expand All @@ -11,9 +12,10 @@ import 'package:genshindb/presentation/shared/genshin_db_icons.dart';
import 'package:genshindb/presentation/shared/hawk_fab_menu.dart';
import 'package:genshindb/presentation/shared/item_description_detail.dart';
import 'package:genshindb/presentation/shared/nothing_found_column.dart';
import 'package:genshindb/presentation/shared/sliver_row_grid.dart';
import 'package:genshindb/presentation/shared/styles.dart';
import 'package:genshindb/presentation/weapons/weapons_page.dart';
import 'package:responsive_builder/responsive_builder.dart';
import 'package:responsive_grid/responsive_grid.dart';

import 'widgets/add_edit_item_bottom_sheet.dart';
import 'widgets/ascension_materials_summary.dart';
Expand All @@ -33,6 +35,7 @@ class CalculatorAscensionMaterialsPage extends StatelessWidget {
final theme = Theme.of(context);
final s = S.of(context);
final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
final size = getDeviceType(MediaQuery.of(context).size);

return Scaffold(
appBar: AppBar(
Expand Down Expand Up @@ -84,52 +87,18 @@ class CalculatorAscensionMaterialsPage extends StatelessWidget {
if (state.items.isEmpty) {
return NothingFoundColumn(msg: s.startByAddingMsg, icon: Icons.add_circle_outline);
}
return CustomScrollView(
slivers: [
SliverPadding(
padding: const EdgeInsets.only(top: 10),
sliver: SliverToBoxAdapter(
child: ItemDescriptionDetail(
title: '${s.characters} / ${s.weapons}',
textColor: theme.accentColor,
),
),
),
SliverPadding(
padding: Styles.edgeInsetHorizontal16,
sliver: SliverRowGrid(
crossAxisCount: isPortrait ? 2 : 3,
crossAxisSpacing: isPortrait ? 10 : 5,
itemsCount: state.items.length,
builder: (index) {
final e = state.items[index];
return ItemCard(
sessionKey: sessionKey,
isActive: e.isActive,
index: index,
itemKey: e.key,
image: e.image,
name: e.name,
rarity: e.rarity,
isWeapon: !e.isCharacter,
materials: e.materials,
);
},
),
),
if (state.summary.isNotEmpty)
SliverToBoxAdapter(
child: ItemDescriptionDetail(
title: s.summary,
textColor: theme.accentColor,
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: _buildSummary(s, state.summary),
),
),
),
],
);
final summary = _buildSummary(s, state.summary);
switch (size) {
case DeviceScreenType.mobile:
case DeviceScreenType.tablet:
case DeviceScreenType.desktop:
if (isPortrait) {
return _PortraitLayout(sessionKey: sessionKey, items: state.items, summary: summary);
}
return _LandscapeLayout(sessionKey: sessionKey, items: state.items, summary: summary);
default:
return _PortraitLayout(sessionKey: sessionKey, items: state.items, summary: summary);
}
},
);
},
Expand Down Expand Up @@ -208,3 +177,163 @@ class CalculatorAscensionMaterialsPage extends StatelessWidget {
);
}
}

class _PortraitLayout extends StatelessWidget {
final int sessionKey;
final List<ItemAscensionMaterials> items;
final List<Widget> summary;

const _PortraitLayout({
Key? key,
required this.sessionKey,
required this.items,
required this.summary,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
return CustomScrollView(
slivers: [
SliverPadding(
padding: const EdgeInsets.only(top: 10),
sliver: SliverToBoxAdapter(
child: ItemDescriptionDetail(
title: '${s.characters} / ${s.weapons}',
textColor: theme.accentColor,
),
),
),
SliverPadding(
padding: Styles.edgeInsetHorizontal16,
sliver: SliverToBoxAdapter(
child: ResponsiveGridRow(
children: items
.mapIndex(
(e, index) => ResponsiveGridCol(
sm: 4,
md: 4,
lg: 3,
xl: 2,
child: ItemCard(
sessionKey: sessionKey,
isActive: e.isActive,
index: index,
itemKey: e.key,
image: e.image,
name: e.name,
rarity: e.rarity,
isWeapon: !e.isCharacter,
materials: e.materials,
),
),
)
.toList(),
),
),
),
if (summary.isNotEmpty)
SliverToBoxAdapter(
child: ItemDescriptionDetail(
title: s.summary,
textColor: theme.accentColor,
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: summary,
),
),
),
],
);
}
}

class _LandscapeLayout extends StatelessWidget {
final int sessionKey;
final List<ItemAscensionMaterials> items;
final List<Widget> summary;

const _LandscapeLayout({
Key? key,
required this.sessionKey,
required this.items,
required this.summary,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
return Row(
children: [
Flexible(
flex: 70,
fit: FlexFit.tight,
child: CustomScrollView(
slivers: [
SliverPadding(
padding: const EdgeInsets.only(top: 10),
sliver: SliverToBoxAdapter(
child: ItemDescriptionDetail(
title: '${s.characters} / ${s.weapons}',
textColor: theme.accentColor,
),
),
),
SliverPadding(
padding: Styles.edgeInsetHorizontal16,
sliver: SliverToBoxAdapter(
child: ResponsiveGridRow(
children: items
.mapIndex(
(e, index) => ResponsiveGridCol(
sm: 6,
md: 4,
lg: 3,
xl: 3,
child: ItemCard(
sessionKey: sessionKey,
isActive: e.isActive,
index: index,
itemKey: e.key,
image: e.image,
name: e.name,
rarity: e.rarity,
isWeapon: !e.isCharacter,
materials: e.materials,
),
),
)
.toList(),
),
),
),
],
),
),
Flexible(
flex: 30,
fit: FlexFit.tight,
child: CustomScrollView(
slivers: [
SliverPadding(
padding: const EdgeInsets.only(top: 10),
sliver: SliverToBoxAdapter(
child: ItemDescriptionDetail(
title: s.summary,
textColor: theme.accentColor,
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: summary,
),
),
),
),
],
),
),
],
);
}
}

0 comments on commit 6a50079

Please sign in to comment.