I am unable to successfully make Stack widget to work when i place it as a child of Column widget. My intention is to mix the Stack layout and Column/Row layout methods to reap the benefits of both approach. When i run the code the compile gave a scanty error message:
════════ (2) Exception caught by rendering library
═════════════════════════════════════════════════ A RenderFlex
overflowed by Infinity pixels on the bottom. User-created ancestor of
the error-causing widget was: Scaffold
file:///C:/Users/admin/AndroidStudioProjects/music_app/lib/main.dart:240:12
Blank white page was returned when i ran the code. What am i doing wrong? The following is the code snippet:
body: Column(
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
)
],
),
Any help would be appreciated. Thanks
The error is occuring because you wrapped the Stack widget with Container which expands to the entire screen, if not provided height or width. So, just provide a custom height to the Container that will fix the overflow error. Working code below:
body: Column(
children: <Widget>[
Container(
color: Colors.blue,
height: 200,
child: Stack(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
)
],
),
I provided a test height. You may need to provide height or width per your requirement.
Hope this answers your question.
Please try below code:-
body: Column(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
Related
I want to develop a UI just like Postman Desktop App. But When I add a text field and fix the sized button in a row it gives an error RenderFlex children have non-zero flex but incoming width constraints are unbounded. But I don’t want to give a fixed size to the text field through MediaQuery. As you can see in this video (Demo UI) Postman text field size is fixed when the screen size decrease it shows a horizontal scrollbar. I want the same behavior. Here is the code.
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: 300,
decoration:
BoxDecoration(border: Border.all(color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: Image.network(
ImageURL,
fit: BoxFit.fitWidth,
),
),
],
),
),
),
SizedBox(
child: Column(
children: [
Row(
children: <Widget>[
const Expanded(child: TextField()),
DarkButton("Save", () {}),
],
),
],
),
),
],
),
),
),
);
Add isDens = true in Textfield.
Just like this:
Expanded(child: TextField(decoration: InputDecoration(isDense: true),)),
this is because you use Expanded inside the SingleChildScrollView.
You can not use Expanded inside the SingleChildScrollView because it covers the maximum width or height.
Just remove SingleChildScrollView error was gone.
you may use listview for this or use CustomScrollView for that
I have a flutter widget tree as the following:
Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 750),
),
DefaultTabController(
length: 5,
child: Column(
children: [
SizedBox(
height: 40,
width: double.infinity,
child: TabBar(
),
Container(
height: 750
child: TabBarView(children: [
BusinessProfileOverviewPage(),
BusinessProfileGalleryPage(),
BusinessProfilePageReviews(),
BusinessProfileOffersPage(),
BusinessProfilesProductsPage(),
]),
),
],
),
),
]))
I want to get rid off the tabbarview container height, so it becomes felxible based on the contents of the child pages.
when I remove the fixed height I get error of unbounded heights.
I tried also box constrains, but childs always tak the max height.
how can I adjust that?
thanks
I am using a stack widget to display animations inside a screen. I am using only 70% of the screen and the rest I have kept it unused. I want to display something else there. When I am wrapping my stack widget inside a column it is giving the error: Bottom Overflowed by Infinite Pixels.
I tried adding a custom height using Container and SizedBox. Also tried using SingleChildScrollView. Still the same error.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: Column(
children: [
Stack(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.72,
child: FlareActor(
'assets/videos/stars.flr',
alignment: Alignment.center,
fit: BoxFit.cover,
animation: 'Blink',
controller: _controller,
),
),
Container(
child: Transform.scale(
scale: 0.6,
child: FlareActor(
'assets/videos/talking-earth.flr',
alignment: Alignment.center,
fit: BoxFit.cover,
animation: 'activated',
controller: _controller,
),
),
),
Positioned(
left: MediaQuery.of(context).size.width / 3.8,
top: MediaQuery.of(context).size.width / 10,
child: Text(
"Published",
style: GoogleFonts.ptSansNarrow(
color: whiteColor,
fontSize: ScreenUtil().setSp(50),
fontWeight: FontWeight.bold),
),
),
],
),
Text("Test"),
],
),
);
}
}
You need to wrap your stack with a Container first, setting a predefined height. This is because the Stack size relies on its parent.
Here's the official documentation on Stack: https://api.flutter.dev/flutter/widgets/Stack-class.html
I am working on a Flutter project. I'm trying to create a widget like the image below and I can't manage to do it.
So what I'm trying to do, is to create a widget with a Text at the top left (the size of this widget is not constant and depends on the text in it).
I'm trying to align 2 other widgets with the Text:
The Widget 1 is aligned horizontaly and centered with the Text widget and at its right with no space between
The Widget 2's right edge is aligned verticaly with the Text widget's right edge, and is positioned under it (and there is no space between the 2 widgets).
I tried to implement this with Column and Row widgets or with a GridView but I couldn't manage to do so.
Also the overall size of this custom widget has to be shrinked.
Does someone know how to do something like that ?
Thank you.
This works
Container(
width: double.infinity,
height: 300,
color: Colors.grey[200],
child: Column(
children: <Widget>[
Row(
children: [
Flexible(
flex: 2,
child: Container(
height: 200,
color: Colors.blue,
),
),
Flexible(
flex: 1,
child: Container(
height: 100,
color: Colors.green,
),
),
],
),
Row(
children: <Widget>[
Flexible(
flex: 2,
child: Align(
alignment: Alignment.centerRight,
child: Container(
width: 150,
height: 100,
color: Colors.orange,
),
),
),
Flexible(
flex: 1,
child: Container(),
),
],
),
],
),
),
I have the following code:
body: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(color: AppColors.LIGHT_BLUE, height: 75),
Positioned(
top: 50,
left: 0,
right: 0,
child: Center(
child: _buildAvatar(
Provider.of<AuthService>(context).getLoggedInUser(),
))),
],
),
Text(user.displayName, style: TextStyle(fontSize: 20))
],
)
which results in the Positioned avatar being clipped:
What am I doing wrong here? Is it incorrect to put a Stack inside of a Column like this? Or, do I need to wrap the Stack in something else?
I think the reason is you put the image into your Positioned widget. Stack widget is used when you want to put some widget in front of a widget.
So i think it have to be like this
body: Column(
children: <Widget>[
Container(
Stack(
children: <Widget>[
Image.network(url); // Image here
Positioned(
top: 50,
left: 0,
right: 0,
child: Center(
child: //Some widget front image (may be Text)
),
],
),
),
Text(user.displayName, style: TextStyle(fontSize: 20))
],
)
And I recommend you to use Expended widget with flex in your column so that you can divide it into many part with height of the part depend on flex.