I want to achieve the attached UI widget using custom paint or any other suitable way around, which should work well across different device sizes. image
In Flutter, how do we achieve this UI using custom paint or a custom clipper?
98 Views Asked by sinnoor c At
2
There are 2 best solutions below
0

You could use Stack
with Positioned.fill
and Align
widget as below:
Column(
children: [
Stack(
clipBehavior: Clip.none,
children: [
SizedBox(
width: 300,
height: 200,
child: Card(
color: Colors.yellow,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
),
),
Positioned.fill(
top: -40,
child: Align(
alignment: Alignment.topCenter,
child: Container(
width: 100,
height: 100,
decoration: const BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
child: Align(
alignment: Alignment.center,
child: Container(
width: 90,
height: 90,
decoration: const BoxDecoration(
color: Colors.orange, shape: BoxShape.circle),
child: const Align(
alignment: Alignment.center,
child: Icon(
Icons.check,
size: 50,
),
),
),
),
),
),
)
],
),
],
),
Similar approach like Niladri Raychaudhuri with
Stack and Positioned
but I usedCard
widget for elevation andContainer
for border.