Are there a better method to make this effect? [CUSTOM BOTTOMBAR] - flutter

Question

I try to make my first app with Flutter.
I have a question i make this custom bottom bar:
Are there better method for make this effect or similar effect?
Is it correct this method with stack and row?
Thanks u and good coding!
Container bottom(Size size) {
double totalElement = size.width / 3;
return Container(
height: size.width * 0.15,
//color: GS.mainColor,
child: Stack(
alignment: Alignment.bottomLeft,
children: [
//LONG ELEMENT
Positioned(
child: Container(
width: totalElement*3,
height: GS.heightBottomElement,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
)
),
)
),
//FIRST ELEMENT
Positioned(
child: Container(
height: GS.heightBottomElement,
width: totalElement*2,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
)
),
)
),
//FIRST ELEMENT
Positioned(
child: Container(
height: GS.heightBottomElement,
width: totalElement,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
)
),
)
),
],
),
);
}

Answer 1

You could extract the Positioned elements into a separate stateless widget, in that way you use the DRY method, and your code will look nicer and cleaner, with less repeated code.
It would look like this:
Container bottom(Size size) {
double totalElement = size.width / 3;
return Container(
height: size.width * 0.15,
//color: GS.mainColor,
child: Stack(
alignment: Alignment.bottomLeft,
children: [
//LONG ELEMENT
MyCutomPositioned(height: blabla, width: blabla, color: blabla),
//FIRST ELEMENT
MyCutomPositioned(height: blabla, width: blabla, color: blabla),
//SECOND ELEMENT
MyCutomPositioned(height: blabla, width: blabla, color: blabla),
],
),
);
}