flutter problem with position of an element inside a Row

Question

Hello i'm trying to fix the position of 2 element inside a Row, the problem is that i can't set the position of a checkbox near of a Flatbutton. I've tried to set a right or left inside the Edgeinsets.only of the bot element (checkbox and flatbutton) but nothing happend so i leave the both Edgeinsets.only olnly with a top: 10

Here is the code :

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(top: 10.0),
      child : Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Checkbox(
            checkColor: Colors.black,
            activeColor: Colors.transparent,
            value: checkBox,
            onChanged: (bool value) {
              setState(() {
                checkBox = value;
              });
            },
          ),
          ],
      ),
      ),

      Padding(
        padding: EdgeInsets.only(top: 10.0),
        child: FlatButton(
            onPressed: _launchURL,
            child: Text(
              "Termini & Condizioni",
              style: TextStyle(
                  decoration: TextDecoration.underline,
                  color: Colors.white,
                  fontSize: 16.0,
                  fontFamily: "WorkSansMedium"),
            )),
      ),
]),

I need to set the position of the checkbox nearest the Flatbutton (Termini & Condizioni). Thank you

Image :

Answer 1

FlatButtons by default have padding on the left and right even if you don't specify it. You can see this by enabling Debug Paint in your IDE. For Android Studio and IntelliJ (I don't use VS Code, sorry), click "Flutter Performance" on the right and then click the blue box towards the top that is just above the Frame rendering times.

You'll see something like this.

Notice the blue rectangles on the left and right of "My Button."

Remove the padding from your FlatButton like this:

FlatButton(
  padding: EdgeInsets.all(0),
  child: Text("My Button"),
  onPressed: () {},
),

This removes just a little bit of space between the checkbox and the FlatButton.

Still not enough? We can do better.

We'll remove FlatButton entirely to do away with that odd spacing that is still leftover. Use an InkWell, which will give you onTap functionality and provide a nice Material ripple effect. Then, set its child to your text and add a padding of about 10 on the top and bottom to give a little more room to tap.

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        Checkbox(
            onChanged: (bool value) {
                setState(() {
                    checkBox = value;
                });
            },
            value: true,
        ),
        InkWell(
            onTap: _launchURL,
            child: Padding(
                padding: const EdgeInsets.only(top: 10, bottom: 10),
                child: Text(
                    "Termini & Condizioni",
                    style: TextStyle(
                        decoration: TextDecoration.underline,
                        color: Colors.white,
                        fontSize: 16.0,
                        fontFamily: "WorkSansMedium",
                    ),
                ),
            ),
        ),
    ],
)

End result:

(I held my finger down on it during the screenshot)

If this is still not close enough, then you'll have to use a Stack and manually position the elements, but that can get hairy.