Flutter - SingleChildScrollView interférant dans les colonnes

Question

J'ai créé un écran qui fonctionne bien avec les colonnes, mais j'avais besoin de faire défiler à cause du clavier.

Lorsque vous insérez le SingleChildScrollView ou l'attribut ListView le MainAxisAlignment.spaceBetween, il ne fonctionne plus.

Y avait-il une solution pour cela?

gifs sans SingleChildScrollView l'écran ne roule pas et le FloatingActionButton est au bas de l'écran

Gif avec SingleChildScrollView le rouleau écran et il FloatingActionButton est pas en bas de l'écran

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

Je recommande de ne pas utiliser FloatingActionButton comme vous le faites ici. FloatingActionButton doit être utilisé pour les actions qui doivent toujours être à l'écran à tout moment. Voir le Material guidelines on button usage pour des suggestions sur d'autres types de boutons qui peuvent être défilés, comme RaisedButton et FlatButton. Vous pouvez utiliser un RaisedButton ici, mais je pense qu'il serait préférable de faire de votre écran un dialogue et de mettre l'action de sauvegarde dans le AppBar comme I suggested dans votre autre question. Si vous décidez d'utiliser un RaisedButton ou un FlatButton, gardez à l'esprit que les curseurs ne changent normalement pas l'espacement des éléments en fonction de la taille de leur conteneur. Au lieu d'utiliser MainAxisAlignment.spaceBetween, vous pouvez mettre quelques Padding autour de votre RaisedButton pour le séparer des éléments TextField. Cela garantira qu'ils sont espacés de la même distance indépendamment de la rotation, de la taille de l'écran et du fait que le clavier soit en marche ou non.

Answer 2

Suivez le code ci-dessous pour vous enregistrer.

MainAxisAlignment.spaceBetween a été remplacé par un remplissage dynamique, en fonction de la taille de l'écran.

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:(){} 
       ), 
      ) 
      ], 
     ), 
    ) 
    ); 
    } 
}