Skip to main content

4. Background Image Card

Card

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
Material(
borderRadius: BorderRadius.circular(20),
elevation: 10,
child: AspectRatio(
aspectRatio: 16 / 9,
child: Stack(
children: [
Positioned.fill(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: ExtendedImage.network(
'https://images.pexels.com/photos/5155804/pexels-photo-5155804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
fit: BoxFit.cover,
),
),
),
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.5, 1],
colors: [
Colors.transparent,
const Color(0xff000000).withOpacity(0.7),
],
),
),
),
),
const Positioned(
left: 16,
right: 16,
bottom: 16,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Labuan Bajo',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: Colors.white70,
),
),
Gap(4),
Text(
'Labuan Bajo is a fishing town located at the western end of the large island of Flores in the East Nusa Tenggara province of Indonesia. It is in Komodo district.',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
color: Colors.white54,
),
),
],
),
),
],
),
),
),