How to place these two buttons on the left?

user_17918363 0
Viewed 158

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;
                              });
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
dart flutter
3 Answers

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;
                });
              },
            ),
          ],
        ),
      ],
    )
  ]),
);
user_125015400 
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;
                          });
                        },
                      ),
                    ),

                  // ),
                ],
              ),
            ),
user_184495280

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;
                            });
                          },
                        ),
                      ),
                    ),
                  ],
                ),
user_179183630
Related