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

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

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

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

Q&A

解決済

1回答

1471閲覧

flutterでdivタグ見たない役割のwidgetってありますか?

smilax

総合スコア23

Flutter

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

0グッド

1クリップ

投稿2020/07/27 06:55

それぞれのテキストフィールドの間に20pxにmarginを設置したいと思い、wrapを使って実現しようとしています。
labelは使わずにtextとtextfieldを一セットとした構造にしたいのですが、各々が独立した要素になってしまっているため、spacing: 20.0,としたところラベルの役割を果たすはずのテキストとテキストフィールドの間にも20pxのmarginが適用されてします状況です。
解決策として、textとtextfieldを一つのwidgetでラップするしようと思ったのですが、flutterにはhtmlでいうdivタグみたいなものはありますか?

flutter

1child: Wrap( 2 direction: Axis.vertical, 3 spacing: 20.0, 4 children: <Widget>[ 5 Container( 6 child: Text("", style: value.headline), 7 ), 8 Text("", style: TextStyle( 9 fontSize: Theme.of(context).textTheme.caption.fontSize, 10 fontWeight: FontWeight.bold) 11 ), 12 Container( 13 child: DropdownButton<String>( 14 value: value.agency, 15 hint: Text(""), 16 onChanged: (val) => value.agency = val, 17 items: value.agencyList 18 .map<DropdownMenuItem<String>>((Map value) { 19 return DropdownMenuItem<String>( 20 value: value["value"], 21 child: Text(value["label"]), 22 ); 23 }).toList(), 24 ), 25 ), 26 Text("氏名", style: TextStyle( 27 fontSize: Theme.of(context).textTheme.caption.fontSize, 28 fontWeight: FontWeight.bold) 29 ), 30 Container( 31 width: 295.0, 32 child: TextField(), 33 ), 34 Text("フリガナ", style: TextStyle( 35 fontSize: Theme.of(context).textTheme.caption.fontSize, 36 fontWeight: FontWeight.bold) 37 ), 38 Container( 39 width: 295.0, 40 child: TextField(), 41 ), 42 Text("性別", style: TextStyle( 43 fontSize: Theme.of(context).textTheme.caption.fontSize, 44 fontWeight: FontWeight.bold) 45 ), 46 Container( 47 margin: EdgeInsets.only(bottom: 20.0), 48 child: DropdownButton<String>( 49 value: value.genderValue, 50 onChanged: (val) => value.genderSelect = val, 51 items: value.genderList 52 .map<DropdownMenuItem<String>>((Map value) { 53 return DropdownMenuItem<String>( 54 value: value["value"], 55 child: Text(value["label"]), 56 ); 57 }).toList(), 58 )), 59 Text("生年月日", style: TextStyle( 60 fontSize: Theme.of(context).textTheme.caption.fontSize, 61 fontWeight: FontWeight.bold) 62 ), 63 ConstrainedBox( 64 constraints: BoxConstraints.expand(height: 25.0, width: 200.0), 65 child: Row( 66 children: <Widget>[ 67 Container( 68 width: 45.0, 69 child: InBirthday(length: 4), 70 ), 71 Text("年"), 72 Container( 73 width: 24.0, 74 child: InBirthday(length: 2), 75 ), 76 Text("月"), 77 Container( 78 width: 24.0, 79 child: InBirthday(length: 2), 80 ), 81 Text("日"), 82 ], 83 ), 84 ), 85 Center( 86 child: Container( 87 margin: EdgeInsets.only(top: 60.0), 88 child: RaisedButton( 89 child: Text("次へ"), 90 ), 91 )), 92 ], 93 )

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

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

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

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

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

guest

回答1

0

ベストアンサー

一応Builderウィジェットでラップできますが。

Dart

1Builder( 2 builder: (context) { 3 return Column( 4 children: [ 5 Text("氏名", style: TextStyle( 6 fontSize: Theme.of(context).textTheme.caption.fontSize, 7 fontWeight: FontWeight.bold) 8 ), 9 Container( 10 width: 295.0, 11 child: TextField(), 12 ), 13 ], 14 ); 15 }, 16}

以下のようなイメージで、ラベルとフォームのセットをそれぞれ1部品としてclass定義したほうが管理しやすくなりますし、コードも綺麗になります。

Dart

1class _SimeiForm extends StatelessWidget { 2 3 Widget build(BuildContext context) { 4 return Column( 5 children: [ 6 Text("氏名", style: TextStyle( 7 fontSize: Theme.of(context).textTheme.caption.fontSize, 8 fontWeight: FontWeight.bold) 9 ), 10 Container( 11 width: 295.0, 12 child: TextField(), 13 ), 14 ], 15 ); 16 } 17} 18 19 20class _FuriganaForm extends StatelessWidget { 21 22 Widget build(BuildContext context) { 23 return Column( 24 children: [ 25 Text("フリガナ", style: TextStyle( 26 fontSize: Theme.of(context).textTheme.caption.fontSize, 27 fontWeight: FontWeight.bold) 28 ), 29 Container( 30 width: 295.0, 31 child: TextField(), 32 ), 33 ], 34 ); 35 } 36} 37

また、Wrapウィジェットは、折り返したいときに使うものです。フォームは基本折り返したりしないと思うので、Columnなど使うといいと思います。あと、Containerでもmargin指定できます。

投稿2020/07/29 05:39

tepci

総合スコア419

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問