Zenn
🧙

Switch classを使ってみた!

2023/01/30に公開
Flutter
Dart
tech

? : でボタン表示を切り替える

Switch classを使って、会員登録をするページへ画面遷移するボタンを、一般ユーザーか特別なユーザーかで、切り替えるロジックを考えてみた。

  • 必要な知識
    • bool型の知識.
    • trueかfalseになるとわかればいい.

こんなボタンが切り替わるUI作りました!

https://youtu.be/UT9KOgkM2LY

やることは単純で、Switchと呼ばれているWidgetを使って、bool型の変数の値が変化したら、画面に表示されているボタンを切り替えるというものです。
こちらのドキュメントを参考にしました
https://api.flutter.dev/flutter/material/Switch-class.html
screenディレクトリに画面遷移するボタンがあるファイルと、画面遷移先のページのファイルを作成します。
Switch classの学習が目的なので、画面遷移先に入力フォームを作るのは省略しました🙇‍♂️

一般ユーザーページ

screen/person_page.dart
import 'package:flutter/material.dart';

class PersonPage extends StatelessWidget {
  const PersonPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('一般ユーザーとして登録'),
      ),
    );
  }
}

店舗ユーザーページ

screen/shop_page.dart
import 'package:flutter/material.dart';

class ShopPage extends StatelessWidget {
  const ShopPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.redAccent,
        title: Text('店舗ユーザーとして登録'),
      ),
    );
  }
}

Switch classを使うページ

screen/switch_page.dart
import 'package:flutter/material.dart';
import 'package:ui_sample/screen/person_page.dart';
import 'package:ui_sample/screen/shop_page.dart';

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

  @override
  State<SwitchPage> createState() => _SwitchPageState();
}

class _SwitchPageState extends State<SwitchPage> {
  // bool型の変数を定義する.
  bool light = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toggle'),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
	// Switchを使って、trueかfalseで表示するボタンを切り替える.
          Switch(
              value: light,
              activeColor: Colors.lime,
              onChanged: (bool value) {
                setState(() {
		// ここで変数に変更したスイッチの値を保存する.
                  light = value;
                });
              }),
	      // ここで三項演算子を使って、trueかfalseで、
             // ElevatedButtonの表示を切り替える.
          light
              ? ElevatedButton(
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => PersonPage()));
                  },
                  child: const Text('一般ユーザーとして登録'))
              : ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.redAccent),
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => ShopPage()));
                  },
                  child: const Text('店舗ユーザーとして登録'))
        ],
      )),
    );
  }
}

アプリを実行するmain.dart

main.dart
import 'package:flutter/material.dart';
import 'package:ui_sample/screen/switch_page.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      restorationScopeId: 'app',
      title: _title,
      home: SwitchPage(),
    );
  }
}

まとめ

Dartの文法への理解が以前よりは、あるのか画面に動きをつけるロジックを考えれらるようになりました。もっとアプリのUIに動きをつけたいですね。
動かないアプリだとなんだか面白くないもので、アニメーションもやりたいなと最近思ってたりします。

Discussion