[I want to implement this UI with rounded appbar to my shop app] (https://i.stack.imgur.com/YoIIR.jpg)
When I use ClipRRect to apply rounded borders to SliverAppBars I get this error. However, I can apply ClipRRect to normal appBar. I need a sliverAppBar to hide title and only display my tabs when scroll up to save space on screen.
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb](state: RawGestureDetectorState#5a576(gestures: <none>, behavior: opaque)):
A RenderNestedScrollViewViewport expected a child of type RenderSliver but received a child of type RenderClipRRect.
RenderObjects expect specific types of children because they coordinate with their children during layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a RenderSliver does not understand the RenderBox layout protocol.
The RenderNestedScrollViewViewport that expected a RenderSliver child was created by: NestedScrollViewViewport ← IgnorePointer-[GlobalKey#845ec] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#9de96] ← NotificationListener<ScrollMetricsNotification> ← Transform ← ClipRect ← ⋯
The RenderClipRRect that did not match the expected child type was created by: ClipRRect ← NestedScrollViewViewport ← IgnorePointer-[GlobalKey#845ec] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#9de96] ← NotificationListener<ScrollMetricsNotification> ← Transform ← ⋯
The relevant error-causing widget was
NestedScrollView
lib\…\screens\news_feed.dart:27
When the exception was thrown, this was the stack
Here is my code.
class NewsFeed extends StatelessWidget {
const NewsFeed({Key? key}) : super(key: key);
static const List<Widget> screens = [
RetailsScreen(),
ElonsScreen(),
RentalsScreen(),
];
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
initialIndex: 0,
child: Scaffold(
backgroundColor: AppColors.semiWhiteBackground,
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
ClipRRect(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25),
),
child: SliverAppBar(
title: const LocaleText('newsFeed'),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
bottom: const TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 5,
indicatorColor: AppColors.secondary,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15,
),
tabs: [
Tab(
child: LocaleText(
'buyAndSell',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: LocaleText(
'elons',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: LocaleText(
'rental',
style: TextStyle(color: Colors.white),
),
),
],
),
),
),
];
},
body: const TabBarView(
children: screens,
),
),
),
);
}
}
I use a SliverAppBar to be able to hide scrollBar part of the appBar when scrolling up.
Please update your code with :
Remove the ClipRRect from the sliverAppBar and use shape property of sliverAppBar
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60))),
Full code :
NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
title: const Text('newsFeed'),
pinned: true,
floating: true,
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60))),
forceElevated: innerBoxIsScrolled,
bottom: const TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 5,
indicatorColor: Colors.yellow,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15,
),
tabs: [
Tab(
child: Text(
'buyAndSell',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
'elons',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
'rental',
style: TextStyle(color: Colors.white),
),
),
],
),
),
];
},
body: Container(),
),
I am trying to use DropdownButtonFormField in tab controller with tab viewer on flutter web. It is showing but not showing dropdown options on clicking on it showing an error please find below my code and error.
Below is my example code:
import 'package:flutter/material.dart';
class UserManager extends StatefulWidget {
const UserManager({Key? key}) : super(key: key);
#override
_UserManagerState createState() => _UserManagerState();
}
class _UserManagerState extends State<UserManager> {
final _formkey = GlobalKey<FormState>();
var addName = "";
var addEmail = "";
var addPassword = "";
var addRole = "";
final nameController = TextEditingController();
final emailController = TextEditingController();
final passwordController = TextEditingController();
final roleController = TextEditingController();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
toolbarHeight: 20,
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.person_add)),
Tab(icon: Icon(Icons.edit)),
],
),
),
body: TabBarView(
children: [
Center(
child: Form(
key: _formkey,
child: SingleChildScrollView(
reverse: true,
child: Container(
width: 420,
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
),
child: Column(
children: [
//const SizedBox(
//height: 50,
//),
const Text(
"Add name",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.indigo,
),
),
const SizedBox(
height: 10,
),
TextFormField(
minLines: 1,
autofocus: false,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Name",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
controller: nameController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Name';
}
return null;
}),
const SizedBox(
height: 10,
),
TextFormField(
autofocus: false,
minLines: 1,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Email Address",
//hintText: "Email",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
controller: emailController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Email ID';
} else if (!value.contains('#')) {
return 'Please Enter Valid Email ID';
}
return null;
}),
const SizedBox(
height: 10,
),
TextFormField(
minLines: 1,
autofocus: false,
obscureText: true,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
controller: passwordController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Password';
}
return null;
}),
const SizedBox(
height: 20,
),
//
DropdownButtonFormField(
decoration: const InputDecoration(
labelText: "department",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
hint: const Text("select department"),
value: addRole,
onChanged: (String? newValue) {
setState(() {
addRole = newValue!;
});
},
validator: (value) => value == null ? 'field required' : null,
items: <String>[
'',
'hr',
'dtp'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
const SizedBox(
height: 20,
),
//
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // background
onPrimary: Colors.white, // foreground
),
onPressed: () {}
child: const Text('User Add'),
),
const SizedBox(
height: 20,
),
],
),
),
)),
),
Center(
child: Text("Test"),
)
],
),
),
),
);
}
}
Below is the error:
Exception has occurred. "Error: Cannot hit test a render box that has
never been laid out. The hitTest() method was called on this
RenderBox: RenderSemanticsAnnotations#119e3 NEEDS-LAYOUT NEEDS-PAINT:
needs compositing creator: Semantics ← _EffectiveTickerMode ←
TickerMode ←
_OverlayEntryWidget-[LabeledGlobalKey<_OverlayEntryWidgetState>#c466c] ← _Theatre ← Overlay-[LabeledGlobalKey#26f68] ←
UnmanagedRestorationScope ← _FocusMarker ← Semantics ← FocusScope ←
AbsorbPointer ← Listener ← ⋯ parentData: not positioned;
offset=Offset(0.0, 0.0) constraints: MISSING size: MISSING
Unfortunately, this object's geometry is not known at this time,
probably because it has never been laid out. This means it cannot be
accurately hit-tested. If you are trying to perform a hit test during
the layout phase itself, make sure you only hit test nodes that have
completed layout (e.g. the node's children, after their layout()
method has been called).
Debug console:
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
LayoutBuilder does not support returning intrinsic dimensions.
Calculating the intrinsic dimensions would require running the layout callback speculatively, which might mutate the live render object tree.
The relevant error-causing widget was
SliverFillRemaining
When the exception was thrown, this was the stack
The following RenderObject was being processed when the exception was fired: RenderSliverFillRemaining#ef0f7 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderSliverFillRemaining#ef0f7 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: paintOffset=Offset(0.0, 0.0) (can use size)
constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle, scrollOffset: 0.0, remainingPaintExtent: 574.0, crossAxisExtent: 1034.0, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: 574.0, remainingCacheExtent: 824.0, cacheOrigin: 0.0)
geometry: SliverGeometry(scrollExtent: 574.0, paintExtent: 574.0, maxPaintExtent: 574.0, cacheExtent: 574.0)
scrollExtent: 574.0
paintExtent: 574.0
maxPaintExtent: 574.0
cacheExtent: 574.0
child: RenderFlex#0b053 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: paintOffset=Offset(0.0, -0.0)
constraints: BoxConstraints(w=1034.0, h=574.0)
size: Size(1034.0, 574.0)
direction: horizontal
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
child 1: RenderSemanticsAnnotations#79122 relayoutBoundary=up1
needs compositing
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=574.0)
size: Size(89.0, 574.0)
child: RenderPhysicalModel#2413b relayoutBoundary=up2
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=574.0)
layer: PhysicalModelLayer#dd0a6
engine layer: PhysicalShapeEngineLayer#2eafd
handles: 2
elevation: 0.0
color: Color(0xffffffff)
size: Size(89.0, 574.0)
elevation: 0.0
color: Color(0xffffffff)
shadowColor: Color(0xffffffff)
shape: BoxShape.rectangle
borderRadius: BorderRadius.zero
child: _RenderInkFeatures#f1226 relayoutBoundary=up3
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=574.0)
size: Size(89.0, 574.0)
child 2: RenderConstrainedBox#5423b relayoutBoundary=up1
parentData: offset=Offset(89.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=574.0)
size: Size(1.0, 574.0)
additionalConstraints: BoxConstraints(w=1.0, 0.0<=h<=Infinity)
child: RenderPositionedBox#2ef82 relayoutBoundary=up2
parentData: <none> (can use size)
constraints: BoxConstraints(w=1.0, 0.0<=h<=574.0)
size: Size(1.0, 574.0)
alignment: Alignment.center
textDirection: ltr
widthFactor: expand
heightFactor: expand
child: RenderPadding#25c65 relayoutBoundary=up3
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=1.0, 0.0<=h<=574.0)
size: Size(1.0, 574.0)
padding: EdgeInsets.zero
textDirection: ltr
child 3: RenderSemanticsAnnotations#7f0ab relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: offset=Offset(90.0, 0.0); flex=1; fit=FlexFit.tight (can use size)
constraints: BoxConstraints(w=944.0, 0.0<=h<=574.0)
size: Size(944.0, 574.0)
child: RenderSemanticsAnnotations#466c4 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(w=944.0, 0.0<=h<=574.0)
size: Size(944.0, 574.0)
child: RenderSemanticsAnnotations#4f301 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(w=944.0, 0.0<=h<=574.0)
size: Size(944.0, 574.0)
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by scheduler library ═════════════════════════════════
Cannot hit test a render box that has never been laid out.
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by scheduler library ═════════════════════════════════
Assertion failed:
!_debugDuringDeviceUpdate
is not true
On state level, class String? addRole; and from Items<String>[] remove ''.
On User Add
onPressed: () {
bool isValid =
_formkey.currentState!.validate();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("form is $isValid")));
},
},
Full Widget
class _UserManagerState extends State<UserManager> {
final _formkey = GlobalKey<FormState>();
var addName = "";
var addEmail = "";
var addPassword = "";
String? addRole;
final nameController = TextEditingController();
final emailController = TextEditingController();
final passwordController = TextEditingController();
final roleController = TextEditingController();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
toolbarHeight: 20,
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.person_add)),
Tab(icon: Icon(Icons.edit)),
],
),
),
body: TabBarView(
children: [
Center(
child: Form(
key: _formkey,
child: SingleChildScrollView(
reverse: true,
child: Container(
width: 420,
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
),
child: Column(
children: [
//const SizedBox(
//height: 50,
//),
const Text(
"Add name",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.indigo,
),
),
const SizedBox(
height: 10,
),
TextFormField(
minLines: 1,
autofocus: false,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Name",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
controller: nameController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Name';
}
return null;
}),
const SizedBox(
height: 10,
),
TextFormField(
autofocus: false,
minLines: 1,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Email Address",
//hintText: "Email",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
controller: emailController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Email ID';
} else if (!value.contains('#')) {
return 'Please Enter Valid Email ID';
}
return null;
}),
const SizedBox(
height: 10,
),
TextFormField(
minLines: 1,
autofocus: false,
obscureText: true,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
controller: passwordController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Password';
}
return null;
}),
const SizedBox(
height: 20,
),
//
DropdownButtonFormField(
decoration: const InputDecoration(
labelText: "department",
border: OutlineInputBorder(),
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 15),
),
hint: const Text("select department"),
value: addRole,
onChanged: (String? newValue) {
setState(() {
addRole = newValue!;
});
},
validator: (value) =>
value == null ? 'field required' : null,
items: <String>[
'hr',
'dtp'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
const SizedBox(
height: 20,
),
//
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // background
onPrimary: Colors.white, // foreground
),
onPressed: () {
bool isValid =
_formkey.currentState!.validate();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("form is $isValid")));
},
child: const Text('User Add'),
),
const SizedBox(
height: 20,
),
],
),
),
)),
),
Center(
child: Text("Test"),
)
],
),
),
),
);
}
}
On my end, the issue was on the items' list where some value was long (String length). I have resolved this way
DropdownButtonFormField(
...
items: items
.map(
(e) => DropdownMenuItem(
value: e,
child: e.length > 30
? Text('${e[0].toUpperCase()}${e.substring(1, 30)}...')
: Text("${e[0].toUpperCase()}${e.substring(1)}"),
)).toList(),
)
I tried to call up the summary page but everything disappear when I put expanded:
════════ Exception caught by rendering library
═════════════════════════════════ Null check operator used on a null
value The relevant error-causing widget was Column
lib\screens\consult_profile.dart:28
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by scheduler library
═════════════════════════════════ Updated layout information required
for RenderRepaintBoundary#d8a53 NEEDS-LAYOUT NEEDS-PAINT to calculate
semantics. 'package:flutter/src/rendering/object.dart': Failed
assertion: line 2647 pos 12: '!_needsLayout'
The source code is:
class MyCoolPage extends StatefulWidget {
#override
State<MyCoolPage> createState() => _MyCoolPageState();
}
class _MyCoolPageState extends State<MyCoolPage>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
_tabController = TabController(
length: 2,
vsync: this,
);
super.initState();
}
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child: SizedBox(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 500,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(25),
),
child: AppBar(
bottom: TabBar(
controller: _tabController,
tabs: [
Text(
"Summary",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
Text(
"Reservations",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
],
indicator: BoxDecoration(
color: b,
borderRadius: BorderRadius.circular(25),
),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
),
),
),
// create widgets for each tab bar here
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Container(
child: Center(
child: MyLovelySummary(),
),
),
// second tab bar view widget
Container(
child: Center(
child: MyLovelyReservations(),
),
),
],
),
),
],
),
),
);
}
}
I am building a settings page.
class SettingsScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Settings",
style: TextStyle(
color: primaryColor,
fontFamily: titleFontStyle
),
),
leading: IconButton(
icon: Icon(Icons.arrow_back, color: primaryColor),
onPressed: () => Navigator.of(context).pop(),
),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0.0,
),
backgroundColor: Colors.white,
body: Container(
width: double.infinity,
height: MediaQuery.of(context).size.height - 40.0,
padding: EdgeInsets.fromLTRB(20.0, 60.0, 20.0, 0.0),
child: ListView(
children: <Widget>[
Container(
child: TextField(
autofocus: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Username',
),
),
),
Container(
margin: EdgeInsets.only(top: 20.0),
child: RaisedButton(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 40.0),
textColor: Colors.white,
color: primaryColor,
child: Text(
'Update',
style: TextStyle(
color: Colors.white
),
),
onPressed: () {},
),
),
],
),
),
);
}
}
I get an render flex overflow error whenever I try to press the back button.
The error message is as follows :-
The specific RenderFlex in question is:
I/flutter (18259): RenderFlex#17a8f relayoutBoundary=up1 OVERFLOWING
I/flutter (18259): creator: Column ← MediaQuery ← LayoutId
I have tried wrapping the Containers in SingleChildScrollView() but it doesn't work.
I used to use Column() before using ListView() but that didn't work either.
This is caused by soft keyboard , add this to scaffold widget
resizeToAvoidBottomInset : false
or
resizeToAvoidBottomPadding: false,
it existe different ways to avoid that but more important the only fix that error, that could we done with what C4C said, its understand what happens and you can know more about this error reading about it in this post from Scott Stoll from Flutter Community
You could use also Expanded or Flexible widgets to avoid this, you will understand more about this errors after read the 4 post he did.
Also you can remove the size from the container and add the property shrinkWrap: true, of the listview.
I have hese snippet for a login screen and these codes arent displaying when i launch the app on the android device
here the error on the console I/flutter (12389): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (12389): The following assertion was thrown during performLayout():
I/flutter (12389): BoxConstraints forces an infinite width.
I/flutter (12389): These invalid constraints were provided to RenderAnimatedOpacity's layout() function by the
I/flutter (12389): following function, which probably computed the invalid constraints in question:
import 'package:flutter/material.dart';
class UserEmail extends StatefulWidget{
#override
State<StatefulWidget> createState() {
return UserEmailState();
}
}
class UserEmailState extends State<UserEmail> {
final TextEditingController _emailController = new TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
child: new Row(
children: <Widget>[
Text("Welcome",
style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold
),),
Text("A short slogan about the app...")
],
),
),
),
Padding(
padding: const EdgeInsets.all(24.0),
child: SizedBox(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
TextField(
controller: _emailController,
decoration: new InputDecoration(
labelText: "Email",
hintText: "Enter email address"
),
)
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
onPressed: null,
textColor: Colors.white,
color: Colors.blueGrey,
padding: const EdgeInsets.all(8.0),
child: new Text(
"Continue")
),
),
],
),
),
)
],
),
);
}
}
wrap your TextField inside an Expanded or Flexible widget. Like this:
Flexible(
child: TextField(
controller: _emailController,
decoration: new InputDecoration(
labelText: "Email",
hintText: "Enter email address"
),
),
)