want to make circular pie chart shape like buttons in Flutter - flutter

Question

Following are the screenshots of the Ui of Buttons which I want to make using Flutter.
There are the packages Pie chart and Syncfusion's package, but these are different for this approach.
Help me to create these.

Answer 1

I've found my solution and now adding on the request of #dijkstra
I've used PieChart widget to implement it.
First of all, create a model class
class PieButtonModel {
PieButtonModel({this.title, required this.onPressed});
final VoidCallback onPressed;
final String? title;
}
Now, create a stateless class for Ui. I've used two PieChart widgets in stack to match the required output.
class PieButtonScreen extends StatelessWidget {
PieButtonScreen({Key? key, required this.buttonsData, this.startsFrom}) : super(key: key);
final List<PieButtonModel> buttonsData;
final double? startsFrom;
int touchedIndex = -1;
#override
Widget build(BuildContext context) {
return Center(
child: StatefulBuilder(builder: (context, stateful) {
return Stack(
clipBehavior: Clip.none,
children: [
Container(
decoration: const BoxDecoration(
color: kGreyColor,
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Color(0xff1143A7),
Color(0xff00B6FE),
],
),
),
width: double.infinity,
height: double.infinity,
),
Container(
margin: const EdgeInsets.all(10),
decoration: const BoxDecoration(
color: kWhiteColor,
shape: BoxShape.circle,
),
width: double.infinity,
height: double.infinity,
),
PieChart(
PieChartData(
pieTouchData: PieTouchData(touchCallback: (FlTouchEvent event, pieTouchResponse) {
stateful(() {
if (!event.isInterestedForInteractions ||
pieTouchResponse == null ||
pieTouchResponse.touchedSection == null) {
touchedIndex = -1;
return;
}
touchedIndex = pieTouchResponse.touchedSection!.touchedSectionIndex;
pieButtonPressed(touchedIndex, buttonsData);
});
}),
borderData: FlBorderData(
show: true,
border: const Border(
top: BorderSide(color: Colors.red),
)),
sectionsSpace: 5,
centerSpaceRadius: 60,
centerSpaceColor: const Color(0xFFe7e8e9),
startDegreeOffset: startsFrom ?? 0,
sections: showingSections()),
),
Positioned.fill(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
Get.find<ValveViewController>().removeView();
},
child: Neumorphic(
style: const NeumorphicStyle(
boxShape: NeumorphicBoxShape.circle(),
color: kWhiteColor,
border: NeumorphicBorder(
color: Color(0xFF919192),
width: 2,
)),
child: Container(
height: 90,
width: 90,
decoration: BoxDecoration(
// shape: BoxShape.circle,
borderRadius: BorderRadius.circular(100),
),
child: const CircleAvatar(
backgroundImage: AssetImage('assets/images/icon.jpg'),
),
),
),
),
],
),
)
],
);
}),
);
}
}
And then, create a list of sections
List<PieChartSectionData> showingSections() {
return List.generate(buttonsData.length, (i) {
PieButtonModel pbm = buttonsData[i];
final isTouched = i == touchedIndex;
final fontSize = isTouched ? 14.0 : 11.0;
final radius = isTouched ? 100.0 : 90.0;
var val = buttonsData.length / 100;
List<String>? title = pbm.title?.replaceAll('/ ', '').split(" ");
return PieChartSectionData(
color: kGreyColor,
value: val,
title: title?.isEmpty == true
? ""
: title?.length == 1
? title![0]
: title!.length == 2
? "${title[0]}\n${title[1]}"
: title.length == 3
? "${title[0]}\n${title[1]}\n${title[2]}"
: "${title[0]}\n${title[1]}\n${title[2]}\n${title[3]}",
radius: radius,
titleStyle: TextStyle(
overflow: TextOverflow.ellipsis,
fontSize: fontSize,
color: kBlackColor,
),
);
});
}
Here is the output.