Add gradient to show sync status clearly

This commit is contained in:
Vishnu 2021-07-05 14:26:30 +05:30
parent 39e11869ec
commit 1bd2f11fa1
2 changed files with 47 additions and 21 deletions

View file

@ -220,6 +220,31 @@ class DeviceFolderIcon extends StatelessWidget {
Key key,
}) : super(key: key);
static final kUnsyncedIconOverlay = Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.6),
],
stops: [0.7, 1],
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right: 8, bottom: 8),
child: Icon(
Icons.cloud_off_outlined,
size: 18,
color: Colors.white.withOpacity(0.9),
),
),
),
);
final DeviceFolder folder;
@override
@ -247,19 +272,7 @@ class DeviceFolderIcon extends StatelessWidget {
folder.path +
folder.thumbnail.tag()),
),
isBackedUp
? Container()
: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding:
const EdgeInsets.only(right: 8, bottom: 6),
child: Icon(
Icons.cloud_off_outlined,
size: 18,
),
),
)
isBackedUp ? Container() : kUnsyncedIconOverlay,
],
),
),

View file

@ -42,14 +42,27 @@ class _ThumbnailWidgetState extends State<ThumbnailWidget> {
),
);
static final kUnsyncedIconOverlay = Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right: 8, bottom: 4),
child: Icon(
Icons.cloud_off_outlined,
size: 18,
color: Colors.white.withOpacity(0.8),
static final kUnsyncedIconOverlay = Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.6),
],
stops: [0.75, 1],
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right: 8, bottom: 4),
child: Icon(
Icons.cloud_off_outlined,
size: 18,
color: Colors.white.withOpacity(0.9),
),
),
),
);