How do i place my toggle button on the right

user_13657347 0
Viewed 341

I am trying to place my toggle button on the right but cant seem to find a solution to my problem

Row(
                          children: [
                            Text("Enable QR Code"),
                              Switch(value: isSwitched, onChanged:(value){
                              setState(() {
                                isSwitched=value;
                                print(isSwitched);
                              });
                            },
                              activeTrackColor: Colors.lightGreenAccent,
                              activeColor: Colors.green,
                            ),
                            ],
                           ),

dart flutter
4 Answers

use row mainAxisAlignment property

Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text("Enable QR Code"),
                              Switch(value: isSwitched, onChanged:(value){
                              setState(() {
                                isSwitched=value;
                                print(isSwitched);
                              });
                            },
                              activeTrackColor: Colors.lightGreenAccent,
                              activeColor: Colors.green,
                            ),
                            ],
                           ),
user_31770540 
Row(
                          children: [
                            Text("Enable QR Code"),
                            Spacer(),
                              Switch(value: isSwitched, onChanged:(value){
                              setState(() {
                                isSwitched=value;
                                print(isSwitched);
                              });
                            },
                              activeTrackColor: Colors.lightGreenAccent,
                              activeColor: Colors.green,
                            ),
                            ],
                           ),
user_112764160

Either you should wrap text inside Expanded widget or use Switch List Tile and use property controlAffinity.

Row(children: [
      Expanded(child: Text("Enable QR Code")),
      Switch(value: isSwitched, onChanged:(value){
          setState(() {
             isSwitched=value;
             print(isSwitched);
          });
         },
         activeTrackColor: Colors.lightGreenAccent,
         activeColor: Colors.green,
        ),
   ],
 ),
user_43033520

In Row widget you can use mainAxisAlignment property to set alignment to child widgets so in your case just add: mainAxisAlignment: MainAxisAlignment.spaceBetween,

Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Enable QR Code"),
          Switch(value: isSwitched,
            onChanged:(value){
            setState(() {
              isSwitched=value;
              print(isSwitched);
            });
          },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          ),
        ],
      ),

  • start: Place the children as close to the start of the main axis as possible

  • end: Place the children as close to the end of the main axis as possible.

  • center: Place the children as close to the middle of the main axis as possible.

  • spaceAround: Place the free space evenly between the children as well as half of that space before and after the first and last child.

  • spaceBetween: Place the free space evenly between the children.

  • spaceEvenly: Place the free space evenly between the children as well as before and after the first and last child

MainAxisAlignment

user_144882140
Related