Flutter - 列内のSingleChildScrollViewの干渉

Question

私は、列とうまく動作する画面を作成しましたが、キーボードのためにスクロールする必要がありました。

SingleChildScrollViewまたはListViewという属性を挿入すると、MainAxisAlignment.spaceBetweenは機能しなくなります。

解決策はありましたか？画面はロールしないSingleChildScrollViewとFloatingActionButtonなし

GIFは画面SingleChildScrollViewスクリーンロールと

のGIFの一番下にあり、彼FloatingActionButtonは、画面の一番下にありません

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(  
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),   
     body: new SingleChildScrollView(
     child: new Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, 
      crossAxisAlignment: CrossAxisAlignment.center, 
      children: <Widget>[ 
       new Container(
       child: new Column(
        children: <Widget>[ 
        new TextField(
         decoration: const InputDecoration(
         labelText: "Description", 
        ), 
         style: Theme.of(context).textTheme.title, 
        ), 
        new TextField(
         decoration: const InputDecoration(
         labelText: "Description", 
        ), 
         style: Theme.of(context).textTheme.title, 
        ), 
        new TextField(
         decoration: const InputDecoration(
         labelText: "Description", 
        ), 
         style: Theme.of(context).textTheme.title, 
        ), 
        ], 
       ) 
      ), 
       new Container(
       margin: new EdgeInsets.only(bottom: 16.0), 
       child: new FloatingActionButton(
        backgroundColor: new Color(0xFFE57373), 
        child: new Icon(Icons.check), 
        onPressed:(){} 
       ),      
      ) 
      ], 
     ), 
    )    
    ); 
    } 
} 

Answer 1

私はあなたがここでやっている方法でFloatingActionButtonを使用しないことをお勧めします。 FloatingActionButtonは常に常時画面上にある必要がある操作に使用する必要があります。 RaisedButtonやFlatButtonのように、スクロールできる他のボタンタイプについては、Material guidelines on button usageを参照してください。 RaisedButtonをここで使用することもできますが、画面をダイアログにして保存の操作をAppBarに入れてください（他の質問ではsuggested）。

RaisedButtonまたはFlatButtonを使用する場合は、通常、スクロール可能にはコンテナのサイズに基づいて項目の間隔を変更しないことに注意してください。 MainAxisAlignment.spaceBetweenを使用する代わりにPaddingをRaisedButtonの周囲に入れて、TextFieldの要素と区別することができます。これにより、回転や画面の大きさに関係なく、キーボードが上がっているかどうかにかかわらず、同じ間隔で配置されます。

Answer 2

登録するには、以下のコードに従ってください。

MainAxisAlignment.spaceBetweenは、画面のサイズに応じて動的パディングに置き換えられました。

import 'package:flutter/material.dart'; 
import 'dart:ui' as ui; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(  
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> { 
    @override 
    Widget build(BuildContext context) { 
    final ui.Size logicalSize = MediaQuery.of(context).size; 
    final double _height = logicalSize.height; 
    return new Scaffold(
     appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),   
     body: new SingleChildScrollView(
     child: new Column(
      //mainAxisAlignment: MainAxisAlignment.spaceBetween, 
      crossAxisAlignment: CrossAxisAlignment.center, 
      children: <Widget>[ 
       new Container(
       height: 300.0, 
       child: new Column(
        children: <Widget>[ 
        new TextField(
         decoration: const InputDecoration(
         labelText: "Description", 
        ), 
         style: Theme.of(context).textTheme.title, 
        ), 
        new TextField(
         decoration: const InputDecoration(
         labelText: "Description", 
        ), 
         style: Theme.of(context).textTheme.title, 
        ), 
        new TextField(
         decoration: const InputDecoration(
         labelText: "Description", 
        ), 
         style: Theme.of(context).textTheme.title, 
        ), 
        ], 
       ) 
      ), 
       new Container(
       padding: new EdgeInsets.only(top: (_height - 450.0)), 
       margin: new EdgeInsets.only(bottom: 16.0), 
       child: new FloatingActionButton(
        backgroundColor: new Color(0xFFE57373), 
        child: new Icon(Icons.check), 
        onPressed:(){} 
       ), 
      ) 
      ], 
     ), 
    ) 
    ); 
    } 
}