How can I move the switch to the top right?

Issue

import 'dart:html';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool switcht1 = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter - tutorialkart.com'),
        ),
        body: Column(
          children: [
            Container(
              width: double.infinity,
              height: 50,
              color: Colors.amber,
              child: Text("Water"),
              padding: EdgeInsets.only(top: 15),
            ),
            Switch(
              value: switcht1,
              onChanged: (value) {
                setState(() {
                  switcht1 = value;
                  print(switcht1);
                });
              },
              activeTrackColor: Colors.lightGreenAccent,
              activeColor: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

I’m new to flutter.
I’m not quite familiar with the column and row concepts yet, but I’m working on it.
When I want to put the switch in a column, it stays out.
How can I move the switch like in the picture?

Solution

in the case you have to use a Row widget like this :

Column(
      children: [
        Container(
          height: 50,
          color: Colors.amber,
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("Water"),
                Switch(
                  value: switcht1 ,
                  onChanged: (bool value) {
                    setState(() {
                      switcht1 = value;
                      print(switcht1);
                    });
                  },
                  activeTrackColor: Colors.lightGreenAccent,
                  activeColor: Colors.green,
                ),
              ]
          ),
          padding: EdgeInsets.only(top: 15),
        ),

      ],
    ),

The result :

or use a ListTile :

Column(
      children: [
        Container(
          height: 50,
          color: Colors.amber,
          child: ListTile(
              leading: Text("Water"),
              trailing : Switch(
              value: switcht1 ,
              onChanged: (bool value) {
                setState(() {
                  switcht1 = value;
                  print(switcht1);
                });
              },
              activeTrackColor: Colors.lightGreenAccent,
              activeColor: Colors.green,
            ),
          ),
          padding: EdgeInsets.only(top: 15),
        ),

      ],
    ),

The result

Answered By – Ma Jeed

Answer Checked By – Jay B. (FlutterFixes Admin)