title: Asking how to achieve the design problem in flutter
body: <p>Hello Guys I would like to ask is it possible to achieve this kind of design using code? I really got stuck, here is design I would like to achieve
  <a href="https://i.stack.imgur.com/bn46r.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bn46r.jpg" alt="Design needed to achieve" /></a></p>
  <p>but the real problem is I only achieve this</p>
  <p><a href="https://i.stack.imgur.com/lmEov.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lmEov.jpg" alt="Design I tried using code to achieve" /></a></p>
  <p>this is my sample code:</p>
  <p>in my main:</p>
  <pre><code>return Scaffold(
        backgroundColor: Color(0xff012a60),
        body: Stack(children: &lt;Widget&gt;[
          /*_AnimatedCircle(
            outerController: outerController,
            innerController: innerController,
          ),*/
          _OuterCircle(circleColor: Colors.blueGrey[900].withOpacity(.8)),
          Column(children: &lt;Widget&gt;[
            const Spacer(flex: 50),
            Expanded(flex: 30, child: Container(color: Colors.white)),
            const Spacer(flex: 20),
          ]),
          Row(children: &lt;Widget&gt;[
            const Spacer(flex: 80),
            Transform.scale(
              scale: 2.5,
              child: Container(
                  width: MediaQuery.of(context).size.width * 0.2,
                  decoration: const BoxDecoration(
                      color: Colors.red, shape: BoxShape.circle)),
            ),
          ]),
          // _OuterCircle(circleColor: Colors.blueAccent.withOpacity(.25)),
          Row(children: &lt;Widget&gt;[
            const Spacer(flex: 80),
            Column(children: [
              Spacer(flex: 60),
              Transform.scale(
                scale: 2.5,
                child: Container(
                    width: MediaQuery.of(context).size.width * 0.2,
                    height: MediaQuery.of(context).size.width * 0.05,
                    decoration: const BoxDecoration(color: Colors.green)),
              ),
              Spacer(flex: 24),
            ]),
          ]),
        ]),
      );
  </code></pre>
  <p>and this is my other class</p>
  <pre><code>class _OuterCircle extends StatelessWidget {
    const _OuterCircle({Key key, this.circleColor}) : super(key: key);
  
    final Color circleColor;
  
    @override
    Widget build(BuildContext context) {
      return Transform.scale(
          scale: 2,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.47,
            decoration: BoxDecoration(shape: BoxShape.circle, color: circleColor),
          ));
    }
  }
  </code></pre>
  <p>Please help I really stuck how to achieve this kind of design in dart code</p>