make space between TextSpan

user_18314434 0
Viewed 165

I am trying to make space between TextSpan What is the best way to add space between TextSpan?

child: RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: 'Don\'t have an Account?',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.w400,
              ),
            ),
            
            TextSpan(
              text: 'Sign Up',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
flutter
3 Answers

SizedBox widget can be used in between two widgets to add space between two widgets. use the SizedBox by wrapping it with a WidgetSpan widgit

child: RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: 'Don\'t have an Account?',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.w400,
              ),
            ),
            WidgetSpan(
             child: SizedBox(width: 10),
            ),
            TextSpan(
              text: 'Sign Up',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
user_178350920

If you like to get maximum space between text, you might go for Row widget. For x amount of space inside RichText you can use

TextSpan(...),
WidgetSpan(child: SizedBox(width: x)),
TextSpan(...),

RichText(
  text: const TextSpan(
    children: [
      TextSpan(
        text: 'Don\'t have an Account?',
        style: TextStyle(
          color: Color.fromARGB(255, 0, 0, 0),
          fontSize: 15.0,
          fontWeight: FontWeight.w400,
        ),
      ),

      WidgetSpan(child: SizedBox(width: 10)), ///this

      TextSpan(
        text: 'Sign Up',
        style: TextStyle(
          color: Color.fromARGB(255, 0, 0, 0),
          fontSize: 15.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
),
user_101571270

You can use the height property on the TextStyle to create some spacing:

 RichText(
          text:  TextSpan(
            children: [
              TextSpan(
                text: 'Don\'t have an Account?',
                style: TextStyle(
                  height: 1.5, //USE THIS PROPERTY
                  color: Colors.white,
                  fontSize: 15.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              SizedBox(height: 10),
              TextSpan(
                text: 'Sign Up',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),

More info in the docs: https://api.flutter.dev/flutter/painting/TextStyle/height.html

user_148392900
Related