Switch digunakan untuk mengubah pengaturan antara on / off yang benar / salah atau lebih tepatnya true/false seperti yang akan kita gunakan dengan tipe data boolean yang dituliskan pada flutter adalah bool.

1. Start a new Flutter project

2. Pilih flutter pplication

3. Konfigurasi project anda

4. Hapus code dan jadikan main.dart menjadi seperti ini

import 'package:flutter/material.dart';

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

5. ketik stf lalu tekan enter

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

6. Tambahkan kode berikut

class _MyAppState extends State<MyApp> {
  bool pilihan = false; //false menjadi nilai default yang
 //ditentukan ketika program di jalankan

  var thisWidget = Container(
    height: 100,
    width: 300,
    decoration: BoxDecoration(
        color: Colors.red),
  );
//pada saat program dijalankan maka thisWidget dengan
// kriteria diatas menjadi default sehingga container 
//diataslah yang akan muncul ketika program pertama kali 
//dijalankan

7. Kode ini lanjutan dari diatas

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Switch"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              AnimatedSwitcher(
                child: thisWidget,
                duration: Duration(seconds: 1),
                transitionBuilder: (child, animation) => ScaleTransition(
//transitionBuilder disini adalah untuk animasi ketika switch ditekan maka fungsi ini akan melakukan animasi degan durasi selama 1 detik,
                  scale: animation,
                  child: child,
                ),
              ),

8. Kode ini lanjutan dari diatas

  Switch(
                activeColor: Colors.green,
// ketika aktif maka warna lingkarannya hijau
                inactiveTrackColor: Colors.red[200],
                inactiveThumbColor: Colors.red,
// ketika tidak aktif maka warna lingkarannya merah
                value: pilihan,

9. Hanya ada 2 kondisi dalam switch

  if (pilihan == true) {
                      thisWidget = Container(
                        key: ValueKey(1),
                        width: 100,
                        height: 100,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            color: Colors.green,),
                      );
                    } else
                      thisWidget = Container(
                        height: 100,
                        width: 300,
                        decoration: BoxDecoration(
                            color: Colors.red),
                      );
                  }

10. Full main.dart seperti berikut

 import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool pilihan = false;

  var thisWidget = Container(
    height: 100,
    width: 300,
    decoration: BoxDecoration(
        color: Colors.red),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Switch"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              AnimatedSwitcher(
                child: thisWidget,
                duration: Duration(seconds: 1),
                transitionBuilder: (child, animation) => ScaleTransition(
                  scale: animation,
                  child: child,
                ),
              ),
              Switch(
                activeColor: Colors.green,
                inactiveTrackColor: Colors.red[200],
                inactiveThumbColor: Colors.red,
                value: pilihan,
                onChanged: (newValue) {
                  pilihan = newValue;
                  setState(() {
                    if (pilihan == true) {
                      thisWidget = Container(
                        key: ValueKey(1),
                        width: 100,
                        height: 100,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            color: Colors.green,),
                      );
                    } else
                      thisWidget = Container(
                        height: 100,
                        width: 300,
                        decoration: BoxDecoration(
                            color: Colors.red),
                      );
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}