So I have two SwitchListTiles on my modal Page, and the problem is that the text doesn't fit into it. (it takes 3 lines, but should 1) How can I make it to be in one single line, without decreasing it's font size

child: SwitchListTile(
        value: state.filter.flagId == null ? false : true,
        onChanged: (newValue) =>
            context.read<FilterBloc>().add(HotPressed(newValue)),
        title: Text(
          AppLocalizations.of(context)!.hotAdds.capitalize(),
          style: FlutterFlowTheme.dark50016.copyWith(),
        ),
        tileColor: FlutterFlowTheme.white,
        activeColor: FlutterFlowTheme.primaryColor,
        dense: true,
        controlAffinity: ListTileControlAffinity.trailing,
      ),

I was thinking that the possible answer could be to decrease the distance between tile, but don't know how to do it

CodePudding user response：

Just add "maxLines: 1" to Text widget

title: Text(
   AppLocalizations.of(context)!.hotAdds.capitalize(),
   style: FlutterFlowTheme.dark50016.copyWith(),
   maxLines: 1,
 ),

CodePudding user response：

There is default padding on the outer edges and also between the text and the switch. From what I can see the outer padding (the padding to the right of the switch and to the left of the text) defaults to 16. You can change this by adding contentPadding as an input to SwitchListTile and set the value to something smaller than 16:

contentPadding: EdgeInsets.symmetric(horizontal: 5),

But I'm not sure if you can change the padding between the text and the switch.

CodePudding user response：

wrap your text widget to Flexible and trim() your text to avoid enter(\n) as string. maxLines =1.

title: Flexible(
              child: Text(
               AppLocalizations.of(context)!.hotAdds.capitalize().trim(),
                style: FlutterFlowTheme.dark50016.copyWith(),
                maxLines: 1,
              ),
            ),