[Flutter/dart]文字入力用フォームを作成する
概要
アプリ内でユーザに文字入力をしてもらうためのフォームを作る方法をご紹介します。
方法
新たにStatefulWidgetを作成します。なぜかというと、入力された内容に応じて「OK」ボタンを押せるかを変えたいからです。(例えばTwitterは文字数が1~140じゃないとツイートボタンを押せないですよね)
class MyTextInput extends StatefulWidget{
final bool Function(String) buttonEnable;//入力文字列をチェックする関数
String title; //入力フォームのタイトル
int maxLen; //入力文字列の最長
MyTextInput({this.buttonEnable, this.title, this.maxLen});
@override
State<StatefulWidget> createState() {
return MyTextInputState();
}
}
class MyTextInputState extends State<MyTextInput>{
bool _enableButton=false;
TextEditingController controller;
@override
void initState() {
controller=TextEditingController();
}
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(widget.title),
content: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children:[
TextField(
controller: controller,
maxLength: widget.maxLen,
onChanged: (text){
_enableButton=widget.buttonEnable(text); //1
setState(() {});
},
),
SizedBox(height: 8,),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FlatButton(
child: Text("Cancel"),
textColor: Colors.blue,
onPressed: ()async{Navigator.of(context).pop("");}
),
FlatButton(
child: Text("OK"),
textColor: Colors.blue,
onPressed: _enableButton? ()async{
Navigator.of(context).pop(controller.text);
}: null //2
),
],
),
]
)
);
}
}
このクラスは3つの引数をとります。buttonEnableが入力文字列をチェックする関数です。TextFieldのonChangeイベントで入力内容を都度チェックし(1)、問題ある場合はFlatButtonのonPressedをnullにします(2)。こうすることで、入力内容が規定外の場合はOKボタンを押せなくなります。
このクラスは以下のように使えます。
class MyHomePageState extends State<MyHomePage>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('demo'),
),
body: Container(
child: Center(
child: RaisedButton(
child: Text('input text'),
onPressed: ()async{
String input=await showInputTextForm(context);
//1 入力内容を処理
},
),
)
)
);
}
Future<String> showInputTextForm(BuildContext context)async{
String input=await showDialog<String>(
context: context,
builder:(context)=> MyTextInput(buttonEnable: checkInput, maxLen: 100, title: "入力",)
);
if (input==null){
input="";
}
return input;
}
bool checkInput(String text){
return text.length>0;
}
}
この例では文字数が0以上であればOKボタンを押せるようにしています。もちろんもっと複雑な処理も可能です(文字数の上限や既存のデータと重複がないか、など)。
1の部分で取得した入力文字列に応じた処理を書いてください。Cancelボタンが押されたら空白文字列が返されるので場合分けしてください。
こんな感じの入力フォームが表示されます。(何も入力していないのでOKボタンは無効になっています)
最新記事
すべて表示やりたいこと TextFieldで入力フォームを作りたい。 例えば入力内容が金額の場合、3桁区切りで頭に¥を付けた表記にしたい。 ただしユーザにこれらを入力させるのではなく、ユーザはあくまで数字を入力するだけで、アプリ側で自動でフォーマットしたい。 方法...
現象 やってること iosシミュレータで画像をデバイスのローカルに保存 保存したパスをデータベースに保存 アプリ立ち上げ時にデータベースから画像パスを取得し、そのパスの画像を画面上に表示 起きている現象 iosシミュレータを再起動した場合、上記3で「ファイルパスが見つからな...
やりたいこと 初期値さえ決まればあとは不変な変数がある ただし、コンストラクタ起動時にはまだ決定できない このような変数について late finalで変数を定義 (何らかのタイミングで)初期化されたかどうかをチェックし、されていなければ値を入れる(チェックしないとfina...
コメント