【Flutter】StatefulWidgetで、GestureDetectorとif文を用いてスイッチを作ってみた

#概要
初めてのQiita投稿になります！よろしくお願いします🙇‍♂️

自分の理想とするスイッチがFlutter Packegeに無かった為、自分自身で作りました！今から解説していきたいと思います！
#目次

• 定数と変数を定義する
• setStateを使ってデータを更新する
• 全体のコード

#定数と変数を定義する
###『ボタンを押した時の定数を定義』

const activeContainerColor = Colors.green;
const inactiveContainerColor = Colors.white;
const activeTextColor = Colors.white;
const inactiveTextColor = Colors.grey;

• activeContainerColor
  『ボタンを押した時の色』
• inactiveContainerColor
  『ボタンを押してない時の色』
• activeTextColor
  『ボタンを押した時のテキストの色』
• inactiveTextColor
  『ボタンを押してない時のテキストの色』

###『ボタンを押していない時の変数を定義』

Color manContainerColor = inactiveContainerColor;
  Color womanContainerColor = inactiveContainerColor;
  Color manTextColor = inactiveTextColor;
  Color womanTextColor = inactiveTextColor;

• 上記の様に初期値として、ボタンを押していない時の色にします。

##setStateでデータを更新する

• 男性側

setState(() {
                          if (manContainerColor == inactiveContainerColor ||
                              manTextColor == inactiveTextColor) {
                            manContainerColor = activeContainerColor;
                            womanContainerColor = inactiveContainerColor;
                            manTextColor = activeTextColor;
                            womanTextColor = inactiveTextColor;
                          } else {
                            manContainerColor = inactiveContainerColor;
                            manTextColor = inactiveTextColor;
                          }
                        });

• 女性側

setState(() {
                          if (womanContainerColor == inactiveContainerColor ||
                              womanTextColor == inactiveTextColor) {
                            womanContainerColor = activeContainerColor;
                            manContainerColor = inactiveContainerColor;
                            womanTextColor = activeTextColor;
                            manTextColor = inactiveTextColor;
                          } else {
                            womanContainerColor = inactiveContainerColor;
                            womanTextColor = inactiveTextColor;
                          }
                        });

#全体のコード

import 'package:flutter/material.dart';

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

const activeContainerColor = Colors.green;
const inactiveContainerColor = Colors.white;
const activeTextColor = Colors.white;
const inactiveTextColor = Colors.grey;

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{

  Color manContainerColor = inactiveContainerColor;
  Color womanContainerColor = inactiveContainerColor;
  Color manTextColor = inactiveTextColor;
  Color womanTextColor = inactiveTextColor;

  @override

    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        setState(() {
                          if (manContainerColor == inactiveContainerColor ||
                              manTextColor == inactiveTextColor) {
                            manContainerColor = activeContainerColor;
                            womanContainerColor = inactiveContainerColor;
                            manTextColor = activeTextColor;
                            womanTextColor = inactiveTextColor;
                          } else {
                            manContainerColor = inactiveContainerColor;
                            manTextColor = inactiveTextColor;
                          }
                        });
                      },
                      child: Container(
                        child: ClipRRect(
                          borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(20),
                            bottomLeft: Radius.circular(20),
                          ),
                          child: Container(
                            color: manContainerColor,
                            child: Row(
                              children: <Widget>[
                                const Expanded(
                                  flex: 1,
                                  child: SizedBox(),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: Text(
                                    'ON',
                                    style: TextStyle(
                                      fontSize: 25,
                                      fontWeight: FontWeight.bold,
                                      color: manTextColor,
                                    ),
                                  ),
                                ),
                                const Expanded(
                                  flex: 1,
                                  child: SizedBox(),
                                ),
                              ],
                            ),
                            height: 70,
                            width: 150,
                          ),
                        ),
                      ),
                    ),
                    GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        setState(() {
                          if (womanContainerColor == inactiveContainerColor ||
                              womanTextColor == inactiveTextColor) {
                            womanContainerColor = activeContainerColor;
                            manContainerColor = inactiveContainerColor;
                            womanTextColor = activeTextColor;
                            manTextColor = inactiveTextColor;
                          } else {
                            womanContainerColor = inactiveContainerColor;
                            womanTextColor = inactiveTextColor;
                          }
                        });
                      },
                      child: Container(
                        child: ClipRRect(
                          borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(20),
                            bottomRight: Radius.circular(20),
                          ),
                          child: Container(
                            color: womanContainerColor,
                            child: Row(
                              children: <Widget>[
                                const Expanded(
                                  flex: 1,
                                  child: SizedBox(),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: Text(
                                    'OFF',
                                    style: TextStyle(
                                      fontSize: 25,
                                      fontWeight: FontWeight.bold,
                                      color: womanTextColor,
                                    ),
                                  ),
                                ),
                                const Expanded(
                                  flex: 1,
                                  child: SizedBox(),
                                ),
                              ],
                            ),
                            height: 70,
                            width: 150,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

↓実際はこの様に動きます