top of page

[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ボタンは無効になっています)



最新記事

すべて表示

【Flutter/Dart】TextFieldで文字列をフォーマットする

やりたいこと TextFieldで入力フォームを作りたい。 例えば入力内容が金額の場合、3桁区切りで頭に¥を付けた表記にしたい。 ただしユーザにこれらを入力させるのではなく、ユーザはあくまで数字を入力するだけで、アプリ側で自動でフォーマットしたい。 方法 TextInputFormatterを継承し、所望のフォーマット処理を追加することで実現可能。 例えばこの記事などを参照。 以下は個人的に躓いた

【Flutter/Dart】iosシミュレータ起動後にデバイスに保存した画像が見つからない

現象 やってること iosシミュレータで画像をデバイスのローカルに保存 保存したパスをデータベースに保存 アプリ立ち上げ時にデータベースから画像パスを取得し、そのパスの画像を画面上に表示 起きている現象 iosシミュレータを再起動した場合、上記3で「ファイルパスが見つからない」というエラーが出る 原因 保存時のディレクトリを getApplicationDocumentsDirectory() に

【Flutter/dart】late変数が初期化されたかのチェック

やりたいこと 初期値さえ決まればあとは不変な変数がある ただし、コンストラクタ起動時にはまだ決定できない このような変数について late finalで変数を定義 (何らかのタイミングで)初期化されたかどうかをチェックし、されていなければ値を入れる(チェックしないとfinalに値を代入したエラーになるので) この場合、「初期化されたかどうか」はどのようにチェックしたらいいのか分からなかった nul

Comentarios


あなたの買い物をサポートする
アプリ Shop Plan

iphone6.5p2.png

​いつ何を買うかの計画を立てられるアプリです。

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

靴を大切にしよう!靴管理アプリ SHOES_KEEP

納品:iPhone6.5①.png

靴の履いた回数、お手入れ回数を管理するアプリです。

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

「後で読む」を忘れないアプリ ArticleReminder

気になった​Webサイトを登録し、指定時刻にリマインダを送れるアプリです

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page