Hi I'm trying to implement Toggle Switch in MCQ Quiz App. But the text overflow is ellipsis. I have tried customTextStyles but no change in UI. I just want the overflow to be visible not ellipsis. Can Someone help me with this... ???
ToggleSwitch(
initialLabelIndex: 0,
animate: true,
isVertical: true,
minWidth: MediaQuery.of(context).size.width,
animationDuration: 400,
activeBgColor: [Colors.green],
inactiveBgColor: hexToColor("#928FFF"),
minHeight: 70,
totalSwitches: 4,
borderWidth: 30,
cornerRadius: 20,
customTextStyles: const [
TextStyle(
overflow: TextOverflow.visible, fontSize: 17, inherit: false)
],
labels: [
"A.) ${answers[0]}",
"B.) ${answers[1]}",
"C.) ${answers[2]}",
"D.) ${answers[3]}"
],
onToggle: (index) {
print('switched to: ${index}');
},
),
You can't show multiple lines in Toggle switch
widget, check out this link for more details.
You can simply handle this using
listView widget
and simpleselection logic
for your quizmultiline questions
. check example for one question you can handle for all quiz questions.
final answers = [
"work done in both is same but the rate of",
"work done in rolling a stone is less than in lorem ipsum ...",
"work done in rolling is more than in lifting",
"work done in lifting the stone is equal to lorem ipsum lorem ipsum"
];
int selectedIndex = -1; // By default no any answer selected.
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: ListView.builder(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: 4,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
setState(() {
selectedIndex = index;
});
},
child: Container(
color:
selectedIndex == index ? Colors.green : Colors.purple,
child: Padding(
padding: const EdgeInsets.all(12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("${String.fromCharCode((65 + index))})."), // OPTIONS CHAR
const SizedBox(width: 8),
Expanded(child: Text(" ${answers[index]}"))
],
),
),
),
);
}),
)