How i can place a space between my text and a icon on Row widget in flutter

Liffy
January 8, 2023
101 views
0 votes
2 Answers

I need to do something like this but I don’t know what I can do.
When I try to move with Align, the icon doesn’t move:

I tried this:

Widget AreaProfil(){
  return Column(
      children: [
        Container(
            margin: const EdgeInsets.only(left: 10.0),
            padding: const EdgeInsets.only(top: 10.0, ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
            ),
            child: Card(
              child: Container(
                child: Row(
                children:  [
                  const Text(
                    "Mon Profil",
                    style: TextStyle(
                       fontSize: 20,
                       fontWeight: FontWeight.bold,
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Row(
                      children: const [
                        Icon(Icons.edit),
                     ],
                    ),
                  ),
                 ]
                )
               ),
        )
     )
  ]
  );
}

The result of this don’t work and all the Icon rest on the left.

Answers

Need to specify width for parent group
this is example

Widget AreaProfil(BuildContext context) {
  var width = MediaQuery.of(context).size.width;
  return Column(children: [
    Container(
        width: width,
        margin: const EdgeInsets.only(left: 10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Padding(
          padding: const EdgeInsets.only(
            top: 10.0,
          ),
          child: Card(
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                const Text(
                  "Mon Profil",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Row(
                  children: [
                    Align(
                      alignment: Alignment.centerRight,
                      child: Row(
                        children: const [
                          Icon(Icons.edit),
                        ],
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Row(
                        children: const [
                          Icon(Icons.edit),
                        ],
                      ),
                    )
                  ],
                )
              ])),
        ))
  ]);
}

If you want to have a gap between several widgets and MainAxisAlignment.spaceBetween is not enough for you, you can also use Spacer or Expanded to create such a gap.

Widget AreaProfil(){
 return Column(
  children: [
    Container(
        margin: const EdgeInsets.only(left: 10.0),
        padding: const EdgeInsets.only(top: 10.0, ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Card(
          child: Row(
            children:  [
              const Text(
                "Mon Profil",
                style: TextStyle(
                   fontSize: 20,
                   fontWeight: FontWeight.bold,
                ),
              ),
              Spacer(),
              Icon(Icons.edit),
              Icon(Icons.edit),
              ),
             ],
           ),
    )
    )
  ]
);
}

Please signup or login to give your own answer.

Click here to cancel reply.