📺
Flutter よく使うpickerを作成
下記のような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 = [
"営業",
"企画・マーケティング・経営・管理職",
"Weｂ・インターネット・ゲーム",
"専門職（コンサルタント・士業・金融・不動産）",
"エンジニア（機械・電気・電子・半導体・制御）",
"医療・福祉・介護",
"技能工・設備・交通・運輸",
"営業",
"事務・管理",
"企画・マーケティング・経営・管理職",
"サービス・販売・外食",
"Weｂ・インターネット・ゲーム",
"クリエイティブ（メディア・アパレル・デザイン）",
"専門職（コンサルタント・士業・金融・不動産）",
"ITエンジニア（システム開発・SE・インフラ）",
"エンジニア（機械・電気・電子・半導体・制御）",
"素材・化学・食品・医薬品技術職",
"建築・土木技術職",
"技能工・設備・交通・運輸",
"医療・福祉・介護",
"教育・保育・公務員・農林水産・その他",
];
final List<String> liveList = [
"北海道",
"青森県",
"岩手県",
"宮城県",
"秋田県",
"山形県",
"福島県",
"茨城県",
"栃木県",
"群馬県",
"埼玉県",
"千葉県",
"東京都",
"神奈川県",
"新潟県",
"富山県",
"石川県",
"福井県",
"山梨県",
"長野県",
"岐阜県",
"静岡県",
"愛知県",
"三重県",
"滋賀県",
"京都府",
"大阪府",
"兵庫県",
"奈良県",
"和歌山県",
"鳥取県",
"島根県",
"岡山県",
"広島県",
"山口県",
"徳島県",
"香川県",
"愛媛県",
"高知県",
"福岡県",
"佐賀県",
"長崎県",
"熊本県",
"大分県",
"宮崎県",
"鹿児島県",
"沖縄県",
];
final List<String> cigarreteList = ["吸う", "吸わない"];
final List<String> expenseList = ["男性が全て支払う", "男性が多めに支払う", "割り勘", "相手に合わせる"];
Discussion