Flutter よく使うpickerを作成

公開:2020/10/29
更新:2020/10/29
7 min読了の目安(約6500字TECH技術記事

下記のようなpickerを作成

使用方法

まずは使いたいファイルの中でimport

profile.dart
import 'picker/height_picker.dart'; //身長ピッカー
import 'picker/body_picker.dart'; //体型ピッカー
import 'picker/age_picker.dart'; //年齢ピッカー
import 'picker/job_picker.dart'; //職種ピッカー
import 'picker/live_picker.dart'; //住まいピッカー
import 'picker/from_picker.dart'; //出身地ピッカー
import 'picker/cigarrete_picker.dart'; //タバコピッカー
import 'picker/expense_picker.dart'; //支払いピッカー

実際にpickerを配置する方法

widget内に下記の通り、実装する

profile.dart
        introAge(), //年齢ピッカー
        introHeight(), //身長ピッカー
        introBody(), //体型ピッカー
        introJob(), //職種ピッカー
        introFrom(), //出身地ピッカー
        introLive(), //住まいピッカー
        introCigarrete(), //たばこピッカー
        introExpense(), //支払いピッカー

参考

ファイル構成

1.各ピッカーのwidget実装ファイル
lib -> picker ->

###年齢ピッカーだけ参考として貼り付け

age_picker.dart
/*------------------------------------------------------------
Create date : 2020/10/26
Update data : 2020/10/26
Author : Nobuyoshi Tanaka
Description : age picker class
-------------------------------------------------------------*/

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import '../picker_list.dart';

class introAge extends StatefulWidget {
  String initialValue;
  @override
  introduce createState() => introduce();
}

class introduce extends State<introAge> {
  String m_inputValue = "";

  var selectedIndex = 0;
  String initial;
  introduce({this.initial});

  @override
  Widget build(BuildContext context) {
    return _introAge();
  }

  String _selectedAge = "年齢";
  String _initialAge = "選択";
  Widget _pickerAge(String str) {
    return Text(
      str,
      style: const TextStyle(fontSize: 32),
    );
  }

  Widget _introAge() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("年齢"),
        Container(
            child: CupertinoButton(
          child: Text("${_initialAge}"),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: MediaQuery.of(context).size.height / 2,
                  child: Column(
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          CupertinoButton(
                            child: Text("戻る"),
                            onPressed: () => Navigator.pop(context),
                          ),
                          CupertinoButton(
                            child: Text("決定"),
                            onPressed: () {
                              Navigator.pop(context);
                              setState(() {
                                _initialAge = _selectedAge;
                              });
                            },
                          ),
                        ],
                      ),
                      Container(
                        height: MediaQuery.of(context).size.height / 3,
                        child: CupertinoPicker(
                          itemExtent: 40,
                          children: ageList.map(_pickerAge).toList(),
                          onSelectedItemChanged: _onSelectedItemChanged_age,
                        ),
                      )
                    ],
                  ),
                );
              },
            );
          },
        ))
      ],
    );
  }

  void _onSelectedItemChanged_age(int index) {
    setState(() {
      _selectedAge = ageList[index];
    });
  }
}


2.ピッカーの選択肢のリスト
lib -> picker_list.dart

profile.dart
/*------------------------------------------------------------
Create date : 2020/10/25
Update data : 2020/10/25
Author : Nobuyoshi Tanaka
Description : picker list are stored in this file
-------------------------------------------------------------*/

final List<String> heightList = [
  "140cm",
  "141cm",
  "142cm",
  "143cm",
  "144cm",
  "145cm",
  "146cm",
  "147cm",
  "148cm",
  "149cm",
  "150cm",
  "151cm",
  "152cm",
  "153cm",
  "154cm",
  "155cm",
  "156cm",
  "157cm",
  "158cm",
  "159cm",
  "160cm",
  "161cm",
  "162cm",
  "163cm",
  "164cm",
  "165cm",
  "166cm",
  "167cm",
  "168cm",
  "169cm",
  "170cm",
  "171cm",
  "172cm",
  "173cm",
  "174cm",
  "175cm",
  "176cm",
  "177cm",
  "178cm",
  "179cm",
  "180cm",
  "181cm",
  "182cm",
  "183cm",
  "184cm",
  "185cm",
  "186cm",
  "187cm",
  "188cm",
  "189cm",
  "190cm",
  "191cm",
  "192cm",
  "193cm",
  "194cm",
  "195cm",
  "196cm",
  "197cm",
  "198cm",
  "199cm",
  "200cm",
];
final List<String> ageList = [
  "20",
  "21",
  "22",
  "23",
  "24",
  "25",
  "26",
  "27",
  "28",
  "29",
  "30",
  "31",
  "32",
  "33",
  "34",
  "35",
  "36",
  "37",
  "38",
  "39",
  "40",
  "41",
  "42",
  "43",
  "44",
  "45",
  "46",
  "47",
  "48",
  "49",
  "50",
  "51",
  "52",
  "53",
  "54",
  "55",
  "56",
  "57",
  "58",
  "59",
  "60",
  "61",
  "62",
  "63",
  "64",
  "65",
];
final List<String> bodyList = ["ぽっちゃり", "筋肉質", "普通", "細マッチョ", "スレンダー", "細め"];
final List<String> jobList = [
  "営業",
  "企画・マーケティング・経営・管理職",
  "Web・インターネット・ゲーム",
  "専門職(コンサルタント・士業・金融・不動産)",
  "エンジニア(機械・電気・電子・半導体・制御)",
  "医療・福祉・介護",
  "技能工・設備・交通・運輸",
  "営業",
  "事務・管理",
  "企画・マーケティング・経営・管理職",
  "サービス・販売・外食",
  "Web・インターネット・ゲーム",
  "クリエイティブ(メディア・アパレル・デザイン)",
  "専門職(コンサルタント・士業・金融・不動産)",
  "ITエンジニア(システム開発・SE・インフラ)",
  "エンジニア(機械・電気・電子・半導体・制御)",
  "素材・化学・食品・医薬品技術職",
  "建築・土木技術職",
  "技能工・設備・交通・運輸",
  "医療・福祉・介護",
  "教育・保育・公務員・農林水産・その他",
];
final List<String> liveList = [
  "北海道",
  "青森県",
  "岩手県",
  "宮城県",
  "秋田県",
  "山形県",
  "福島県",
  "茨城県",
  "栃木県",
  "群馬県",
  "埼玉県",
  "千葉県",
  "東京都",
  "神奈川県",
  "新潟県",
  "富山県",
  "石川県",
  "福井県",
  "山梨県",
  "長野県",
  "岐阜県",
  "静岡県",
  "愛知県",
  "三重県",
  "滋賀県",
  "京都府",
  "大阪府",
  "兵庫県",
  "奈良県",
  "和歌山県",
  "鳥取県",
  "島根県",
  "岡山県",
  "広島県",
  "山口県",
  "徳島県",
  "香川県",
  "愛媛県",
  "高知県",
  "福岡県",
  "佐賀県",
  "長崎県",
  "熊本県",
  "大分県",
  "宮崎県",
  "鹿児島県",
  "沖縄県",
];
final List<String> cigarreteList = ["吸う", "吸わない"];
final List<String> expenseList = ["男性が全て支払う", "男性が多めに支払う", "割り勘", "相手に合わせる"];