beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #328 from ente-io/widget_flickr

Browse source
This commit is contained in:
Vishnu Mohandas 2022-06-19 17:15:56 +05:30 committed by GitHub
parent 9cd2ee7f18 59961684ec
commit 06ecc56346
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 153 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

283
lib/ui/settings/details_section_widget.dart
View file

@ -22,6 +22,7 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
UserDetails _userDetails;
StreamSubscription<UserDetailsChangedEvent> _userDetailsChangedEvent;
StreamSubscription<TabChangedEvent> _tabChangedEventSubscription;
Image _background;
@override
void initState() {
@ -37,6 +38,18 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
_fetchUserDetails();
}
});
_background = Image(
image: AssetImage("assets/card_background.png"),
fit: BoxFit.fill,
);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
// precache background image to avoid flicker
// https://stackoverflow.com/questions/51343735/flutter-image-preload
precacheImage(_background.image, context);
}
void _fetchUserDetails() {
@ -69,7 +82,7 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
),
);
},
child: _userDetails == null ? loadWidget : getContainer(),
child: getContainer(),
);
}
@ -85,143 +98,153 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
color: Colors.transparent,
child: AspectRatio(
aspectRatio: 2 / 1,
child: Image(
image: AssetImage("assets/card_background.png"),
fit: BoxFit.fill, // use this
),
child: _background,
),
),
Padding(
padding: EdgeInsets.only(top: 20, bottom: 20, left: 16, right: 16),
child: Container(
color: Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Align(
alignment: Alignment.topLeft,
_userDetails == null
? loadWidget
: Padding(
padding:
EdgeInsets.only(top: 20, bottom: 20, left: 16, right: 16),
child: Container(
color: Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Storage",
style: Theme.of(context)
.textTheme
.subtitle2
.copyWith(color: Colors.white.withOpacity(0.7)),
),
Text(
"${convertBytesToReadableFormat(_userDetails.getFreeStorage())} of ${convertBytesToReadableFormat(_userDetails.getTotalStorage())} free",
style: Theme.of(context)
.textTheme
.headline5
.copyWith(color: Colors.white),
Align(
alignment: Alignment.topLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Storage",
style: Theme.of(context)
.textTheme
.subtitle2
.copyWith(
color: Colors.white.withOpacity(0.7)),
),
Text(
"${convertBytesToReadableFormat(_userDetails.getFreeStorage())} of ${convertBytesToReadableFormat(_userDetails.getTotalStorage())} free",
style: Theme.of(context)
.textTheme
.headline5
.copyWith(color: Colors.white),
),
],
),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Stack(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.2),
width: MediaQuery.of(context).size.width,
height: 4,
),
Container(
color: Colors.white.withOpacity(0.75),
width: MediaQuery.of(context).size.width *
((_userDetails
.getFamilyOrPersonalUsage()) /
_userDetails.getTotalStorage()),
height: 4,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width *
(_userDetails.usage /
_userDetails.getTotalStorage()),
height: 4,
),
],
),
Padding(padding: EdgeInsets.symmetric(vertical: 8)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_userDetails.isPartOfFamily()
? Row(
children: [
Container(
width: 8.71,
height: 8.99,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
Padding(
padding:
EdgeInsets.only(right: 4)),
Text(
"You",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(
color: Colors.white,
fontSize: 12),
),
Padding(
padding:
EdgeInsets.only(right: 12)),
Container(
width: 8.71,
height: 8.99,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white
.withOpacity(0.75),
),
),
Padding(
padding:
EdgeInsets.only(right: 4)),
Text(
"Family",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(
color: Colors.white,
fontSize: 12),
),
],
)
: Text(
"${convertBytesToReadableFormat(_userDetails.getFamilyOrPersonalUsage())} used",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(
color: Colors.white,
fontSize: 12),
),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Text(
"${NumberFormat().format(_userDetails.fileCount)} Memories",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(
color: Colors.white, fontSize: 12),
),
)
],
),
],
)
],
),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Stack(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.2),
width: MediaQuery.of(context).size.width,
height: 4,
),
Container(
color: Colors.white.withOpacity(0.75),
width: MediaQuery.of(context).size.width *
((_userDetails.getFamilyOrPersonalUsage()) /
_userDetails.getTotalStorage()),
height: 4,
),
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width *
(_userDetails.usage /
_userDetails.getTotalStorage()),
height: 4,
),
],
),
Padding(padding: EdgeInsets.symmetric(vertical: 8)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_userDetails.isPartOfFamily()
? Row(
children: [
Container(
width: 8.71,
height: 8.99,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
Padding(padding: EdgeInsets.only(right: 4)),
Text(
"You",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(
color: Colors.white,
fontSize: 12),
),
Padding(
padding: EdgeInsets.only(right: 12)),
Container(
width: 8.71,
height: 8.99,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.75),
),
),
Padding(padding: EdgeInsets.only(right: 4)),
Text(
"Family",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(
color: Colors.white,
fontSize: 12),
),
],
)
: Text(
"${convertBytesToReadableFormat(_userDetails.getFamilyOrPersonalUsage())} used",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(
color: Colors.white, fontSize: 12),
),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Text(
"${NumberFormat().format(_userDetails.fileCount)} Memories",
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(color: Colors.white, fontSize: 12),
),
)
],
),
],
)
],
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(