#flutter
#flutter
Вопрос:
Я создаю приложение для чата.
У меня есть 2 элемента в столбце. Первая — это информационная карточка, которая находится в верхней части страницы,
У меня также есть текстовое поле, но я не могу понять, как разместить его в нижнем центре.
Вот основной код с проблемой:
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: true,
appBar: userMessageChatAppBar(context),
body: SingleChildScrollView(
child: Column(
children: [
userMessageChatInformationCard(context),
Positioned(
bottom: 20,
child: userMessageChatTextField())
],
),
),
);
Текстовое поле, в котором будет происходить чат:
Padding userMessageChatTextField() {
return Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
suffixIcon: RaisedButton.icon(
onPressed: () {},
icon: Icon(
Icons.send,
color: Colors.white,
),
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
label: Text(
"19.99₺",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
hintText: "Bir şeyler yaz",
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
)),
);}
Информационная карточка, которую пользователь впервые видит:
Align userMessageChatInformationCard(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
decoration: new BoxDecoration(
boxShadow: [
new BoxShadow(
color: Colors.grey,
blurRadius: 10.0,
),
],
),
child: Card(
clipBehavior: Clip.antiAlias,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'fernando muslera mesajını bekliyor',textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0, color: Colors.blueGrey),
),
),
Padding(
padding: const EdgeInsets.only(left: 20,right: 20,bottom: 20),
child: Text(
'280 karakterlik mesaj için ödeme yaparsın ünlünün mesajı alabilmesi uzun sürebilir',
textAlign: TextAlign.center, style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
],
),
),
)));
}
Комментарии:
1. Вы можете использовать гибкий. Как показано ниже: дочерние элементы: [ Гибкий (userMessageChatInformationCard(контекст)), userMessageChatTextField(), ],
Ответ №1:
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: true,
appBar: userMessageChatAppBar(context),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
userMessageChatInformationCard(context),
userMessageChatTextField()
],
),
);
}