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 6d56b5b commit f7b785c
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 107 deletions.
72 changes: 30 additions & 42 deletions lib/presentation/monsters/monsters_page.dart
View file
Expand Up @@ -2,14 +2,14 @@ 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 'widgets/monster_bottom_sheet.dart';
import 'widgets/monster_card.dart';

class MonstersPage extends StatelessWidget {
Expand Down Expand Up @@ -38,46 +38,34 @@ class MonstersPage extends StatelessWidget {
final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
final s = S.of(context);
return BlocBuilder<MonstersBloc, MonstersState>(
builder: (context, state) {
return state.map(
loading: (_) => const Loading(),
loaded: (state) => SliverScaffoldWithFab(
appbar: AppBar(title: Text(isInSelectionMode ? s.selectAMonster : s.monsters)),
slivers: [
SliverPageFilter(
search: state.search,
title: s.monsters,
onPressed: () => _showFiltersModal(context),
searchChanged: (v) => context.read<MonstersBloc>().add(MonstersEvent.searchChanged(search: v)),
),
if (state.monsters.isNotEmpty)
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 5),
sliver: SliverStaggeredGrid.countBuilder(
crossAxisCount: isPortrait ? 3 : 5,
itemBuilder: (ctx, index) => MonsterCard.item(item: state.monsters[index], isInSelectionMode: isInSelectionMode),
itemCount: state.monsters.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: (_) => MonsterBottomSheet(),
builder: (context, state) => state.map(
loading: (_) => const Loading(),
loaded: (state) => SliverScaffoldWithFab(
appbar: AppBar(title: Text(isInSelectionMode ? s.selectAMonster : s.monsters)),
slivers: [
SliverPageFilter(
search: state.search,
title: s.monsters,
onPressed: () => ModalBottomSheetUtils.showAppModalBottomSheet(context, EndDrawerItemType.monsters),
searchChanged: (v) => context.read<MonstersBloc>().add(MonstersEvent.searchChanged(search: v)),
),
if (state.monsters.isNotEmpty)
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 5),
sliver: SliverStaggeredGrid.countBuilder(
crossAxisCount: isPortrait ? 3 : 5,
itemBuilder: (ctx, index) => MonsterCard.item(item: state.monsters[index], isInSelectionMode: isInSelectionMode),
itemCount: state.monsters.length,
crossAxisSpacing: isPortrait ? 10 : 5,
mainAxisSpacing: 5,
staggeredTileBuilder: (int index) => const StaggeredTile.fit(1),
),
)
else
const SliverNothingFound(),
],
),
),
);
}
}
194 changes: 129 additions & 65 deletions lib/presentation/monsters/widgets/monster_bottom_sheet.dart
View file
Expand Up @@ -3,86 +3,150 @@ import 'package:flutter_bloc/flutter_bloc.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/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/sort_direction_popupmenu_filter.dart';
import 'package:genshindb/presentation/shared/styles.dart';
import 'package:responsive_builder/responsive_builder.dart';

class MonsterBottomSheet extends StatelessWidget {
const MonsterBottomSheet({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,
showCancelButton: false,
showOkButton: false,
child: BlocBuilder<MonstersBloc, MonstersState>(
builder: (context, state) => state.map(
loading: (_) => const Loading(),
loaded: (state) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(s.others),
ButtonBar(
alignment: MainAxisAlignment.spaceEvenly,
children: [
ItemPopupMenuFilter<MonsterType>(
tooltipText: s.type,
onSelected: (v) => context.read<MonstersBloc>().add(MonstersEvent.typeChanged(v)),
selectedValue: state.tempType,
values: MonsterType.values,
itemText: (val) => s.translateMonsterType(val),
),
ItemPopupMenuFilter<MonsterFilterType>(
tooltipText: s.sortBy,
onSelected: (v) => context.read<MonstersBloc>().add(MonstersEvent.filterTypeChanged(v)),
selectedValue: state.tempFilterType,
values: MonsterFilterType.values,
itemText: (val) => s.translateMonsterFilterType(val),
),
SortDirectionPopupMenuFilter(
selectedSortDirection: state.tempSortDirectionType,
onSelected: (v) => context.read<MonstersBloc>().add(MonstersEvent.sortDirectionTypeChanged(v)),
)
],
),
ButtonBar(
buttonPadding: Styles.edgeInsetHorizontal10,
children: <Widget>[
OutlinedButton(
onPressed: () {
context.read<MonstersBloc>().add(const MonstersEvent.cancelChanges());
Navigator.pop(context);
},
child: Text(s.cancel, style: TextStyle(color: theme.primaryColor)),
),
OutlinedButton(
onPressed: () {
context.read<MonstersBloc>().add(const MonstersEvent.resetFilters());
Navigator.pop(context);
},
child: Text(s.reset, style: TextStyle(color: theme.primaryColor)),
),
ElevatedButton(
onPressed: () {
context.read<MonstersBloc>().add(const MonstersEvent.applyFilterChanges());
Navigator.pop(context);
},
child: Text(s.ok),
)
],
),
],
if (!forEndDrawer) {
return CommonBottomSheet(
titleIcon: GenshinDb.filter,
title: s.filters,
showCancelButton: false,
showOkButton: false,
child: BlocBuilder<MonstersBloc, MonstersState>(
builder: (context, state) => state.map(
loading: (_) => const Loading(useScaffold: false),
loaded: (state) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(s.others),
_OtherFilters(
tempType: state.tempType,
tempSortDirectionType: state.tempSortDirectionType,
tempFilterType: state.tempFilterType,
forEndDrawer: forEndDrawer,
),
const _ButtonBar(),
],
),
),
),
);
}

return BlocBuilder<MonstersBloc, MonstersState>(
builder: (ctx, state) => state.map(
loading: (_) => const Loading(useScaffold: false),
loaded: (state) => RightBottomSheet(
bottom: const _ButtonBar(),
children: [
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 MonsterType tempType;
final MonsterFilterType 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<MonsterType>(
tooltipText: s.type,
onSelected: (v) => context.read<MonstersBloc>().add(MonstersEvent.typeChanged(v)),
selectedValue: tempType,
values: MonsterType.values,
itemText: (val) => s.translateMonsterType(val),
icon: Icon(Icons.filter_list_alt, size: Styles.getIconSizeForItemPopupMenuFilter(forEndDrawer, true)),
),
ItemPopupMenuFilter<MonsterFilterType>(
tooltipText: s.sortBy,
onSelected: (v) => context.read<MonstersBloc>().add(MonstersEvent.filterTypeChanged(v)),
selectedValue: tempFilterType,
values: MonsterFilterType.values,
itemText: (val) => s.translateMonsterFilterType(val),
icon: Icon(Icons.filter_list, size: Styles.getIconSizeForItemPopupMenuFilter(forEndDrawer, true)),
),
SortDirectionPopupMenuFilter(
selectedSortDirection: tempSortDirectionType,
onSelected: (v) => context.read<MonstersBloc>().add(MonstersEvent.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<MonstersBloc>().add(const MonstersEvent.cancelChanges());
Navigator.pop(context);
},
child: Text(s.cancel, style: TextStyle(color: theme.primaryColor)),
),
OutlinedButton(
onPressed: () {
context.read<MonstersBloc>().add(const MonstersEvent.resetFilters());
Navigator.pop(context);
},
child: Text(s.reset, style: TextStyle(color: theme.primaryColor)),
),
ElevatedButton(
onPressed: () {
context.read<MonstersBloc>().add(const MonstersEvent.applyFilterChanges());
Navigator.pop(context);
},
child: Text(s.ok),
)
],
);
}
}

0 comments on commit f7b785c

Please sign in to comment.