Question 329475 in Flutter Question posted in
The official Flutter documentation can be found here.

How to design ring buttons Flutter

enter image description hereI have this design and I want to make it using filters. Can you help me with it?
The design consists of images in PNG format

I tried several times but the design is not clear

thank you


Widget _buildMenuBody() {
  return Column(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        width: 150,
        height: 62,
        child: Image.asset(
          "assets/Images/daily.png",
        ),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            "assets/Images/ad.png",
            width: 60,
            height: 115,
          ),
          Image.asset("assets/Images/play.png", width: 100),
          Image.asset(
            "assets/Images/random.png",
            width: 60,
            height: 115,
          ),
        ],
      ),
      Image.asset(
        "assets/Images/about.png",
        width: 150,
        height: 62,
      ),
    ],
  );
}
Tags:

2

Answers


  1. 0

    You can use Stack() with Positioned() widgets. The positions of png assets should be given exactly in pixel coordinates. The zero point is the left-top corner of the base container, if you give positions with left:,top: properties.
    Widgets on the bottom of Stack() children list overlapping the previous widgets. You can get the coordinates from Photoshop like apps.
    Here a basic idea:

    Container(
        width: 300,  //width of the base circle
        height: 300, //height of the base circle
        color: Colors.grey,
        child: Stack(
          children: [
            Positioned(
              left: 0,
              top: 50,
              child: Image.asset( "../",width: 50, height: 200),
            ),
            Positioned(
              left: 250,
              top: 50,
              child: Image.asset("../",width: 50, height: 200),
            ),
            Positioned(
              left: 50,
              top: 0,
              child: Image.asset("../",width: 200, height: 50),
            ),
            Positioned(
              left: 50,
              top: 250,
              child: Image.asset("../",width: 200, height: 50),
            ),
            Positioned(
              left: 125,
              top: 125,
              child: Image.asset("../",width: 50, height: 50),
            ),
          ],
        ),
      ),
    Login or Signup to reply.
  2. 0

    You can make it related to screen size to adjust many devices just making Viktor’s answer related to screenSize and the result is this:

    See Result GIF Here

    Narrow Screens Wide Screens
    enter image description here enter image description here

    The full Gist

    circle_of_buttons.dart

    class ButtonCircle extends StatelessWidget {
  const ButtonCircle({super.key, required this.width});
  final double width;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width, 
      height: width,
      color: Colors.grey,
      child: Stack(
        children: [
          Positioned(
            left: 0,
            top: width / 6,
            child: Image.asset(
              "assets/images/circle_left.png",
              fit: BoxFit.contain,
              height: width * 2 / 3,
              width: width / 3,
            ),
          ),
          Positioned(
            left: width * 2 / 3,
            top: width / 6,
            child: Image.asset(
              "assets/images/circle_right.png",
              fit: BoxFit.contain,
              height: width * 2 / 3,
              width: width / 3,
            ),
          ),
          Positioned(
            left: width / 6,
            top: 0,
            child: Image.asset(
              "assets/images/circle_up.png",
              fit: BoxFit.contain,
              height: width / 3,
              width: width * 2 / 3,
            ),
          ),
          Positioned(
            left: width / 6,
            top: width * 2 / 3,
            child: Image.asset(
              "assets/images/circle_down.png",
              fit: BoxFit.contain,
              height: width / 3,
              width: width * 2 / 3,
            ),
          ),
          Positioned(
            left: width * 0.3,
            top: width * 0.3,
            child: Image.asset(
              "assets/images/circle.png",
              fit: BoxFit.contain,
              height: width * 0.4,
              width: width * 0.4,
            ),
          ),
        ],
      ),
    );
  }
}

    And in the page you should check for the screen size and build the widget according to that, let’s say 80% (0.8) of the screen width

    demo.dart

    class Demo extends StatefulWidget {
  const Demo({super.key});

  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  late Size? screenSize;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    screenSize = MediaQuery.of(context).size;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: ButtonCircle(width: screenSize!.width * 0.8),  // 80% of the screen width
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search