Eu estou criando uma aplicação, a ideia é ter um layout parecido com o do WhatsApp, onde eu tenho um TextField pra escrever uma mensagem e um FloattingActionButton que quando eu clicar ele vai pegar esta mensagem, vai criar uma box pra ela e exibir na tela. Pra colocar as mensagens de uma forma 'scrollable', tentei usar o ListView, mas quando eu o coloco, o TextField desaparece. Este é o código até o momento.
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Morgan App',
theme: ThemeData(
primaryColor: Colors.blue,
),
home: Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.send),
onPressed: () => {},
),
backgroundColor: Colors.blue.shade900,
body: TelaPrincipal(),
),
);
}
}
class TelaPrincipal extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Image.asset('images/img.png', height: 200),
ListView(
children: [
UserMessage('Uma mensagem.'),
],
),
Container(
margin: EdgeInsets.fromLTRB(0, 0, 70, 0),
child: TextField(
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
),
hintText: 'Type here...',
),
),
),
],
),
);
}
}
class UserMessage extends StatelessWidget {
final String msg;
UserMessage(this.msg);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(msg, style: TextStyle(fontSize: 20)),
),
),
],
);
}
}
Uma coisa que eu queria saber também, é como eu faço pra posicionar a UserMessage logo acima do TextField, invés de aparecer no meio da tela entre ele e a imagem que eu coloquei.