Q&A
実現したいこと
検索画面を作成しています。
イメージ図のようにキーワード入力エリア(TextFormField)、検索ボタン(ElevatedButton)を用意して、検索ボタンが押下されたら以下のように処理したいと考えています。
キーワードを入力してボタンを押下した場合：下の部分に結果を表示(まだコーディングが出来ていません)
キーワードを入力せずにボタンを押下した場合：「キーワード未入力です」のメッセージを表示
キーワード入力の有無の判断として、テキストが未入力の状態かどうかで判断しようと思い、三項演算子を使って有無の処理を分けたいと思いましたが、三項演算子を使って、それぞれメソッドに出して処理を行おうと思いましたが、うまくいきませんでした。
前提・試したこと
＜キーワードを入力せずにボタンを押下した場合に試したこと＞
●「キーワードが未入力です」のメッセージを表示するために
・三項演算子のfalse「：」の後に処理を記載しても表示されない。
・「検索」ボタン押下したかどうかのフラグを持たせ、押下した場合の処理を「//検索ボタン押下後の処理」の下に三項演算子を用いてコーディングしたが表示されない。(そもそもこういう書き方が間違っているかもしれません)
●判断材料
・TextFormFieldが入力されていないかテキストコントローラーの値で判断
(現在)TextFormFieldに入力された時に、用意したフラグ(_isChangeInput)を使って判断
●メッセージが表示されない
・「：」のfalseの場合の処理に、直接テキスト表示処理(★～★の処理)を記載しても何も表示されない。
onPressed: () => _isChangeInput
? 省略
: Padding(★から★), 省略
※★から★⇒下記のWidget _messegage(){ } の処理にある★～★までの事です。
・メソッドで処理をさせた場合に、以下のようにしてもテキストで表示されない。
「TitleTextCreate」は、別dartでテキストの表示処理を行っています。
onPressed: () => _isChangeInput
? 省略
: _messegage(), 省略
Widget _messegage(){
return Padding(
★padding: const EdgeInsets.only(top: 200.0),
child: Center(
child: TitleTextCreate(
title: ("キーワードが未入力です"),
size: 20,
color: Colors.redAccent,
radius: 18,
shadow: Colors.white),
),★
),
}
発生している問題・エラーメッセージ
特にエラーが発生しているわけではないので、どう対応していいかわからない状態です。
該当のソースコード
//テキストコントローラー初期化 final TextEditingController _textEditController = TextEditingController(); //フォーカスの初期化 final focusNode = FocusNode(); //入力値変更の通知の初期化 bool _isChangeInput = false; @override Widget build(BuildContext context) { return Focus( focusNode: focusNode, child: GestureDetector( onTap: focusNode.requestFocus, child: Scaffold( //キーボードによって画面サイズを変更させないように resizeToAvoidBottomInset: false,[ ---- 省略 ------ body: SafeArea( child: Stack(children: [ ---- 省略 ------ //入力エリア・検索ボタン Padding( padding: const EdgeInsets.fromLTRB(10.0, 100.0, 10.0, 0), child: Row( children: [ Expanded(flex: 3, child: _textFormField()), const SizedBox(width: 4.0), Expanded( flex: 1, child: ButtonWithNormal( //検索ボタン押下後の処理 onPressed: () => _isChangeInput //TODO 入力値に変更がある場合 ? _searchKeyword() //TODO キーワード未入力の場合はTooltipでメッセージを表示 : const Tooltip( message: 'キーワードが未入力です!!', height: 50, verticalOffset: 20, preferBelow: true, textStyle: TextStyle( fontFamily: "ZenGoR", fontWeight: FontWeight.bold, fontSize: 15.0, color: Colors.pink), decoration: BoxDecoration( color: Colors.grey, borderRadius: BorderRadius.all(Radius.circular(100)), ), waitDuration: Duration(seconds: 2), showDuration: Duration(milliseconds: 600), triggerMode: TooltipTriggerMode.tap, ), label: "検索", color: Colors.white, height: 70), ) ], ), ), ---- 省略 ------ ]), ), ), ), ); } ---- 省略 ------
_textFormFieldOnChanged(String value) { //TextFormFieldの値が変更されているか _isChangeInput = true; }
補足情報（FW/ツールのバージョンなど）
Flutter 3.7.3
Dart 2.19.2
※AndroidStudioで開発
進捗があったので追記します
ElevatedButtonでの分岐処理を一旦諦めて、以下のように対応してみたところメッセージ表示は出来るようになりました。
ただ、この方法が正しいかどうかはわかりません。
＜メッセージ表示の条件＞
①検索ボタン押下時のフラグをセット
②TextFieldの入力値が空(余分な余白を削除後の値)で①のフラグがtureの場合はメッセージ表示
--- 省略 --- //検索ボタン押下後の処理 onPressed: () { if (_isChangeInput) { _searchKeyword(); _isButtonClicked = true; } else { _isButtonClicked = false; } --- 省略 --- //メッセージ表示条件：TextFieldに入力値がない＆検索ボタン押下された (_textEditController.text.replaceAll(RegExp(r"\s+"), '') == '' && _isButtonClicked == true) ? Center( child: Container( height: 40.0, width: 300.0, color: Colors.limeAccent, child: const Text("キーワードが未入力です!!", style: TextStyle( fontSize: 25.0, fontFamily: "ZenGoR", fontWeight: FontWeight.bold, color: Colors.red, shadows: [ Shadow( color: Colors.limeAccent, blurRadius: 50.0 ) ] ), textAlign: TextAlign.center), ), ) //何もしない : const SizedBox.shrink(),
以下の場合は、まだメッセージの表示が実現できておりませんので、継続して考えています。
初めて検索画面を起動した時に、TextFieldに入力せずに検索ボタンを押下した時。
(「初めて検索画面を起動した」という状態を判別していないため)
もし、他にもこんな方法があるという方がいらっしゃれば是非教えて頂けるとありがたいです。
アドバイス適応後のコーディング
アドバイスを頂いた後に、色々試してみて「Fluttertoast」を以下のように適応してみたところ、今までの中で一番理想形に近づきました。
アドバイスありがとうございました。
--- 省略 ----- //検索ボタン押下後の処理 onPressed: (_isChangeInput) ? () => _searchKeyword() //メッセージ表示条件：TextFieldに変更通知がある、TextFieldに入力されていない : () => ((_textEditController.text .replaceAll(RegExp(r"\s+"), '')) == '') ? Fluttertoast.showToast( msg: "キーワードが未入力です!!", toastLength: Toast.LENGTH_SHORT, backgroundColor: Colors.lightBlue, textColor: Colors.white, fontSize: 20.0) : const SizedBox.shrink()), --- 省略 -----
回答1件
0
ベストアンサー
Tooltip()はコンストラクタなので、呼び出しただけではTooltipは表示されないですね。
メッセージを表示させたい場合はshowModalBottomSheet/showDialogを使うか、
fluttertoastなどのそれ用のパッケージを使うのが一般的かと思います。
https://github.com/flutter/flutter/blob/master/examples/api/lib/material/bottom_sheet/show_modal_bottom_sheet.0.dart#L21
投稿2023/03/09 12:38
総合スコア615
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/03/10 01:05 編集
2023/03/13 06:29