We used stack widget to make the over lap of plane and dots for ticket ui in flutter.

Expanded(child: Stack(
children: [
SizedBox(
height: 24,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
print("The width is ${constraints.constrainWidth()}");
return Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: List.generate((constraints.constrainWidth()/6).floor(), (index) => SizedBox(
width: 3, height: 1, child: DecoratedBox(decoration: BoxDecoration(
color: Colors.white
),),
)),
);
},
),
),
Center(child: Transform.rotate(angle: 1.5,child: Icon(Icons.local_airport_rounded, color: Colors.white,),)),
],
)),
The widgets are much this kind of UI designs are
Expanded, Stack, LayoutBuilder, Flex and Transform Widget.
The above widgets usage combination could be difficult, so strong suggest to understand how they work together.
Watch video many times.
