[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_local_notificationを使って通知を作成。通知タップ時の動作も登録。 通知が来た時にアプリが立ち上がっている(foregroundでもbackgroundでも)と、期待通りの動作となる。 しかし、通知が来た時にアプリが終了していると、通知をタップしても登録した動作とならない。 原因と解決策 アプリが終了すると登録した動作は消えてしまうらしい(参考)。 Note:

概要 Firebase Messagingでメッセージを送信し、通知がタップされたら何らかの動作を実行する(例:特定のページに移動する)という場合は多いかと思います。 通知タップ時にアプリがforeground状態(つまりアプリを開いている)ならば簡単なのですが、アプリがbackground状態にある場合は少し工夫が必要です。 方法 FirebaseMessaging.onBackgroundMe

現象 FirebaseMessaging.onBackgroundMessage()でタイトルのエラーが発生。 原因と解決策 上記メソッドの引数に渡すデリゲートはトップレベル関数でなければならない。自分の場合はインスタンスメソッドを渡していたのでエラーとなった。 渡すメソッドをトップレベル関数にするとエラーは解消した。 @main.dart void main() async{ //略 F

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

納品:iPhone6.5①.png

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

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

テーマ日記:テーマを決めてジャンルごとに記録

訂正①2040×1152.jpg

ジャンルごとにテーマ、サブテーマをつけて投稿、記録できる日記アプリです。

google-play-badge.png