Iniisking
Reputation: 57
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. 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: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: ,
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
Something like this:
Upvotes: 1
Views: 135
Answers (1)
Md. Yeasin Sheikh
Reputation: 63604
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
Upvotes: 3
Related Questions
- Flutter: "RenderFlex children have non-zero flex but incoming height constraints are unbounded"
- 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
- RenderFlex children have non-zero flex but incoming width constraints are unbounded in flutter
- RenderFlex children have non-zero flex but incoming height constraints are unbounded. Expanded not working
- Flutter RenderFlex children have non-zero flex but incoming height constraints are unbounded error
- 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 problem
- RenderFlex children having issue of unbounded height constraints
- SingleChildScrollView error "RenderFlex children have non-zero flex but incoming height constraints are unbounded"