Custom clipper not moving when I use Align

  android, dart, flutter, user-experience, user-interface

I am creating an UI which contains 5-6 polygons on the page. I inserted 2 of them. But when i try to move them using Align(), its not moving at all. Here is the code of mine:

import 'package:flutter/material.dart';
import 'package:online_schedule/bottomRightCorner.dart';
// import 'package:online_schedule/clipShadowPath.dart';

import 'bottomRightCorner.dart';
import 'middle.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    // final _width = MediaQuery.of(context).size.width;
    return Material(
      child: Stack(
        children: [
            alignment: Alignment(1, 1),
            child: ClipPath(
              clipper: Middle(),
              child: Container(color: Colors.grey),
            alignment: Alignment(-1, -1),
            child: ClipPath(
              clipper: BottomRightCorner(),
              child: Container(color: Colors.grey),

Forget about the co-ordinates that I mentioned, they are just for testing.
what I got

The above image is the result of my code

But my goal is to get like this
what I need

I have spent 3 days for this but still messed up. Help me guys

Source: Android Questions