Skip to content

Commit

Permalink
[Presentation] Updated material's sheet to consider the new layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wolfteam
Wolfteam committed Jul 19, 2021
1 parent 95c8273 commit 6d56b5b
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 117 deletions.
71 changes: 30 additions & 41 deletions lib/presentation/materials/materials_page.dart
View file
Expand Up @@ -2,15 +2,16 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:genshindb/application/bloc.dart';
import 'package:genshindb/domain/enums/enums.dart';
import 'package:genshindb/generated/l10n.dart';
import 'package:genshindb/presentation/shared/loading.dart';
import 'package:genshindb/presentation/shared/sliver_nothing_found.dart';
import 'package:genshindb/presentation/shared/sliver_page_filter.dart';
import 'package:genshindb/presentation/shared/sliver_scaffold_with_fab.dart';
import 'package:genshindb/presentation/shared/styles.dart';
import 'package:genshindb/presentation/shared/utils/modal_bottom_sheet_utils.dart';
import 'package:genshindb/presentation/shared/utils/size_utils.dart';

import 'widgets/material_bottom_sheet.dart';
import 'widgets/material_card.dart';

class MaterialsPage extends StatelessWidget {
Expand Down Expand Up @@ -39,46 +40,34 @@ class MaterialsPage extends StatelessWidget {
final s = S.of(context);
final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
return BlocBuilder<MaterialsBloc, MaterialsState>(
builder: (context, state) {
return state.map(
loading: (_) => const Loading(),
loaded: (state) => SliverScaffoldWithFab(
appbar: AppBar(title: Text(isInSelectionMode ? s.selectAMaterial : s.materials)),
slivers: [
SliverPageFilter(
search: state.search,
title: s.materials,
onPressed: () => _showFiltersModal(context),
searchChanged: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.searchChanged(search: v)),
),
if (state.materials.isNotEmpty)
SliverPadding(
padding: Styles.edgeInsetHorizontal5,
sliver: SliverStaggeredGrid.countBuilder(
crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context, itemIsSmall: true),
itemBuilder: (ctx, index) => MaterialCard.item(item: state.materials[index], isInSelectionMode: isInSelectionMode),
itemCount: state.materials.length,
crossAxisSpacing: isPortrait ? 10 : 5,
mainAxisSpacing: 5,
staggeredTileBuilder: (int index) => const StaggeredTile.fit(1),
),
)
else
const SliverNothingFound(),
],
),
);
},
);
}

Future<void> _showFiltersModal(BuildContext context) async {
await showModalBottomSheet(
context: context,
shape: Styles.modalBottomSheetShape,
isDismissible: true,
isScrollControlled: true,
builder: (_) => MaterialBottomSheet(),
builder: (context, state) => state.map(
loading: (_) => const Loading(),
loaded: (state) => SliverScaffoldWithFab(
appbar: AppBar(title: Text(isInSelectionMode ? s.selectAMaterial : s.materials)),
slivers: [
SliverPageFilter(
search: state.search,
title: s.materials,
onPressed: () => ModalBottomSheetUtils.showAppModalBottomSheet(context, EndDrawerItemType.materials),
searchChanged: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.searchChanged(search: v)),
),
if (state.materials.isNotEmpty)
SliverPadding(
padding: Styles.edgeInsetHorizontal5,
sliver: SliverStaggeredGrid.countBuilder(
crossAxisCount: SizeUtils.getCrossAxisCountForGrids(context, itemIsSmall: true),
itemBuilder: (ctx, index) => MaterialCard.item(item: state.materials[index], isInSelectionMode: isInSelectionMode),
itemCount: state.materials.length,
crossAxisSpacing: isPortrait ? 10 : 5,
mainAxisSpacing: 5,
staggeredTileBuilder: (int index) => const StaggeredTile.fit(1),
),
)
else
const SliverNothingFound(),
],
),
),
);
}
}
220 changes: 144 additions & 76 deletions lib/presentation/materials/widgets/material_bottom_sheet.dart
View file
Expand Up @@ -4,99 +4,167 @@ import 'package:genshindb/application/bloc.dart';
import 'package:genshindb/domain/enums/enums.dart';
import 'package:genshindb/domain/enums/material_type.dart' as mat;
import 'package:genshindb/generated/l10n.dart';
import 'package:genshindb/presentation/shared/common_bottom_sheet.dart';
import 'package:genshindb/presentation/shared/bottom_sheets/common_bottom_sheet.dart';
import 'package:genshindb/presentation/shared/bottom_sheets/right_bottom_sheet.dart';
import 'package:genshindb/presentation/shared/extensions/i18n_extensions.dart';
import 'package:genshindb/presentation/shared/genshin_db_icons.dart';
import 'package:genshindb/presentation/shared/item_popupmenu_filter.dart';
import 'package:genshindb/presentation/shared/loading.dart';
import 'package:genshindb/presentation/shared/rarity_rating.dart';
import 'package:genshindb/presentation/shared/sort_direction_popupmenu_filter.dart';
import 'package:genshindb/presentation/shared/styles.dart';
import 'package:responsive_builder/responsive_builder.dart';

final _ignoredSubStats = [
mat.MaterialType.others,
mat.MaterialType.expWeapon,
mat.MaterialType.weaponPrimary,
];

class MaterialBottomSheet extends StatelessWidget {
final ignoredSubStats = [
mat.MaterialType.others,
mat.MaterialType.expWeapon,
mat.MaterialType.weaponPrimary,
];
const MaterialBottomSheet({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
final forEndDrawer = getDeviceType(MediaQuery.of(context).size) != DeviceScreenType.mobile;

return CommonBottomSheet(
titleIcon: GenshinDb.filter,
title: s.filters,
showOkButton: false,
showCancelButton: false,
child: BlocBuilder<MaterialsBloc, MaterialsState>(
builder: (context, state) => state.map(
loading: (_) => const Loading(),
loaded: (state) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(s.rarity),
RarityRating(
rarity: state.rarity,
onRated: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.rarityChanged(v)),
),
Text(s.others),
ButtonBar(
alignment: MainAxisAlignment.spaceEvenly,
children: [
ItemPopupMenuFilter<mat.MaterialType>(
tooltipText: s.secondaryState,
onSelected: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.typeChanged(v)),
selectedValue: state.tempType,
values: mat.MaterialType.values.where((el) => !ignoredSubStats.contains(el)).toList(),
itemText: (val) => s.translateMaterialType(val),
icon: const Icon(GenshinDb.sliders_h, size: 18),
),
ItemPopupMenuFilter<MaterialFilterType>(
tooltipText: s.sortBy,
onSelected: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.filterTypeChanged(v)),
selectedValue: state.tempFilterType,
values: MaterialFilterType.values,
itemText: (val) => s.translateMaterialFilterType(val),
),
SortDirectionPopupMenuFilter(
selectedSortDirection: state.tempSortDirectionType,
onSelected: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.sortDirectionTypeChanged(v)),
)
],
),
ButtonBar(
buttonPadding: Styles.edgeInsetHorizontal10,
children: <Widget>[
OutlinedButton(
onPressed: () {
context.read<MaterialsBloc>().add(const MaterialsEvent.cancelChanges());
Navigator.pop(context);
},
child: Text(s.cancel, style: TextStyle(color: theme.primaryColor)),
),
OutlinedButton(
onPressed: () {
context.read<MaterialsBloc>().add(const MaterialsEvent.resetFilters());
Navigator.pop(context);
},
child: Text(s.reset, style: TextStyle(color: theme.primaryColor)),
),
ElevatedButton(
onPressed: () {
context.read<MaterialsBloc>().add(const MaterialsEvent.applyFilterChanges());
Navigator.pop(context);
},
child: Text(s.ok),
)
],
),
],
if (!forEndDrawer) {
return CommonBottomSheet(
titleIcon: GenshinDb.filter,
title: s.filters,
showOkButton: false,
showCancelButton: false,
child: BlocBuilder<MaterialsBloc, MaterialsState>(
builder: (context, state) => state.map(
loading: (_) => const Loading(),
loaded: (state) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(s.rarity),
RarityRating(
rarity: state.rarity,
onRated: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.rarityChanged(v)),
),
Text(s.others),
_OtherFilters(
tempFilterType: state.tempFilterType,
tempSortDirectionType: state.tempSortDirectionType,
tempType: state.tempType,
forEndDrawer: forEndDrawer,
),
const _ButtonBar(),
],
),
),
),
);
}

return BlocBuilder<MaterialsBloc, MaterialsState>(
builder: (ctx, state) => state.map(
loading: (_) => const Loading(useScaffold: false),
loaded: (state) => RightBottomSheet(
bottom: const _ButtonBar(),
children: [
Container(margin: Styles.endDrawerFilterItemMargin, child: Text(s.rarity)),
RarityRating(
rarity: state.rarity,
onRated: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.rarityChanged(v)),
),
Container(margin: Styles.endDrawerFilterItemMargin, child: Text(s.others)),
_OtherFilters(
tempFilterType: state.tempFilterType,
tempSortDirectionType: state.tempSortDirectionType,
tempType: state.tempType,
forEndDrawer: forEndDrawer,
),
],
),
),
);
}
}

class _OtherFilters extends StatelessWidget {
final mat.MaterialType tempType;
final MaterialFilterType tempFilterType;
final SortDirectionType tempSortDirectionType;
final bool forEndDrawer;

const _OtherFilters({
Key? key,
required this.tempType,
required this.tempFilterType,
required this.tempSortDirectionType,
required this.forEndDrawer,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
return ButtonBar(
alignment: MainAxisAlignment.spaceEvenly,
children: [
ItemPopupMenuFilter<mat.MaterialType>(
tooltipText: s.secondaryState,
onSelected: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.typeChanged(v)),
selectedValue: tempType,
values: mat.MaterialType.values.where((el) => !_ignoredSubStats.contains(el)).toList(),
itemText: (val) => s.translateMaterialType(val),
icon: Icon(GenshinDb.sliders_h, size: Styles.getIconSizeForItemPopupMenuFilter(forEndDrawer, false)),
),
ItemPopupMenuFilter<MaterialFilterType>(
tooltipText: s.sortBy,
onSelected: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.filterTypeChanged(v)),
selectedValue: tempFilterType,
values: MaterialFilterType.values,
itemText: (val) => s.translateMaterialFilterType(val),
icon: Icon(Icons.filter_list, size: Styles.getIconSizeForItemPopupMenuFilter(forEndDrawer, true)),
),
SortDirectionPopupMenuFilter(
selectedSortDirection: tempSortDirectionType,
onSelected: (v) => context.read<MaterialsBloc>().add(MaterialsEvent.sortDirectionTypeChanged(v)),
icon: Icon(Icons.sort, size: Styles.getIconSizeForItemPopupMenuFilter(forEndDrawer, true)),
)
],
);
}
}

class _ButtonBar extends StatelessWidget {
const _ButtonBar({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
return ButtonBar(
buttonPadding: Styles.edgeInsetHorizontal10,
children: <Widget>[
OutlinedButton(
onPressed: () {
context.read<MaterialsBloc>().add(const MaterialsEvent.cancelChanges());
Navigator.pop(context);
},
child: Text(s.cancel, style: TextStyle(color: theme.primaryColor)),
),
OutlinedButton(
onPressed: () {
context.read<MaterialsBloc>().add(const MaterialsEvent.resetFilters());
Navigator.pop(context);
},
child: Text(s.reset, style: TextStyle(color: theme.primaryColor)),
),
ElevatedButton(
onPressed: () {
context.read<MaterialsBloc>().add(const MaterialsEvent.applyFilterChanges());
Navigator.pop(context);
},
child: Text(s.ok),
)
],
);
}
}

0 comments on commit 6d56b5b

Please sign in to comment.