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, Key key,
}) : super(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; final DeviceFolder folder;
@override @override
@ -247,19 +272,7 @@ class DeviceFolderIcon extends StatelessWidget {
folder.path + folder.path +
folder.thumbnail.tag()), folder.thumbnail.tag()),
), ),
isBackedUp isBackedUp ? Container() : kUnsyncedIconOverlay,
? Container()
: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding:
const EdgeInsets.only(right: 8, bottom: 6),
child: Icon(
Icons.cloud_off_outlined,
size: 18,
),
),
)
], ],
), ),
), ),

View file

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