

テキストエディタのような、他のウィジェットを除いた最大限のスペースにTextFieldを広げたいと考えています。

そこで以下のようなコードを書いているのですが、maxlinesを調整することでTextFieldの高さは変わるのですが、デバイスごとに高さが変わり、また、キーボードを表示した際にも表示エリアの高さが変わるため、デバイスや、表示状態に合わせてTextFieldをフィットさせたいと考えています。

表示状態に合わせてフィットさせるには、どのようなコードを書けばよろしいでしょうか。

[code]

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("TEST"),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                Text(
                  'TEXT',
                ),
                Scrollbar(
                  child: new SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    reverse: true,
                    child: SizedBox(
                      child: TextField(
                        maxLines: 10,
                        decoration: new InputDecoration(
                          contentPadding: EdgeInsets.all(20.0),
                          border: InputBorder.none,
                          hintText: 'Add your text here',
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          bottomNavigationBar: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                width: double.infinity, // match_parent
                child: RaisedButton(
                  onPressed: () {},
                  child: Text(
                    "BUTTON",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }
    
[/code]


CC BY-SA 4.0
2020-11-20T05:03:27.647
72086
2020-12-21T11:23:03.620
42804
question
android flutter dart
Flutterで画面にFitするウィジェットの作成するには


このようなイメージでしょうか。ご希望の動作となれば幸いです。

[code]

    return Scaffold(
          appBar: AppBar(
            title: Text("TEST"),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                Text(
                  'TEXT',
                ),
                // Containerを最大化
                Expanded( 
                  // Containerの中にScrollbar以下を配置
                  child: Container( 
                    alignment: Alignment.topCenter,
                    child: Scrollbar(
                      child: new SingleChildScrollView(
                        scrollDirection: Axis.vertical,
                        reverse: true,
                        child: TextField(
                          autofocus: true,
                          // maxLinesを無制限のnullとする
                          maxLines:  null,
                          decoration: new InputDecoration(
                            contentPadding: EdgeInsets.all(20.0),
                          border: InputBorder.none,
                            hintText: 'Add your text here',
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          bottomNavigationBar: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                width: double.infinity, // match_parent
                child: RaisedButton(
                  onPressed: () {},
                  child: Text(
                    "BUTTON",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
    
[/code]


CC BY-SA 4.0
2020-12-21T09:51:10.340
72799
2020-12-21T11:23:03.620
2020-12-21T11:23:03.620
38099
38099
72086
answer