feat: make the storage indicator text more readable

This commit is contained in:
Garrett Watson 2024-02-23 16:34:22 -05:00
parent bcff2214aa
commit 77d1ddf458
2 changed files with 85 additions and 31 deletions

49
lib/blend_mask.dart Normal file
View file

@ -0,0 +1,49 @@
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
// Applies a BlendMode to its child.
class BlendMask extends SingleChildRenderObjectWidget {
final BlendMode blendMode;
final double opacity;
const BlendMask({
required this.blendMode,
this.opacity = 1.0,
super.key,
super.child,
});
@override
RenderObject createRenderObject(context) {
return RenderBlendMask(blendMode, opacity);
}
@override
void updateRenderObject(BuildContext context, RenderBlendMask renderObject) {
renderObject.blendMode = blendMode;
renderObject.opacity = opacity;
}
}
class RenderBlendMask extends RenderProxyBox {
BlendMode blendMode;
double opacity;
RenderBlendMask(this.blendMode, this.opacity);
@override
void paint(context, offset) {
// Create a new layer and specify the blend mode and opacity to composite it with:
context.canvas.saveLayer(
offset & size,
Paint()
..blendMode = blendMode
..color = Color.fromARGB((opacity * 255).round(), 255, 255, 255),
);
super.paint(context, offset);
// Composite the layer back into the canvas using the blendmode:
context.canvas.restore();
}
}

View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:recon/apis/user_api.dart';
import 'package:recon/auxiliary.dart';
import 'package:recon/blend_mask.dart';
import 'package:recon/client_holder.dart';
import 'package:recon/models/personal_profile.dart';
import 'package:recon/widgets/default_error_widget.dart';
@ -63,18 +64,19 @@ class _MyProfileDialogState extends State<MyProfileDialog> {
imageUri: Aux.resdbToHttp(profile.userProfile.iconUrl),
radius: 32,
),
Padding(
padding: const EdgeInsets.only(left: 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(profile.username, style: textTheme.titleLarge),
Text(
profile.accountType.label,
style: textTheme.labelMedium?.copyWith(color: profile.accountType.color),
),
],
)),
const SizedBox(
width: 12,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(profile.username, style: textTheme.titleLarge),
Text(
profile.accountType.label,
style: textTheme.labelMedium?.copyWith(color: profile.accountType.color),
),
],
),
],
),
),
@ -254,25 +256,28 @@ class StorageIndicator extends StatelessWidget {
height: 48,
padding: const EdgeInsets.symmetric(horizontal: 12),
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"${(value * 100).toStringAsFixed(0)}%",
style: Theme.of(context).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
// Displayed in GiB instead of GB for consistency with Resonite
Text(
"${(usedBytes * 9.3132257461548e-10).toStringAsFixed(2)} GB of ${(maxBytes * 9.3132257461548e-10).toStringAsFixed(2)} GB"),
Text("Storage Space Used",
style: Theme.of(context).textTheme.labelSmall?.copyWith(fontSize: 10)),
]),
],
child: BlendMask(
blendMode: BlendMode.colorDodge,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"${(value * 100).toStringAsFixed(0)}%",
style: Theme.of(context).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
// Displayed in GiB instead of GB for consistency with Resonite
Text(
"${(usedBytes * 9.3132257461548e-10).toStringAsFixed(2)} GB of ${(maxBytes * 9.3132257461548e-10).toStringAsFixed(2)} GB"),
Text("Storage Space Used",
style: Theme.of(context).textTheme.labelSmall?.copyWith(fontSize: 10)),
]),
],
),
)),
]),
)