How can I move the switch to the top right?

Question

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?

Answer 1

As you know the Column() widget is used to arrange multiple widgets vertically and the Row() widget horizontally.

To achieve the layout you would need to wrap your widgets with Row() and to create space between the two widgets you will need the mainAxisAlignment property.

Here's the Example:

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: [
      Text("Water"),
      Switch(),
   ],
),