How to align text of different size in a row

Question

I need to do this card

Actually, I have made this one

However as you can see, the word "Dominio" is not aligned with the text in blue, and I'd like to align those two texts, I tried the solution from Align Text of different size in row to bottom, but I had no success.

This is the code I'm using

Container(
   padding: EdgeInsets.fromLTRB(10.0, 10.0, 5.0, 10.0),
   height: size.height*0.1,
   width: size.width*0.9,
   decoration: BoxDecoration(
     color: Colors.white,
     border: Border.all(color: Colors.black38),
     borderRadius: BorderRadius.circular(5.0),
     boxShadow: <BoxShadow>[
        BoxShadow(
           color: Colors.black26,
        )
     ]
   ),
   child: Row(        
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         CircleAvatar(
             radius:26,
             backgroundImage: AssetImage('assets/no-image.png'),          
         ),
         SizedBox(width: 8.0),
         Expanded(child: Text(techn.technology, style: TextStyle(color: Colors.blue, fontSize: 19))),    
         Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
               Text('Dominio', ),
               SizedBox(width: 5.0),
               _domainPercentage(_textController,  techn.technologyId, ),
               SizedBox(width: 5.0),
               GestureDetector(
                  child: Icon(Icons.clear, color: Colors.red),
                  onTap: () {
                     setState(() {  
                       _seleccion = null;
                     });
                  }
               )
            ],
         ),
      ],
   ),
);

Widget _domainPercentage(TextEditingController _controller, String tech, ){    
    Radius radius = Radius.circular(3.0);
    return Row(
      children: <Widget>[
         Container(
          height: 24,
          width: 45,
          decoration: BoxDecoration(
            color: Colors.grey,
            borderRadius: BorderRadius.horizontal(left: radius)
          ),
          child: Container(
            padding: EdgeInsets.only(left:5),
            margin: EdgeInsets.fromLTRB(0.9, 1, 0, 1),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.horizontal(left: radius),
              color: Colors.white
            ),
            child: Row(             
              children: <Widget>[
                Flexible(
                  child: TextFormField(
                    controller: _controller,
                    style: TextStyle(fontSize: 14),
                    textAlign: TextAlign.center ,
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      BlacklistingTextInputFormatter(RegExp('[.]')),
                      LengthLimitingTextInputFormatter(3)
                    ],
                    decoration: InputDecoration(
                    focusedBorder: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    ),                    
                  ),
                ),
                Text('%'),
              ],
            ),
          )
        ),
        GestureDetector(
          onTap:  (!(_controller.text.isNotEmpty && _controller.text != '0')) 
          ? ()  {
            _registerTechnology(_controller, tech);                      
          }          
          : null,                         
          child: Container(
             height: 24,
             decoration: BoxDecoration(
                border: Border.all(color: Colors.orangeAccent),
                borderRadius: BorderRadius.horizontal(right: radius)
             ),
          child: Icon(Icons.edit, color: Colors.orangeAccent,),
        ),
      )
    ],
  );    
 }

Thanks in advance.

What do you mean by "not aligned"? It seems fine to me. Do you want the text to share the same baseline or cap? — Christopher Moore, Jul 12 '20 at 20:05
My bad Christopher, and you are totally right, I would like that the texts share the same baseline. — Nestor Ariza, Jul 13 '20 at 03:06

score 2 · Accepted Answer · answered Jul 13 '20 at 06:28

2

Use below answer for exact result:

               Row(
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.ideographic,
                    children: <Widget>[

answered Jul 13 '20 at 06:28

Aamil Silawat

7,735
3
19
37

How to align text of different size in a row

1 Answers1