How to place these two buttons on the left?

Question

I'm trying to put these two buttons on the left, but to no avail. Can you give me any tips on how to make them stay on the left margin? I've tried to remove the Container and align using only the Row, but without success.

Container(
                  alignment: AlignmentDirectional.bottomStart,
                  padding: EdgeInsets.fromLTRB(0.0, 5.0, 70.0, 5.0),
                  child: Row(
                    children: [
                      Expanded(
                        child: ListTile(
                          title: const Text('CPF'),
                          leading: Radio<SingingCharacter>(
                            value: SingingCharacter.cpf,
                            groupValue: _character,
                            onChanged: (SingingCharacter? value) {
                              setState(() {
                                _character = value;
                              });
                            },
                          ),
                        ),
                      ),
                      Expanded(
                        child: ListTile(
                          title: const Text('RNE'),
                          leading: Radio<SingingCharacter>(
                            value: SingingCharacter.rne,
                            groupValue: _character,
                            onChanged: (SingingCharacter? value) {
                              setState(() {
                                _character = value;
                              });
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

Answer 1

the closest I got was using this code:

Row(
                  children: [
                    Expanded(
                      child:
                      ListTile(
                        contentPadding: EdgeInsets.only(left: 0.0,),
                        title: const Text('CPF'),
                        leading: Radio<SingingCharacter>(
                          value: SingingCharacter.cpf,
                          groupValue: _character,
                          onChanged: (SingingCharacter? value) {
                            setState(() {
                              _character = value;
                            });
                          },
                        ),
                      ),
                    ),
                    Expanded(
                      child:
                      ListTile(
                        contentPadding: EdgeInsets.only(left: 0.0,),
                        title: const Text('RNE'),
                        leading: Radio<SingingCharacter>(
                          value: SingingCharacter.rne,
                          groupValue: _character,
                          onChanged: (SingingCharacter? value) {
                            setState(() {
                              _character = value;
                            });
                          },
                        ),
                      ),
                    ),
                  ],
                ),

Answer 2

Container(
              alignment: AlignmentDirectional.bottomStart,
              padding: EdgeInsets.fromLTRB(0.0, 5.0, 70.0, 5.0),
              child: Row(
              mainAxisAlignment: MainAxisAlignment.start, // add this line
                children: [
                 // Expanded(
                  //  child: 
                ListTile(
                      title: const Text('CPF'),
                      leading: Radio<SingingCharacter>(
                        value: SingingCharacter.cpf,
                        groupValue: _character,
                        onChanged: (SingingCharacter? value) {
                          setState(() {
                            _character = value;
                          });
                        },
                      ),
                    ),

                  // ),
                  // Expanded(
                  //  child: 

                   ListTile(
                      title: const Text('RNE'),
                      leading: Radio<SingingCharacter>(
                        value: SingingCharacter.rne,
                        groupValue: _character,
                        onChanged: (SingingCharacter? value) {
                          setState(() {
                            _character = value;
                          });
                        },
                      ),
                    ),

                  // ),
                ],
              ),
            ),

Answer 3

ListTile occupies an entire row, and if you wrap each ListTile with Expanded widget then it gets divided into 2 ListTile in the same row. So if you want to create 2 Radio's and align them into the left row, then don't use listTile and expanded.

Instead create a row, pass 2 columns. Each column will have 2 Widgets. A text widget and a Radio Widget. That's how you can achieve your desired outlook.

Scaffold(
  appBar: AppBar(),
  body: Column(children: [
    Row(
      children: [
        Column(
          children: [
            const Text("Radio 1"),
            Radio<SingingCharacter>(
              value: SingingCharacter.cpf,
              groupValue: _character,
              onChanged: (SingingCharacter? value) {
                setState(() {
                  _character = value;
                });
              },
            ),
          ],
        ),
        const SizedBox(
          width: 20,
        ),
        Column(
          children: [
            const Text("Radio 2"),
            Radio<SingingCharacter>(
              value: SingingCharacter.rne,
              groupValue: _character,
              onChanged: (SingingCharacter? value) {
                setState(() {
                  _character = value;
                });
              },
            ),
          ],
        ),
      ],
    )
  ]),
);