Let’s take a look at this complex ui using flutter Stack, Row and Column. We also used Positioned widget.
Without Positioned widget, elements would be overlapping in the center of stack widget. With Positioned widget, we can specify where to put a certain widget.
Stack(
children: [
Container(
height: 90,
width: double.infinity,
decoration: BoxDecoration(
color: const Color(0xFF687daf),
borderRadius: BorderRadius.circular(18)
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 25,
vertical: 20),
child: Row(
children: [
const CircleAvatar(
maxRadius: 25,
backgroundColor: Colors.white,
child: Icon(FluentSystemIcons.ic_fluent_lightbulb_filament_filled,
color: Color(0xFF687daf), size: 27,),
),
const SizedBox(width: 8,),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"You\'ve got an award",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 21,
),
),
Text(
"You have 95 flights in a year",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white.withOpacity(0.9),
fontSize: 16
),
)
],
)
],
),
),
Positioned(
right: -45,
top:-40,
child: Container(
padding: const EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(width: 18, color: Color(0xFF264CD2))
)
),
)
],
)You need to replace the icon with Flutter icon or with any third party library icon.
Stack and Positioned Widgets are very useful for complex layout.
Just use above code inside a stateful or stateless class. Do it inside a Column or Listview or even a Row.