Skip to content

Commit

Permalink
[Presentation] Minor ui improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Wolfteam committed Nov 8, 2022
1 parent e41611c commit 409e664
Show file tree
Hide file tree
Showing 11 changed files with 69 additions and 47 deletions.
Expand Up @@ -80,7 +80,7 @@ class ItemCard extends StatelessWidget {
),
),
),
Container(
DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(Styles.cardBottomRadius),
Expand Down
6 changes: 1 addition & 5 deletions lib/presentation/custom_build/widgets/artifact_section.dart
Expand Up @@ -32,11 +32,7 @@ class ArtifactSection extends StatelessWidget {
return BlocBuilder<CustomBuildBloc, CustomBuildState>(
builder: (context, state) => state.maybeMap(
loaded: (state) {
final color = theme.brightness == Brightness.dark
? state.character.elementType.getElementColorFromContext(
context,
)
: theme.colorScheme.secondary;
final color = state.character.elementType.getElementColorFromContext(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
Expand Down
4 changes: 2 additions & 2 deletions lib/presentation/custom_build/widgets/character_section.dart
Expand Up @@ -46,8 +46,8 @@ class CharacterSection extends StatelessWidget {

return BlocBuilder<CustomBuildBloc, CustomBuildState>(
builder: (context, state) => state.maybeMap(
loaded: (state) => Container(
color: theme.brightness == Brightness.dark ? state.character.elementType.getElementColorFromContext(context) : theme.colorScheme.secondary,
loaded: (state) => ColoredBox(
color: state.character.elementType.getElementColorFromContext(context),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expand Down
6 changes: 1 addition & 5 deletions lib/presentation/custom_build/widgets/team_section.dart
Expand Up @@ -30,11 +30,7 @@ class TeamSection extends StatelessWidget {
return BlocBuilder<CustomBuildBloc, CustomBuildState>(
builder: (context, state) => state.maybeMap(
loaded: (state) {
final color = theme.brightness == Brightness.dark
? state.character.elementType.getElementColorFromContext(
context,
)
: theme.colorScheme.secondary;
final color = state.character.elementType.getElementColorFromContext(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
Expand Down
6 changes: 1 addition & 5 deletions lib/presentation/custom_build/widgets/weapon_section.dart
Expand Up @@ -30,11 +30,7 @@ class WeaponSection extends StatelessWidget {
return BlocBuilder<CustomBuildBloc, CustomBuildState>(
builder: (context, state) => state.maybeMap(
loaded: (state) {
final color = theme.brightness == Brightness.dark
? state.character.elementType.getElementColorFromContext(
context,
)
: theme.colorScheme.secondary;
final color = state.character.elementType.getElementColorFromContext(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
Expand Down
Expand Up @@ -67,16 +67,31 @@ class NotificationCircleItem extends StatelessWidget {
}

Widget _buildSelectableImage(BuildContext context, String theImage, {bool isSelected = false}) {
final circleItem = CircleItem(image: theImage, onTap: (_) => _changeSelectedImg(theImage, context));
final circleItem = CircleItem(
image: theImage,
fit: BoxFit.contain,
onTap: (_) => _changeSelectedImg(theImage, context),
);
if (!isSelected) {
return Center(child: circleItem);
}
return Center(
child: Stack(
alignment: Alignment.center,
children: [
const Positioned(top: 0, right: 0, child: Icon(Icons.check, color: Colors.green)),
CircleItem(image: theImage, onTap: (_) => _changeSelectedImg(theImage, context)),
circleItem,
Positioned(
top: 0,
right: 0,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.8),
border: Border.all(color: Colors.green),
borderRadius: BorderRadius.circular(20),
),
child: const Icon(Icons.check, color: Colors.white),
),
),
],
),
);
Expand Down
6 changes: 6 additions & 0 deletions lib/presentation/shared/styles.dart
Expand Up @@ -72,4 +72,10 @@ class Styles {
}

static const Color paimonColor = Color.fromARGB(255, 191, 138, 104);

static LinearGradient blackGradientForCircleItems = LinearGradient(
colors: [Colors.black.withOpacity(0.6), Colors.black.withOpacity(0.8)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
}
7 changes: 2 additions & 5 deletions lib/presentation/splash/splash_page.dart
Expand Up @@ -257,12 +257,9 @@ class _Updating extends StatelessWidget {
style: theme.textTheme.subtitle1!.copyWith(color: Colors.white, fontWeight: FontWeight.bold),
),
),
Container(
DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Styles.paimonColor,
width: 0.5,
),
border: Border.all(color: Styles.paimonColor, strokeAlign: StrokeAlign.center),
),
child: BlocBuilder<SplashBloc, SplashState>(
builder: (context, state) => LinearProgressIndicator(
Expand Down
35 changes: 20 additions & 15 deletions lib/presentation/tierlist/tier_list_page.dart
Expand Up @@ -22,34 +22,39 @@ class _TierListPageState extends State<TierListPage> {

@override
Widget build(BuildContext context) {
const double fabHeight = 100;
return BlocProvider<TierListBloc>(
create: (ctx) => Injection.tierListBloc..add(const TierListEvent.init()),
child: Scaffold(
appBar: _AppBar(screenshotController: screenshotController),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: TierListFab(),
floatingActionButton: const TierListFab(height: fabHeight),
body: SafeArea(
child: SingleChildScrollView(
child: Screenshot(
controller: screenshotController,
child: BlocBuilder<TierListBloc, TierListState>(
builder: (ctx, state) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: state.rows
.mapIndex(
(e, index) => TierListRow(
index: index,
title: e.tierText,
color: Color(e.tierColor),
items: e.items,
isUpButtonEnabled: index != 0,
isDownButtonEnabled: index != state.rows.length - 1,
numberOfRows: state.rows.length,
showButtons: !state.readyToSave,
isTheLastRow: state.rows.length == 1,
),
children: [
...state.rows.mapIndex(
(e, index) => TierListRow(
index: index,
title: e.tierText,
color: Color(e.tierColor),
items: e.items,
isUpButtonEnabled: index != 0,
isDownButtonEnabled: index != state.rows.length - 1,
numberOfRows: state.rows.length,
showButtons: !state.readyToSave,
isTheLastRow: state.rows.length == 1,
),
),
if (!state.readyToSave && state.charsAvailable.isNotEmpty)
SizedBox.fromSize(
size: const Size.fromHeight(fabHeight),
)
.toList(),
],
),
),
),
Expand Down
21 changes: 16 additions & 5 deletions lib/presentation/tierlist/widgets/tierlist_fab.dart
Expand Up @@ -6,14 +6,19 @@ import 'package:shiori/presentation/shared/images/circle_character.dart';
import 'package:shiori/presentation/shared/styles.dart';

class TierListFab extends StatelessWidget {
final double height;

const TierListFab({super.key, required this.height});

@override
Widget build(BuildContext context) {
return BlocBuilder<TierListBloc, TierListState>(
builder: (ctx, state) => !state.readyToSave
? Container(
builder: (ctx, state) => !state.readyToSave && state.charsAvailable.isNotEmpty
? ColoredBox(
color: Colors.black.withOpacity(0.5),
child: SizedBox(
height: 100,
height: height,
width: double.infinity,
child: ListView(
padding: EdgeInsets.zero,
physics: const BouncingScrollPhysics(),
Expand All @@ -30,20 +35,26 @@ class TierListFab extends StatelessWidget {

class _DraggableItem extends StatelessWidget {
final ItemCommon item;

const _DraggableItem({required this.item});

@override
Widget build(BuildContext context) {
const double radius = 40;
return Draggable<ItemCommon>(
data: item,
feedback: CircleCharacter.fromItem(item: item, forDrag: true),
childWhenDragging: CircleAvatar(
backgroundColor: Colors.black.withOpacity(0.4),
radius: 40,
radius: radius,
),
child: Container(
margin: Styles.edgeInsetHorizontal16,
child: CircleCharacter.fromItem(item: item, radius: 40),
child: CircleCharacter.fromItem(
item: item,
radius: radius,
gradient: Styles.blackGradientForCircleItems,
),
),
);
}
Expand Down
2 changes: 1 addition & 1 deletion lib/presentation/tierlist/widgets/tierlist_row.dart
Expand Up @@ -65,7 +65,7 @@ class TierListRow extends StatelessWidget {
Flexible(
fit: FlexFit.tight,
flex: flexA,
child: Container(
child: ColoredBox(
color: color,
child: Center(
child: Text(
Expand Down

0 comments on commit 409e664

Please sign in to comment.