CODEWITHSUNDEEP
flutterflutter-layout
Mika
Mika

Reputation: 21

Flutter : force text to center in a row

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

Upvotes: 2

Views: 473

Answers (4)

mister_cool_beans
mister_cool_beans

Reputation: 1533

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

Upvotes: 1

Abrar Malekji
Abrar Malekji

Reputation: 41

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

Upvotes: 1

FrancescoPenasa
FrancescoPenasa

Reputation: 280

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

Upvotes: 0

Siddharth Mehra
Siddharth Mehra

Reputation: 1899

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

Upvotes: 2

Related Questions