How to implement such design (circles with radius more then screen width) in Flutter?

You can create a circle that overflows out of the screen from the center by using the Stack

Code:

      Widget build(BuildContext context) {
    double scrWidth = MediaQuery.sizeOf(context).width;
    double scrHeight = MediaQuery.sizeOf(context).height;
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: scrWidth,
          height: scrHeight,
          color: Colors.red.withOpacity(0.8),
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned(
                width: scrWidth * 1.8,
                height: scrHeight * 1.8,
                child: Container(
                  width: scrWidth,
                  height: scrHeight,
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.6),
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              Positioned(
                width: scrWidth * 1.5,
                height: scrHeight * 1.5,
                child: Container(
                  width: scrWidth,
                  height: scrHeight,
                  decoration: BoxDecoration(
                    color: Colors.yellow.withOpacity(0.2),
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              Positioned(
                width: scrWidth * 0.8,
                height: scrHeight * 0.8,
                child: Container(
                  width: scrWidth,
                  height: scrHeight,
                  decoration: BoxDecoration(
                    color: Colors.green.withOpacity(0.2),
                    shape: BoxShape.circle,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
}

Result :