Space around Text and Layout in Flutter

Question

How can I remove the space around the text so the view is more precise? Or maybe my layout is generally bad formatted? I'm building a custom timeline and I'm having issues with this text wrapped inside of a Column, but not sure how to remove the white space around the text.

This is my current layout:

I wanted to do a more in-line layout so the circle, 'PICK UP' text and 'JKF AIRPORT..' text are all in line to make it more elegant. Here is the code:

Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            // circle for timeline
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Padding(
                padding: EdgeInsets.only(right: 8.0),
                child: buildCircle(result),
              ),
            ),
            //Text for timeline
            Flexible(
              flex: 4,
              fit: FlexFit.loose,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Flexible(
                    fit: FlexFit.loose,
                    flex: 2,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "PICK UP",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.6),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w500,
                            fontSize: 10.0,
                            height: 1.6,
                            letterSpacing: 1.5,
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text(
                          '11:00',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.6),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w400,
                            fontSize: 14.0,
                            height: 1.43,
                            letterSpacing: 0.25,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 32,
                  ),
                  Flexible(
                    flex: 6,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'JKF Airport, New York',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.87),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w400,
                            fontSize: 16.0,
                            height: 1.5,
                            letterSpacing: 0.15,
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text(
                          'FLIGHT 6E 2341',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.87),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w400,
                            fontSize: 16.0,
                            height: 1.5,
                            letterSpacing: 0.15,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),

This is the desirable layout:

I did not remove the TextStyle because maybe that is causing some issues so I left it just in case.

Thanks you in advance for your help!

Answer 1

The main thing that is adding vertical space to the text is the height: 1.5 settings. The extensive use of Flexible is also not needed.

With changes I was able to get it to look like this:

Here's the edited code:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  //mainAxisAlignment: MainAxisAlignment.start,
  children: [
    // circle for timeline
    Padding(
      padding: EdgeInsets.only(right: 8.0),
      child: Container(width: 20, height: 20, color: Colors.red),
    ),
    //Text for timeline
    Row(
      //crossAxisAlignment: CrossAxisAlignment.start,
      //mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "PICK UP",
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.6),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w500,
                fontSize: 10.0,
                height: 1.6,
                letterSpacing: 1.5,
              ),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              '11:00',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.6),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w400,
                fontSize: 14.0,
                height: 1.43,
                letterSpacing: 0.25,
              ),
            ),
          ],
        ),
        SizedBox(
          width: 32,
        ),
        Column(
          //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'JKF Airport, New York',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.87),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w400,
                fontSize: 16.0,
                // height: 1.5,
                letterSpacing: 0.15,
              ),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'FLIGHT 6E 2341',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.87),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w400,
                fontSize: 16.0,
                // height: 1.5,
                letterSpacing: 0.15,
              ),
            ),
          ],
        ),
      ],
    ),
  ],
)

Answer 2

wrap your text into container and give them height width. after wrap your text again with FittedBox. it will work

your code will like this ..

Container(
      height: height,
      width: width,
      child: FittedBox(
        child: Text("Your text"),
      ),
    );

it's work for me