RenderFlex children have non-zero flex but incoming height constraints are unbounded. How can I get rid of this error
Question
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. 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.
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
1 answers
solution1
1 2022-08-29 13:52:48
There are few key points.
Using Expanded inside SingleChildScrollView will get infinite height and will provide errors.
Using TextFiled inside Row needed to be wrapped with Expanded with to get aviable width.
A better controll over widget sizing is Using 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Flutter RenderFlex children have non-zero flex but incoming height constraints are unbounded. error with 134 pixel?
How to fix "`RenderFlex children have non-zero flex but incoming height constraints are unbounded." in Flutter?
Flutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded. Using Expandable listview
flutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded. in GridView widget
Flutter “RenderFlex children have non-zero flex but incoming height constraints are unbounded.” when using Staggered Grid View~ @_@
SingleChildScrollView error “RenderFlex children have non-zero flex but incoming height constraints are unbounded”
Getting the following error “RenderFlex children have non-zero flex but incoming height constraints are unbounded” in Flutter
Flutter RenderFlex children have non-zero flex but incoming height constraints are unbounded error
Flutter: "RenderFlex children have non-zero flex but incoming height constraints are unbounded"
Flutter RenderFlex children have non-zero flex but incoming height constraints are unbounded problem
Related Tags