feat: make the storage indicator text more readable
This commit is contained in:
parent
bcff2214aa
commit
77d1ddf458
2 changed files with 85 additions and 31 deletions
49
lib/blend_mask.dart
Normal file
49
lib/blend_mask.dart
Normal 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();
|
||||
}
|
||||
}
|
|
@ -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)),
|
||||
]),
|
||||
],
|
||||
),
|
||||
)),
|
||||
]),
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue