Skip to content

Commit

Permalink
Added initial material detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
Wolfteam committed Mar 16, 2021
1 parent 6ff6783 commit 8726293
Show file tree
Hide file tree
Showing 13 changed files with 433 additions and 9 deletions.
5 changes: 2 additions & 3 deletions lib/presentation/home/home_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import 'widgets/sliver_characters_birthday_card.dart';
import 'widgets/sliver_elements_card.dart';
import 'widgets/sliver_game_codes_card.dart';
import 'widgets/sliver_main_title.dart';
import 'widgets/sliver_materials_card.dart';
import 'widgets/sliver_settings_card.dart';
import 'widgets/sliver_tierlist_card.dart';
import 'widgets/sliver_today_char_ascension_materials.dart';
Expand Down Expand Up @@ -40,8 +39,8 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin<
SliverTodayWeaponMaterials(),
SliverMainTitle(title: s.elements),
SliverElementsCard(),
SliverMainTitle(title: s.materials),
SliverMaterialsCard(),
// SliverMainTitle(title: s.materials),
// SliverMaterialsCard(),
SliverMainTitle(title: s.calculators),
SliverCalculatorsCard(),
SliverMainTitle(title: s.wishSimulator),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:genshindb/generated/l10n.dart';
import 'package:genshindb/presentation/shared/circle_character.dart';
import 'package:genshindb/presentation/shared/extensions/i18n_extensions.dart';
import 'package:genshindb/presentation/shared/material_item_button.dart';
import 'package:genshindb/presentation/shared/styles.dart';

class CharCardAscensionMaterial extends StatelessWidget {
Expand Down Expand Up @@ -50,7 +51,7 @@ class CharCardAscensionMaterial extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(image, width: 120, height: 100),
MaterialItemButton(image: image, size: 100),
Tooltip(
message: name,
child: Text(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:genshindb/generated/l10n.dart';
import 'package:genshindb/presentation/shared/circle_weapon.dart';
import 'package:genshindb/presentation/shared/extensions/i18n_extensions.dart';
import 'package:genshindb/presentation/shared/material_item_button.dart';
import 'package:genshindb/presentation/shared/styles.dart';

class WeaponCardAscensionMaterial extends StatelessWidget {
Expand Down Expand Up @@ -32,7 +33,7 @@ class WeaponCardAscensionMaterial extends StatelessWidget {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(image, width: 120, height: 100),
MaterialItemButton(image: image, size: 100),
Tooltip(
message: name,
child: Text(
Expand Down
43 changes: 43 additions & 0 deletions lib/presentation/material/material_page.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:genshindb/application/bloc.dart' as bloc;
import 'package:genshindb/presentation/shared/loading.dart';
import 'package:genshindb/presentation/shared/scaffold_with_fab.dart';

import 'widgets/material_detail_bottom.dart';
import 'widgets/material_detail_top.dart';

//TODO: BOSSES
class MaterialPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScaffoldWithFab(
child: BlocBuilder<bloc.MaterialBloc, bloc.MaterialState>(
builder: (context, state) {
return state.map(
loading: (_) => const Loading(useScaffold: false),
loaded: (s) => Stack(
children: [
MaterialDetailTop(
name: s.name,
image: s.fullImage,
type: s.type,
rarity: s.rarity,
days: s.days,
),
MaterialDetailBottom(
description: s.description,
rarity: s.rarity,
charImgs: s.charImages,
weaponImgs: s.weaponImages,
obtainedFrom: s.obtainedFrom,
relatedTo: s.relatedMaterials,
),
],
),
);
},
),
);
}
}
116 changes: 116 additions & 0 deletions lib/presentation/material/widgets/material_detail_bottom.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import 'package:flutter/material.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';
import 'package:genshindb/presentation/shared/circle_character.dart';
import 'package:genshindb/presentation/shared/circle_weapon.dart';
import 'package:genshindb/presentation/shared/extensions/rarity_extensions.dart';
import 'package:genshindb/presentation/shared/item_description_detail.dart';
import 'package:genshindb/presentation/shared/material_item_button.dart';
import 'package:genshindb/presentation/shared/styles.dart';
import 'package:genshindb/presentation/shared/wrapped_ascension_material.dart';

class MaterialDetailBottom extends StatelessWidget {
final String description;
final int rarity;
final List<String> charImgs;
final List<String> weaponImgs;
final List<ObtainedFromFileModel> obtainedFrom;
final List<String> relatedTo;

const MaterialDetailBottom({
Key key,
@required this.description,
@required this.rarity,
@required this.charImgs,
@required this.weaponImgs,
@required this.obtainedFrom,
@required this.relatedTo,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final rarityColor = rarity.getRarityColors().last;
return Card(
margin: const EdgeInsets.only(top: 260, right: 10, left: 10),
shape: Styles.cardItemDetailShape,
child: Padding(
padding: Styles.edgeInsetAll10,
child: Column(
children: [
if (description.isNotNullEmptyOrWhitespace) _buildDescription(description, rarity, context),
if (obtainedFrom.isNotEmpty)
ItemDescriptionDetail(
title: s.obtainedFrom,
body: Wrap(
alignment: WrapAlignment.center,
children: obtainedFrom.mapIndex((e, index) => _buildObtainedFromItem(e, showDivider: index != obtainedFrom.length - 1)).toList(),
),
textColor: rarityColor,
),
if (charImgs.isNotEmpty)
ItemDescriptionDetail(
title: s.characters,
body: Wrap(
alignment: WrapAlignment.center,
children: charImgs.map((e) => CircleCharacter(image: e)).toList(),
),
textColor: rarityColor,
),
if (weaponImgs.isNotEmpty)
ItemDescriptionDetail(
title: s.weapons,
body: Wrap(
alignment: WrapAlignment.center,
children: weaponImgs.map((e) => CircleWeapon(image: e)).toList(),
),
textColor: rarityColor,
),
if (relatedTo.isNotEmpty)
ItemDescriptionDetail(
title: s.related,
body: Wrap(
alignment: WrapAlignment.center,
children: relatedTo.map((e) => MaterialItemButton(image: e, size: 55)).toList(),
),
textColor: rarityColor,
),
],
),
),
);
}

Widget _buildObtainedFromItem(ObtainedFromFileModel from, {bool showDivider = true}) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Wrap(
alignment: WrapAlignment.center,
children: from.items.map((e) => WrappedAscensionMaterial(image: e.fullImagePath, quantity: e.quantity, size: 55)).toList(),
),
if (showDivider) const FractionallySizedBox(widthFactor: 0.8, child: Divider()),
],
);
}

Widget _buildDescription(String description, int rarity, BuildContext context) {
final s = S.of(context);
final body = Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: const EdgeInsets.only(bottom: 10),
child: ItemDescriptionDetail(
title: s.description,
body: Container(margin: const EdgeInsets.symmetric(horizontal: 5), child: Text(description)),
textColor: rarity.getRarityColors().last,
),
),
],
);
return body;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import 'package:flutter/material.dart';
import 'package:genshindb/domain/enums/enums.dart' as enums;
import 'package:genshindb/generated/l10n.dart';
import 'package:genshindb/presentation/shared/extensions/i18n_extensions.dart';
import 'package:genshindb/presentation/shared/extensions/rarity_extensions.dart';
import 'package:genshindb/presentation/shared/item_description.dart';
import 'package:genshindb/presentation/shared/rarity.dart';
import 'package:genshindb/presentation/shared/styles.dart';

class MaterialDetailGeneralCard extends StatelessWidget {
final String name;
final int rarity;
final enums.MaterialType type;
final List<int> days;

const MaterialDetailGeneralCard({
Key key,
@required this.name,
@required this.rarity,
@required this.type,
@required this.days,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
final details = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: theme.textTheme.headline5.copyWith(fontWeight: FontWeight.bold, color: Colors.white),
),
Rarity(stars: rarity, starSize: 25, alignment: MainAxisAlignment.start),
ItemDescription(
title: s.type,
widget: Text(
s.translateMaterialType(type),
style: const TextStyle(color: Colors.white),
),
useColumn: false,
),
if (days.isNotEmpty)
ItemDescription(
title: s.day,
widget: Text(
s.translateDays(days),
style: const TextStyle(color: Colors.white),
),
useColumn: false,
),
],
);

return Card(
color: rarity.getRarityColors().first.withOpacity(0.1),
elevation: Styles.cardTenElevation,
margin: Styles.edgeInsetAll10,
shape: Styles.cardShape,
child: Padding(padding: Styles.edgeInsetAll10, child: details),
);
}
}
85 changes: 85 additions & 0 deletions lib/presentation/material/widgets/material_detail_top.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import 'package:flutter/material.dart';
import 'package:genshindb/domain/enums/enums.dart' as enums;
import 'package:genshindb/presentation/shared/extensions/rarity_extensions.dart';

import 'material_detail_general_card.dart';

const double imageHeight = 320;

class MaterialDetailTop extends StatelessWidget {
final String name;
final int rarity;
final enums.MaterialType type;
final String image;
final List<int> days;

const MaterialDetailTop({
Key key,
@required this.name,
@required this.rarity,
@required this.type,
@required this.image,
@required this.days,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final isPortrait = mediaQuery.orientation == Orientation.portrait;
final descriptionWidth = mediaQuery.size.width / (isPortrait ? 1.2 : 2);
//TODO: IM NOT SURE HOW THIS WILL LOOK LIKE IN BIGGER DEVICES
// final padding = mediaQuery.padding;
// final screenHeight = mediaQuery.size.height - padding.top - padding.bottom;

return Container(
decoration: BoxDecoration(gradient: rarity.getRarityGradient()),
child: Stack(
fit: StackFit.passthrough,
alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Container(
transform: Matrix4.translationValues(80, -30, 0.0),
child: Opacity(
opacity: 0.5,
child: Image.asset(
image,
width: 350,
height: imageHeight,
),
),
),
),
Align(
alignment: Alignment.topLeft,
child: Image.asset(
image,
width: 340,
height: imageHeight,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: descriptionWidth,
margin: const EdgeInsets.symmetric(horizontal: 30),
child: MaterialDetailGeneralCard(
type: type,
name: name,
rarity: rarity,
days: days,
),
),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(backgroundColor: Colors.transparent, elevation: 0.0),
),
],
),
);
}
}
13 changes: 12 additions & 1 deletion lib/presentation/materials/widgets/material_card.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:genshindb/application/bloc.dart';
import 'package:genshindb/domain/models/materials/material_card_model.dart';
import 'package:genshindb/presentation/material/material_page.dart' as mp;
import 'package:genshindb/presentation/shared/extensions/rarity_extensions.dart';
import 'package:genshindb/presentation/shared/gradient_card.dart';
import 'package:genshindb/presentation/shared/styles.dart';
Expand Down Expand Up @@ -74,7 +77,7 @@ class MaterialCard extends StatelessWidget {
final theme = Theme.of(context);
return InkWell(
borderRadius: Styles.mainCardBorderRadius,
onTap: () {},
onTap: () => _gotoMaterialPage(context),
child: GradientCard(
clipBehavior: Clip.hardEdge,
shape: Styles.mainCardShape,
Expand Down Expand Up @@ -109,4 +112,12 @@ class MaterialCard extends StatelessWidget {
),
);
}

Future<void> _gotoMaterialPage(BuildContext context) async {
final bloc = context.read<MaterialBloc>();
bloc.add(MaterialEvent.loadFromName(key: keyName));
final route = MaterialPageRoute(builder: (c) => mp.MaterialPage());
await Navigator.push(context, route);
bloc.pop();
}
}

0 comments on commit 8726293

Please sign in to comment.