flutterdartflutter-layoutflutter-animationflutter-custompaint

Flutter Custom paint stack object over object


Is it possible to achieve or stack paint object over another like this. I tried many resources for custom painter but was not able to stack the text in center of the circle and applying gradient behind circle. Help appreciated.

Custom Paint Shape


Solution

  • You don't need Custom paint to achieve this. You can create the layout using stack like the following

    Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [
                            Colors.orangeAccent.withOpacity(0.4),
                            Colors.transparent
                          ],
                          begin: Alignment.bottomCenter,
                          end: Alignment.topCenter,
                          stops: [0.4, 1])),
                  width: 100,
                  height: 200,
                ),
                Container(
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.deepPurple,
                      border: Border.all(color: Colors.white, width: 3)),
                  width: 100,
                  height: 100,
                  child: Center(
                      child: Text(
                    "80",
                    style: TextStyle(
                        fontSize: 30,
                        fontWeight: FontWeight.w900,
                        color: Colors.white),
                  )),
                ),
              ],
            )
    

    preview