[英]RenderFlex children have non-zero flex but incoming height constraints are unbounded. How can I get rid of this error
In my project I used a scaffold in a stateful widget.在我的项目中,我在有状态小部件中使用了脚手架。 In the middle of the column of the stateful widget I want to include a pageview that swipes.
在有状态小部件的列的中间,我想包含一个滑动的页面浏览量。 In that page view, there are various text fields.
在该页面视图中,有各种文本字段。 I wrote the code for the form in a different file in a different class.
我在不同的 class 的不同文件中编写了表单的代码。 I wrapped both the pageview widget and the form column for the form widget in container widgets.
我将页面视图小部件和表单小部件的表单列都包装在容器小部件中。 But I keep getting the same error: Exception has occurred.
但我一直收到同样的错误:发生异常。 FlutterError (RenderFlex children have non-zero flex but incoming height constraints are unbounded.
FlutterError(RenderFlex 子级具有非零弹性,但传入的高度约束是无界的。
This is the code for the initial screen:这是初始屏幕的代码:
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),
),
),
),
),
),
],
)
],
),
),
),
);
}
}
this is the code for the first page of the page view:这是页面视图第一页的代码:
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) {},
),
],
)
],
),
],
),
));
}
}
this is what I had before:这是我以前的:
But I want the pageview in the center between the logo at the top and the page indicator and button at the bottom但我希望页面浏览量位于顶部徽标与底部页面指示器和按钮之间的中心
But I want the pageview in the center between the logo at the top and the page indicator and button at the bottom但我希望页面浏览量位于顶部徽标与底部页面指示器和按钮之间的中心
There are few key points.有几个关键点。
Using Expanded inside SingleChildScrollView will get infinite height and will provide errors.在 SingleChildScrollView 中使用 Expanded 将获得无限高度并会提供错误。
Using TextFiled inside Row needed to be wrapped with Expanded with to get aviable width.在 Row 内使用 TextFiled 需要用 Expanded with 包装以获得可用宽度。
A better controll over widget sizing is Using LayoutBuilder.对小部件大小的更好控制是使用 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) {},
),
],
),
)
],
),
],
);
}
}
More about flutter UI更多关于flutter UI
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.