I have a little problem. I would like to force the middle text to the center in the row.

Picure of my example

Here is the code I am using :

Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Icon(Icons.close),
                    ],
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Modifier le profil",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                  Row(
                    children: [
                      TextButton(
                          child: Text(
                            "Enregistrer",
                            style: TextStyle(
                                color: d_grey_icon,
                                fontSize: 15,
                                fontWeight: FontWeight.w400,
                                decoration: TextDecoration.underline),
                          ),
                          onPressed: () {}),
                    ],
                  )
                ],
              ),

CodePudding user response：

if you want absolute center you should use Stack instead of Row, for Row you have to give every child the same width to make it center

CodePudding user response：

like this...

return Row(
      children: [
        Expanded(
          flex: 1,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Icon(Icons.close),
          ),
        ),
        Expanded(
          flex: 1,
          child: Text(
            "Modifier le profil",
            textAlign: TextAlign.center,
          ),
        ),
        Expanded(
          flex: 1,
          child: TextButton(
              child: Align(
              alignment: Alignment.centerRight,
               child: TextButton(
                child: Text(
                  "Enregistrer",                
                 ),
                 onPressed: () {}),
               ),
         ),
      ],
    );

CodePudding user response：

Please check this updated code. I have removed the unnecessary Rows from your code.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
      Icon(Icons.close),
      const SizedBox(width: 35,),
      Expanded(
        child: Text(
           "Modifier le profil",
           style: TextStyle(
               color: Colors.black,
               fontSize: 15,
               fontWeight: FontWeight.w600),
              textAlign: TextAlign.center,
              ),
             ),
            TextButton(
              child: Text(
                  "Enregistrer",
                  style: TextStyle(
                     color: Colors.white,
                      fontSize: 15,
                      fontWeight: FontWeight.w400,
                      decoration: TextDecoration.underline),
                   ),
                onPressed: () {})
                ],
              ),

CodePudding user response：

You could try to use the Spacer Widget in combination with the Expanded widget, try to start from this piece of code to tinker it with the expanded widget.

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Icon(Icons.close),
      Spacer(),
      Text(
        "Modifier le profil",
        style: TextStyle(
            color: Colors.black, fontSize: 15, fontWeight: FontWeight.w600),
      ),
      Spacer(),
      TextButton(
          child: Text(
            "Enregistrer",
            style: TextStyle(
                color: d_grey_icon,
                fontSize: 15,
                fontWeight: FontWeight.w400,
                decoration: TextDecoration.underline),
          ),
          onPressed: () {}),
    ],
  )