Flutter Toggle Switch Text Overflow

Question

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}');
          },
        ),

Answer 1

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 simple selection logic for your quiz multiline 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]}"))
              ],
            ),
          ),
        ),
      );
    }),
)

output: