我想让“发送消息”容器的容器占据屏幕的剩余高度。我试着使用 Package 容器与扩大和灵活，但它不工作.
页面图像
完整页面代码：
import 'dart:async';
import 'dart:ui';
import 'package:chatbot/const/constants.dart';
import 'package:chatbot/widgets/chat_message.dart';
import 'package:chatbot/widgets/dot_animation.dart';
import 'package:flutter/material.dart';
import 'package:chat_gpt_sdk/chat_gpt_sdk.dart';
import 'package:flutter_chat_bubble/chat_bubble.dart';
import '../api/api_key.dart';
import '../widgets/Button.dart';
class ImageGeneratorScreen extends StatefulWidget {
const ImageGeneratorScreen({super.key});
@override
State<ImageGeneratorScreen> createState() => _ImageGeneratorScreenState();
}
class _ImageGeneratorScreenState extends State<ImageGeneratorScreen> {
final TextEditingController controller = new TextEditingController();
OpenAI? openAI;
StreamSubscription? subscription;
bool isTyping = false;
@override
void initState() {
super.initState();
openAI = OpenAI.instance.build(token: openAIApiKey);
}
@override
void dispose() {
super.dispose();
subscription?.cancel();
}
void receiveMessage() async {
final request = ChatCompleteText(
messages: [Messages(role: Role.user, content: controller.text)],
maxToken: 200,
model: GptTurbo0301ChatModel());
final response = await openAI?.onChatCompletion(request: request);
ChatMessage receivedMessage = ChatMessage(
text: response!.choices[0].message!.content,
isMe: false,
);
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
'Image Generator',
style: TextStyle(
fontSize: 24, fontWeight: FontWeight.w700, letterSpacing: 0.6),
),
),
elevation: 2,
centerTitle: true,
leading: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: GestureDetector(
child: Icon(Icons.arrow_back),
onTap: () {
Navigator.pop(context);
},
),
),
),
body: SingleChildScrollView(
child: Stack(
children: [
SafeArea(
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset('assets/images/default_image.jpg'),
),
),
),
Row(
children: [
SizedBox(
width: 10,
),
Button(
text: 'Copy Prompt',
icon: Icons.copy,
),
SizedBox(
width: 5,
),
Button(
text: 'Download HD',
icon: Icons.download,
),
SizedBox(
width: 10,
),
],
),
BottomMessageScreen(),
],
),
),
],
),
),
);
}
Widget BottomMessageScreen() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0).copyWith(bottom: 5),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20).copyWith(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
color: DarkModeColors.textFieldColor,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
textCapitalization: TextCapitalization.sentences,
style: TextStyle(
color: Colors.white,
),
controller: controller,
onSubmitted: (value) {},
decoration: InputDecoration(
hintText: "Send a message",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 10).copyWith(bottom: 10),
padding: EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: Text(
'Generate',
style: TextStyle(fontSize: 23,fontWeight: FontWeight.w900),
),
)
],
),
),
);
}
Widget TypingIndicator() {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: CircleAvatar(
child: Icon(Icons.abc),
radius: 15,
),
),
ChatBubble(
clipper: ChatBubbleClipper5(type: BubbleType.receiverBubble),
alignment: Alignment.topLeft,
margin: EdgeInsets.only(bottom: 10, left: 10),
padding: EdgeInsets.all(0).copyWith(bottom: 5),
backGroundColor: Colors.grey.shade800,
child: Container(
height: 40,
width: 60,
child: DotAnimation(),
),
)
],
);
}
}底部代码：
Widget BottomMessageScreen() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0).copyWith(bottom: 5),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20).copyWith(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
color: DarkModeColors.textFieldColor,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
textCapitalization: TextCapitalization.sentences,
style: TextStyle(
color: Colors.white,
),
controller: controller,
onSubmitted: (value) {},
decoration: InputDecoration(
hintText: "Send a message",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 10).copyWith(bottom: 10),
padding: EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: Text(
'Generate',
style: TextStyle(fontSize: 23,fontWeight: FontWeight.w900),
),
)
],
),
),
);
}我试着使用 Package 容器与扩大和灵活，但它不工作.
2条答案
按热度按时间vc6uscn91#
您需要一个
SizedBox.expand，它确保父空间被完全占用，并且子空间被告知在该空间中它想要的大小。我已经知道插入这些作为脚手架的
body，以确保我的布局采取整个屏幕。sr4lhrrt2#
你有
body: SingleChildScrollView，在body上添加Expanded将导致约束问题（无限高）。看不出这个的用例。你可以删除它，如果我得到它正确。在顶部使用LayoutBuilder来获取视图的大小。此外，移除SingleChildScrollView将允许扩展为子项。