Flutter : force text to center in a row

user_19136358 0
Viewed 60

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: () {}),
                    ],
                  )
                ],
              ),
flutter-layout flutter
4 Answers

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: () {})
                ],
              ),
user_169851460

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

user_182009620

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: () {}),
               ),
         ),
      ],
    );
user_124469540

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: () {}),
    ],
  )
user_104332910
Related