Search code examples
fluttertextflutter-layouttext-widget

Adjust new line spacing in Flutter Text Widget


So, the objective was very simple, wrap a bunch of text in a container. For that I followed this Flutter- wrapping text , but the new line created, has too much space between the previous line.

My code for the Container() with Text():

 description == ""
              ? SizedBox.shrink()
              : Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
                  //width: MediaQuery.of(context).size.width * 0.8,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      new Text(
                        description,
                        textAlign: TextAlign.left,
                        style: TextStyle(fontSize: 18),
                      ),
                    ],
                  ),
                )

Small note: If any descripton is given to Parent widget, I just use a SizeBox.shrink() as an "empety widget".

How it current is, with too much space:

Current

How it should be:

Design Goal

I know that 1º image is bigger, but that's not why line spacing is greater 😄


Solution

  • As referred from here. You can adjust the line spacing by changing the height property inside the style. 1.0 seemed fine to me but you can try setting it to 0.8, 0.7.

      Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      //width: MediaQuery.of(context).size.width * 0.8,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          new Text(
                            'You have pushed the button this many times: You have pushed the button this many times: You have pushed the button this many times: You have pushed the button this many times: You have pushed the button this many times: You have pushed the button this many times: You have pushed the button this many times:',
                            textAlign: TextAlign.left,
                            
                            style: TextStyle(fontSize: 18,   height: 1.0 ),
                          ),
                        ],
                      ),),