update ui for storage card

This commit is contained in:
Neeraj Gupta 2022-06-09 21:00:45 +05:30
parent 0c89494841
commit 271be86cbd
No known key found for this signature in database
GPG key ID: 3C5A1684DC1729E1
2 changed files with 48 additions and 32 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View file

@ -71,7 +71,7 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
); );
}, },
child: SizedBox( child: SizedBox(
height: 196, height: 148,
child: _userDetails == null ? loadWidget : getContainer(), child: _userDetails == null ? loadWidget : getContainer(),
), ),
); );
@ -80,17 +80,18 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
Container getContainer() { Container getContainer() {
return Container( return Container(
width: double.infinity, width: double.infinity,
height: 104, height: 148,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.transparent, color: Colors.transparent,
borderRadius: BorderRadius.circular(8.0), borderRadius: BorderRadius.only(
topRight: Radius.circular(16), bottomLeft: Radius.circular(16)),
image: DecorationImage( image: DecorationImage(
fit: BoxFit.fill, fit: BoxFit.fill,
image: AssetImage("assets/card_background.png"), image: AssetImage("assets/card_background.png"),
), ),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.symmetric(vertical: 36, horizontal: 20), padding: EdgeInsets.only(top: 12, bottom: 12, left: 20, right: 0),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -110,28 +111,40 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
.headline5 .headline5
.copyWith(color: Colors.white), .copyWith(color: Colors.white),
), ),
Padding(padding: EdgeInsets.symmetric(vertical: 18)), // Padding(padding: EdgeInsets.symmetric(vertical: 7)),
Stack( Align(
children: <Widget>[ alignment: Alignment.centerRight,
Container( child: Icon(
color: Colors.white.withOpacity(0.2), Icons.chevron_right,
width: MediaQuery.of(context).size.width, color: Colors.white,
height: 4, size: 24,
), ),
Container( ),
color: Colors.white.withOpacity(0.75), // Padding(padding: EdgeInsets.symmetric(vertical: 8)),
width: MediaQuery.of(context).size.width * Padding(
((_userDetails.getFamilyOrPersonalUsage()) / padding: const EdgeInsets.only(right: 24.0),
_userDetails.getTotalStorage()), child: Stack(
height: 4, children: <Widget>[
), Container(
Container( color: Colors.white.withOpacity(0.2),
color: Colors.white, width: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width * height: 4,
(_userDetails.usage / _userDetails.getTotalStorage()), ),
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: 6)), Padding(padding: EdgeInsets.symmetric(vertical: 6)),
GestureDetector( GestureDetector(
@ -197,12 +210,15 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
color: Colors.white.withOpacity(0.7), color: Colors.white.withOpacity(0.7),
fontSize: 14), fontSize: 14),
), ),
Text( Padding(
"${NumberFormat().format(_userDetails.fileCount)} Memories", padding: const EdgeInsets.only(right: 24.0),
style: Theme.of(context) child: Text(
.textTheme "${NumberFormat().format(_userDetails.fileCount)} Memories",
.headline5 style: Theme.of(context)
.copyWith(color: Colors.white, fontSize: 14), .textTheme
.headline5
.copyWith(color: Colors.white, fontSize: 14),
),
) )
], ],
), ),