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?

CodePudding user response：

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

CodePudding user response：

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