質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

1回答

1374閲覧

TextFormFieldの横幅を画面に合わせて可変にしたい

tetsu15

総合スコア1

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2021/05/11 01:34

TextFormFieldを画面のサイズに合わせて可変にしたいと思っています。
widthを消してみたりしましたが、表示がデグレってしまい成功しませんでした。
もし、方法が分かる方がいればご教示ください。

イメージ説明

Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Padding( padding: const EdgeInsets.only(right: 8.0, left: 8.0), child: Container( width: 280, height: 40, decoration: BoxDecoration( color: Color(0xffefefef), border: Border.all(color: Colors.white), borderRadius: BorderRadius.circular(10), ), child: Row(children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: Icon(Icons.search, color: Color(0xff999999)), ), Expanded( child: TextFormField( keyboardType: TextInputType.multiline, maxLines: 1, decoration: InputDecoration( hintText: '商品を検索', border: InputBorder.none, //ToDo 検索機能を実装する ), ), ), ]), ), ), IconButton( icon: const Icon( Icons.shopping_cart, color: Colors.grey, ), onPressed: () { //ToDo カートの中身を見る }, ), ]), ]),

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

AppBarに表示するという理解で合ってますか?
Flexible や Spacer の flex: で割合指定するのはどうでしょうか。

dart

1appBar: AppBar( 2 actions: [ 3 Spacer(flex: 2), 4 Flexible( 5 flex: 1, 6 child: Padding( 7 padding: const EdgeInsets.all(8.0), 8 child: TextFormField( 9 keyboardType: TextInputType.text, 10 maxLines: 1, 11 decoration: InputDecoration( 12 filled: true, 13 fillColor: Color(0xffefefef), 14 prefixIcon: Icon(Icons.search), 15 suffixIcon: IconButton( 16 icon: Icon(Icons.shopping_cart), 17 onPressed: () {}, 18 ), 19 contentPadding: EdgeInsets.all(8), 20 hintText: '商品を検索', 21 border: OutlineInputBorder( 22 borderRadius: BorderRadius.circular(12)), 23 ), 24 ), 25 ), 26 ), 27 ], 28 ),

参考

投稿2021/06/01 19:54

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問