Flutter custom clipper with stack not working correctly - dart

Question

I really interested with flutter, and currently I'm trying to create a custom clipper with clipPart widget. but it's seems not working correctly.
here is my code
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
title: "My App",
home: HomePage(),
debugShowCheckedModeBanner: false,
));
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
color: Colors.teal,
child: HomeScreenTop(),
)
],
),
);
}
}
class HomeScreenTop extends StatefulWidget {
#override
_HomeScreenTopState createState() => _HomeScreenTopState();
}
class _HomeScreenTopState extends State<HomeScreenTop> {
#override
Widget build(BuildContext context) {
return Stack(
textDirection: TextDirection.ltr,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: WaveContainer(),
),
],
);
}
}
class WaveContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ClipPath(
clipper: CustomShapeClipper(),
clipBehavior: Clip.antiAlias,
child: Container(
width: MediaQuery.of(context).size.width,
height: 400.0,
color: Colors.orange,
),
);
}
}
class CustomShapeClipper extends CustomClipper<Path> {
#override
getClip(Size size) {
print(size.height);
final Path path =Path();
path.lineTo(size.width / 2, size.height);
path.lineTo(size.width, 0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper oldClipper) => true;
}
what I want to do is, create a triangle from top to bottom, as I know from the tutorial, Offset of x = 0 and y = 0 should be pointing to left-top corner of the page. So if create like this
path.lineTo(size.width / 2, size.height);
path.lineTo(size.width, 0);
the path should be drawing from left-top to middle-down to right-top and back to left-top
But what I've got when I try the code is like this
And, the stack is not working.. the triangle should isolated inside the container but why the custom clipper can exceed the bottom container??
I really confuse, Please help

Answer 1

Solved by change the emulator from Genymotion to iOS IphoneX emulator. Don't know why it show different behaviour between iOS and android, but I think iOS emulator is the right one..