1

enter image description here

how can i achieve this i am new to flutter , please help. is there any library for achieving this?.

class MoodMeter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MoodMeter App'),
        ),
        body: Center(
          child: MoodDonut(),
        ),
      ),
    );
  }
}

class MoodDonut extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 300,
      height: 300,
      decoration: BoxDecoration(
          color: Colors.green,
          shape: BoxShape.circle,
          border: Border.all(color: Colors.red, width: 4)),
      child: const Stack(
        children: [
          Align(
            alignment: Alignment(-0.7,0.7),
            child: Text("jk"),
          ),
          Align(
            alignment: Alignment(-0.7,0.7),
            child: Text("jk"),
          ),
          Align(
            alignment: Alignment(0.7,-0.7),
            child: Text("mn"),
          ),
          Align(
            alignment: Alignment(1, 0),
            child: Text("D"),
          ),
          Align(
            alignment: Alignment(0, -1),
            child: Text("W"),
          ),
          Align(
            alignment: Alignment(-1, 0),
            child: Text("O"),
          ),
          Align(
            alignment: Alignment(0, 1),
            child: Text("R"),
          ),
        ],
      ),
    );
  }
}

i need to achieve the UI same as that of image , is there any library available for achieving that

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
Nns_ninteyFIve
  • 439
  • 4
  • 12

0 Answers0