Flutter aligner le champ de texte en bas et le texte en haut

Question

Comment aligner le texte du haut et le champ de texte du bas? Il s'agit de créer une sorte d'interface de type chat.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,

          children: <Widget>[
            Text(
              'Hello, How are you?\nwow',
              textAlign: TextAlign.left,
              overflow: TextOverflow.Ellipsis,
              //style: new TextStyle(fontWeight: FontWeight.bold),
            ),
            TextField(
              controller: myController,
              onChanged: (text) {
                //print("First text field: $text");
              },
              onSubmitted: (text) {
                print(text);
                //myController.clear();
                myController.text = "";
              },
              decoration: new InputDecoration(
                  hintText:"Enter your response."
              ),
              focusNode: _focusNode,
              autofocus: true,
            ),
          ],
        ),
      ),
    );
  }

J'ai essayé de séparer le texte et les champs de texte dans des conteneurs à la place, mais en vain.

Existe-t-il un moyen de le faire en flottement similaire aux contraintes de disposition iOS où le champ de texte est contraint à la hauteur du clavier et le texte est contraint au champ de texte?

Answer 1

Vous pouvez insérer un Expanded entre les Text et TextField dans votre Column. Cela prendra autant d'espace entre ceux-ci que possible et donc poussez votre Text vers le haut et TextField vers le bas:

Column(
  children: [
    Text(...),
    Expanded(child: Container()),
    TextField(...),
  ],
);