SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Flutterで始めるモバイルアプリ開発

【Flutter開発の核となるマテリアルデザイン】スイッチ・スライダー・チップコンポーネントを紹介

Flutterで始めるモバイルアプリ開発 第17回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 前回までは、テキストやラジオボタン・チェックボックスなど、おおよそどのような環境にも共通して存在する汎用的な入力コンポーネントを紹介しました。今回紹介するコンポーネントは利用用途は限定されますが、利用者が入力しやすいようにするためのコンポーネントであるスイッチ・スライダー・チップコンポーネントを紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

スイッチ

 スイッチ(Switch)はチェックボックスのように値のON/OFFを扱うための入力コントロールです。チェックボックスよりもON/OFFの意図がより利用者に伝わる演出が可能で、図1のような表示になります。スマホの設定画面などのようにチェックボックスよりもこのスイッチの方がよく利用されています。また、その実行コード例がリスト1です。

図1:Switchを使ったコードの実行例
図1:Switchを使ったコードの実行例
[リスト1] Switchを使ったコード例(lib/switch/SwitchWidget.dartの抜粋)
class _SwitchWidget extends State<SwitchWidget> {

  // (1) 選択済みの値を保存する変数
  List _switchValues = [false,false];

  @override
  Widget build(BuildContext context) {
    return Container(
      // : (省略)
      child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           // (2) 主な利用方法
           ListTile(
             title : Text('Value 1'),
             trailing: createSwitch(0),
           ),
         // : (省略)
         ])
    );
  }
  Switch createSwitch(int index){
    return Switch(
     // (3) 現在のOF/OFF状態
      value: _switchValues[index],
      // (4) 値が変わった時
      onChanged: (bool? value) {
        setState(() {
          _switchValues[index] = value;
        });
      },
    );
  }

  Switch createDisableSwitch(bool checked){
    return Switch(
      value: checked,
      // (5) 利用できないコンポーネント
      onChanged: null,
    );
  }
}

 (1)は選択済みの値を保存する変数です。(2)のようにListTileと一緒に使われることが多いです。現在の値は(3)valueプロパティに設定します。値が変更された時には(4)のようにonChangedで指定した処理が実行されます。他の入力コンポーネントと同様に(5)onChangedにnullを設定すると、選択できないコントロールとして扱えます。

スライダー

 スライダー(Slider)は数値を指定するための入力コンポーネントです。テキストフィールドで入力するよりも、図2のように直感的に入力することが可能です。また入力できる数値の範囲も制限が可能です。

 例えば、入力値に応じて即時に結果をプレビューさせたい場合などに利用できるコンポーネントです。また、RangeSliderを使えば入力値のレンジ指定も可能です。また、その実行コード例がリスト2です。

図2:SliderとRangeSliderを使ったコードの実行例
図2:SliderとRangeSliderを使ったコードの実行例
[リスト2] SliderとRangeSliderを使ったコード例(lib/slider/SliderWidget.dartの抜粋)
class _SliderWidget extends State<SliderWidget> {

  // (1) 選択済みの値を保存する変数
  double _value1 = 10;
  double _value2 = 10;
  RangeValues _value3 = RangeValues(10,20);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
          children: [
            createSample1(context),
            Text('value1 : ${_value1}'),
            // : (省略)
          ])
    );
  }

  Slider createSample1(BuildContext context){
    // (2) シンプルな使い方
    return Slider(
      // (3) 現在の値
      value : _value1,
      // (4) 設定できる最小値と最大値
      min : 0,
      max : 100,
      // (5) 値が変わった時に処理
      onChanged: (value){
        setState(() {
          _value1 = value.round().toDouble();
        });
      },
    );
  }

  Slider createSample2(BuildContext context){
    return Slider(
      value : _value2,
      min : 0,
      max : 100,
      // (6) 選択している時の値の表示ラベル
      label: _value2.round().toString(),
      // (7) 値のステップ数
      divisions: 20,
      // (8) 色の変更
      inactiveColor: Colors.black12,
      activeColor: Colors.red,
      onChanged: (value){
        setState(() {
          _value2 = value.round().toDouble();
        });
      },
    );
  }

  RangeSlider createSample3(BuildContext context){
    // (8) 値のレンジ指定
    return RangeSlider(
      values : _value3,
      min : 0,
      max : 100,
      // (9) 表示ラベル
      labels: RangeLabels(
        _value3.start.round().toString(),
        _value3.end.round().toString()
      ),
      divisions: 20,
      onChanged: (value){
        setState(() {
          // (10) 値の設定
          _value3 = RangeValues(
              value.start.round().toDouble(),
              value.end.round().toDouble());
        });
      },
    );
  }
}

 (1)は選択済みの値を保存する変数です。最低限必要な指定は(2)のようになります。現在の値は(3)valueプロパティに設定し、(4)min/maxで最小値と最大値を設定します。値が変わると(5)onChangedに設定した処理が実行されます。設定される値はdouble型なので、実際に利用する値の精度を丸めて使うことが多いと思います。設定している値をラベルとして表示したい場合には、(6)のようにlabelに表示する文字列を指定します。

 また、値を段階的に設定することも可能です。今回の例は、値を5刻みで値を設定させるための設定を(7)divisionsプロパティに設定しています。5刻みということは0〜100で言えば20段階なので、20を設定しています。

 さらに、値のレンジ指定をしたい場合にはSliderの代わりに(8)RangeSliderを利用します。使い方はほとんどSliderと同じですが、(9)ラベルの設定ではRangeLabelsを利用し、設定される値は(10)RangeValuesになる点が異なります。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
チップ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flutterで始めるモバイルアプリ開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15629 2022/03/07 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング