CODEWITHSUNDEEP
flutterdart
Rishail Siddiqui
Rishail Siddiqui

Reputation: 231

How do i place my toggle button on the right

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,
                            ),
                            ],
                           ),

Upvotes: 3

Views: 960

Answers (4)

Hadi Khani
Hadi Khani

Reputation: 186

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

Upvotes: 1

Jim
Jim

Reputation: 7601

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

Upvotes: 2

DNS
DNS

Reputation: 929

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,
                            ),
                            ],
                           ),

Upvotes: 3

Nilesh Senta
Nilesh Senta

Reputation: 5470

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,
        ),
   ],
 ),

Upvotes: 0

Related Questions