![](/img/trans.png)
[英]Flutter RenderFlex children have non-zero flex but incoming height constraints are unbounded. error with 134 pixel?
[英]RenderFlex children have non-zero flex but incoming height constraints are unbounded. How can I get rid of this error
在我的项目中,我在有状态小部件中使用了脚手架。 在有状态小部件的列的中间,我想包含一个滑动的页面浏览量。 在该页面视图中,有各种文本字段。 我在不同的 class 的不同文件中编写了表单的代码。 我将页面视图小部件和表单小部件的表单列都包装在容器小部件中。 但我一直收到同样的错误:发生异常。 FlutterError(RenderFlex 子级具有非零弹性,但传入的高度约束是无界的。
这是初始屏幕的代码:
import 'package:custigrow/screens/Onboarding/company_onboarding.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
class Onboarding extends StatefulWidget {
const Onboarding({Key? key}) : super(key: key);
@override
State<Onboarding> createState() => _OnboardingState();
}
class _OnboardingState extends State<Onboarding> {
@override
PageController _controller = PageController();
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 60,
width: 80,
child: Image.asset("lib/assets/custigrow.png")),
SizedBox(
height: 10,
),
Expanded(
child: Container(
height: 600,
child: PageView(
controller: _controller, children: [CompanyOnboarding()]),
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SmoothPageIndicator(
controller: _controller,
count: 3,
effect: ExpandingDotsEffect(
activeDotColor: Colors.green,
dotHeight: 13,
dotWidth: 13),
),
],
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
_controller.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeIn);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green,
),
width: 110,
height: 50,
child: Center(
child: Padding(
padding: const EdgeInsets.all(15),
child: Text(
"Next",
style: TextStyle(fontSize: 19, color: Colors.white),
),
),
),
),
),
],
)
],
),
),
),
);
}
}
这是页面视图第一页的代码:
import 'package:flutter/material.dart';
class CompanyOnboarding extends StatelessWidget {
const CompanyOnboarding({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Flexible(
fit: FlexFit.loose,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Create your company",
style: TextStyle(fontSize: 25),
),
SizedBox(
height: 20,
),
//subtitle
Text(
"Set up your company to track inventory, orders and products",
style: TextStyle(fontSize: 20.4, color: Colors.green),
),
SizedBox(height: 20),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 231, 230, 230),
borderRadius: BorderRadius.circular(40)),
height: 70,
width: 70,
child: Icon(
Icons.photo_camera_rounded,
color: Colors.green,
)),
SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Upload logo/picture",
style: TextStyle(fontSize: 17, color: Colors.green),
),
SizedBox(
height: 5,
),
Text(
"picture should be in png/jpg format",
style: TextStyle(fontSize: 17),
),
SizedBox(
height: 20,
),
TextField(
// controller: _emailController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Company Name",
labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
floatingLabelStyle:
TextStyle(color: Colors.black, fontSize: 23),
hintText: "Company Name",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {},
),
SizedBox(
height: 30,
),
//COMPANY ADRESS TEXT FIELD
TextField(
// controller: _emailController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.streetAddress,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Company Address(Optional)",
labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
floatingLabelStyle:
TextStyle(color: Colors.black, fontSize: 23),
hintText: "Company Address(Optional)",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {},
),
SizedBox(
height: 30,
),
//NATURE OF BUSINESS TEXT FIELD
TextField(
// controller: _emailController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Nature of business(Optional)",
labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
floatingLabelStyle:
TextStyle(color: Colors.black, fontSize: 23),
hintText: "Nature of business(Optional)",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {},
),
],
)
],
),
],
),
));
}
}
这是我以前的:
但我希望页面浏览量位于顶部徽标与底部页面指示器和按钮之间的中心
但我希望页面浏览量位于顶部徽标与底部页面指示器和按钮之间的中心
有几个关键点。
在 SingleChildScrollView 中使用 Expanded 将获得无限高度并会提供错误。
在 Row 内使用 TextFiled 需要用 Expanded with 包装以获得可用宽度。
对小部件大小的更好控制是使用 LayoutBuilder。
class Onboarding extends StatefulWidget {
const Onboarding({Key? key}) : super(key: key);
@override
State<Onboarding> createState() => _OnboardingState();
}
class _OnboardingState extends State<Onboarding> {
@override
PageController _controller = PageController();
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Padding(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 60,
width: 80,
color: Colors.red,
// child: Image.asset("lib/assets/custigrow.png"),
),
SizedBox(
height: 10,
),
Container(
height: constraints.maxHeight * .6,
width: constraints.maxHeight,
child: PageView(
controller: _controller,
children: [
CompanyOnboarding(),
],
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SmoothPageIndicator(
controller: _controller,
count: 3,
effect: ExpandingDotsEffect(
activeDotColor: Colors.green,
dotHeight: 13,
dotWidth: 13),
),
],
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
_controller.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeIn);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green,
),
width: 110,
height: 50,
child: Center(
child: Padding(
padding: const EdgeInsets.all(15),
child: Text(
"Next",
style:
TextStyle(fontSize: 19, color: Colors.white),
),
),
),
),
),
],
)
],
),
),
),
),
);
}
}
class CompanyOnboarding extends StatelessWidget {
const CompanyOnboarding({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Create your company",
style: TextStyle(fontSize: 25),
),
SizedBox(
height: 20,
),
//subtitle
Text(
"Set up your company to track inventory, orders and products",
style: TextStyle(fontSize: 20.4, color: Colors.green),
),
SizedBox(height: 20),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 231, 230, 230),
borderRadius: BorderRadius.circular(40)),
height: 70,
width: 70,
child: Icon(
Icons.photo_camera_rounded,
color: Colors.green,
)),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Upload logo/picture",
style: TextStyle(fontSize: 17, color: Colors.green),
),
SizedBox(
height: 5,
),
Text(
"picture should be in png/jpg format",
style: TextStyle(fontSize: 17),
),
SizedBox(
height: 20,
),
TextField(
// controller: _emailController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Company Name",
labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
floatingLabelStyle:
TextStyle(color: Colors.black, fontSize: 23),
hintText: "Company Name",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {},
),
SizedBox(
height: 30,
),
//COMPANY ADRESS TEXT FIELD
TextField(
// controller: _emailController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.streetAddress,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Company Address(Optional)",
labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
floatingLabelStyle:
TextStyle(color: Colors.black, fontSize: 23),
hintText: "Company Address(Optional)",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {},
),
SizedBox(
height: 30,
),
//NATURE OF BUSINESS TEXT FIELD
TextField(
// controller: _emailController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Nature of business(Optional)",
labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
floatingLabelStyle:
TextStyle(color: Colors.black, fontSize: 23),
hintText: "Nature of business(Optional)",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {},
),
],
),
)
],
),
],
);
}
}
更多关于flutter UI
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.