I'm trying to give the LinearProgressIndicator width for the available space using LayoutBuilder but it throws an exception:
Here's my code for regenerating the issue:
Positioned(
left: 0,
right: 0,
top: 328,
child: Container(
height: 141,
padding: const EdgeInsets.all(20),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: const Color(0xFFFDFDFD),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
shadows: const [
BoxShadow(
color: Color(0x26000000),
blurRadius: 20,
offset: Offset(0, -1),
spreadRadius: -7,
)
],
),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const CircleAvatar(
backgroundImage: AssetImage('assets/images/idiomspic.png'),
),
const SizedBox(width: 16),
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Idiomatic expressions III',
style: TextStyle(
color: Color(0xFF424242),
fontSize: 14,
fontFamily: 'Balsamiq Sans',
fontWeight: FontWeight.w700,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const Text(
'34%',
style: TextStyle(
color: Color(0xFF686868),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 10),
LayoutBuilder(
builder: (context, constraints) {
return Container(
width: constraints.maxWidth,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2),
),
),
clipBehavior: Clip.antiAlias,
height: 5,
child: const LinearProgressIndicator(
value: 0.34,
color: Colors.green,
backgroundColor: Color(0xFFEFEFEF),
),
);
}
),
],
),
],
),
],
),
const SizedBox(height: 19),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 8),
decoration: ShapeDecoration(
color: const Color(0xFFEFEFEF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28),
),
),
child: const Text(
'Latest activity',
style: TextStyle(
color: Color(0xFF686868),
fontSize: 9,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
),
),
),
const Text(
'Resume lesson',
style: TextStyle(
color: Color(0xFF0467C5),
fontSize: 12,
fontFamily: 'Balsamiq Sans',
fontWeight: FontWeight.w700,
),
),
],
),
],
),
),
),
What should I change to get this working?
