title: Flutter Fill in Blank with RichText
body: <p>I am almost done with fill in blanks implementation for my app but unfortunately I keep running into layout issues.  </p>
  
  <p>However as I keep solving the issues I am almost done with it, this is the code so far:</p>
  
  <pre class="lang-dart prettyprint-override"><code>                        RichText(
                              text: TextSpan(
                                  text: "dummy",
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 20,
                                      height: 1.5,
                                      fontWeight: FontWeight.bold),
                                  children: &lt;InlineSpan&gt;[
                                    TextSpan(
                                        text:
                                            ' to  to  to  to gdfgdfgdf to  to  to  to  to  to  to  ',
                                        style: TextStyle(
                                            height: 1.0,
                                            color: Colors.grey,
                                            fontSize: 20,
                                            fontWeight: FontWeight.bold)),
                                    WidgetSpan(
                                      alignment: PlaceholderAlignment.middle,
                                      child: SecretWord("turtle"),
                                    ),
                                    TextSpan(
                                        text:
                                            ' to  to  to  to gdfgdfgdf to  to  to  to  to  to  to  ',
                                        style: TextStyle(
                                            height: 1.0,
                                            color: Colors.grey,
                                            fontSize: 20,
                                            fontWeight: FontWeight.bold)),
                              )
  </code></pre>
  
  <p>And my SecretWord class:</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'dart:ui';
  import 'package:flutter/material.dart';
  import 'package:flutter/painting.dart';
  
  class SecretWord extends StatelessWidget {
  
      final String answer;
      int answerLength;
      String answerHint;
      double answerWidth;
  
      SecretWord(this.answer){
          this.answerLength = answer.length;
          this.answerHint = '.' * answerLength;
          this.answerWidth = this.answerLength * 15.0;
      }
  
      String value = "";
  
      @override
      Widget build(BuildContext context) {
          return Container(
              //alignment: Alignment.bottomCenter,
              width: answerWidth,
              height: null,
  
            //  margin: const EdgeInsets.only(right: 10, left: 10),
              child: TextFormField(
                  maxLines: null,
                  cursorColor: Colors.cyanAccent,
                  cursorRadius: Radius.circular(12.0),
                  cursorWidth: 2.0,
                  style: TextStyle(
                      color: (value == answer) ? Colors.amberAccent : Colors.lightGreenAccent,
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                      letterSpacing: 3,
                    //  height: 0.5,
                  ),
                  //textAlign: TextAlign.left,
                  autofocus: false,
                  maxLength: answerLength,
                  onChanged: (text) {
                      value = text;
  
                  },
  
                  decoration: new InputDecoration(
  
                      //labelText: 'Name *',
                      border: InputBorder.none,
                      focusedBorder: InputBorder.none,
                      enabledBorder: InputBorder.none,
                      errorBorder: InputBorder.none,
                      disabledBorder: InputBorder.none,
                      counterText: '',
                      hintText: answerHint,
                      hintStyle: TextStyle(
  
                          color: Colors.lightGreenAccent,
                          fontWeight: FontWeight.bold,
                          letterSpacing: 4,
                         // height: 0.5,
                      ),
                  )
              )
          );
      }
  }
  </code></pre>
  
  <p>Unfortunately this create some issues: the container height of SecretWord is superior to TextSpan, how could I succeed to reduce the height of the Container with TextFormField to match the height of TextSpan ?</p>
  
  <p><a href="https://i.stack.imgur.com/R5CHq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R5CHq.png" alt="enter image description here"></a></p>
  
  <p>Notice that the second line has more space with first and third line than what I was expecting, it is because SecretWord is considered to take more space vertically. I know the cause but not how to solve it.</p>