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
Related
What widgets should be used to display 3 cartoons at the bottom of this picture and the text at the center responsively for different screen sizes?
Row with spaceEvenly
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//your images
],
);
https://flutteragency.com/how-to-set-space-between-elements-in-flutter/
There are many ways to do this. It will also depend on what responsive behavior you are looking for. I hope, I understood your specific requirements.
Here is a solution:
class Page extends StatelessWidget {
const Page({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),
),
child: Stack(children: [
Center(
child: FractionallySizedBox(
widthFactor: .4,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
'Headline text',
style: GoogleFonts.chewy(
textStyle: const TextStyle(
color: Colors.white,
letterSpacing: .5,
),
),
),
),
),
),
Container(
alignment: const Alignment(0, .75),
child: FractionallySizedBox(
widthFactor: .8,
heightFactor: .3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/images/img1.png"),
Image.asset("assets/images/img2.png"),
Image.asset("assets/images/img3.png"),
],
),
),
)
]),
),
),
);
}
}
In this solution,
I use a main Container that will have your image as background.
I then use a Stack to position the headline and the images.
The headline is Centered and defined as a FittedBox inside a FractionallySizedBox. This allows me to have responsivity for the headline too.
Finally, for the list of images, I used a FractionallySizedBox to size the list and an aligned Container to position it within the stack. The images are then spread thanks to the use of MainAxisAlignment.spaceBetween.
So, as you see, I used the following widgets to responsively size and position my Widgets:
Position
Center
Container with the alignment property
Size
FractionallySizedBox
In my Flutter app, I have a ListView:
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
Container(
color: Colors.yellow,
height: 100
),
const SizedBox(height: 10),
// How to make this container fill up the remaining height?
Container(
color: Colors.black,
),
],
),
),
),
);
This produces the following view:
Question: How can I make the second box (with black background color) fill up the remaining space? If the content of the box exceeds the remaining space, the ScrollView will enable scrolling.
Is this possible?
There is a better option here using SliverFillRemaining in combination with CustomScrollView instead of a ListView
in your case the code will look like this.
Container(
color: Colors.blueAccent,
child: CustomScrollView(
shrinkWrap: true, // or false
slivers: <Widget>[
SliverToBoxAdapter(
child:Container(
color: Colors.yellow,
height: 100
),),
SliverToBoxAdapter(
child: SizedBox(height: 10),),
// use SliverFillRemaining to make this container fill up the remaining height?
SliverFillRemaining(
hasScrollBody: false, // if using a column, so the widgets in it, doesn't scroll
child:Container( //this container will fill the remaining space in the ViewPort
color: Colors.black,
),
) ,
],
),
),
Fill the remaining space of a ListView means filling the infinite height. I will prefer using Stack as body in this case, hope you can simply archive this.
How can we do without stack?
In this case, we can get the height and use it on Column and using Expanded on inner child that will fill the remaining spaces even for dynamic height.
I prefer using LayoutBuilder to get height.
body: LayoutBuilder(builder: (context, constraints) {
return SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
SizedBox(
// 1st child of listView
height: constraints.maxHeight,
child: Column(
children: [
Container(color: Colors.yellow, height: 100),
const SizedBox(height: 10),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
)
],
),
),
);
}),
You can get size and then set a proportion for each...
And set NeverScrollableScrollPhysics() to ensure no slight scrolling, as per below this appears to get what you are seeking.
Widget build(BuildContext context) {
Size _size = MediaQuery.of(context).size;
return Container(
child: Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(color: Colors.yellow, height: _size.height * 0.20),
SizedBox(height: _size.height * 0.10), // How to make this container fill up the remaining height?
Container(
height: _size.height * 0.70,
color: Colors.black,
),
],
),
),
),
));
}
}
Try below code hope its helpful to you. use MediaQuery here. add MediaQuery height to your black container
Refer blog also here for relative to screen size
Container(
color: Colors.blueAccent,
child: ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
Container(
color: Colors.yellow,
height: 100,
),
const SizedBox(height: 10),
// How to make this container fill up the remaining height?
Container(
color: Colors.black,
height: MediaQuery.of(context).size.height,
),
],
),
),
Your result screen->
I'm using a Stack to Positioned one widget on top of an Image.asset widget, but the problem I have is that my whole Stack widget is not scrollable to see the whole content. I wrapped the Stack widget with a SingleChildScrollView but the problem still persists. If I wrap the Stack widget with a Containter and give the height: MediaQuery.of(context).size.height, it's scrollable but I can't still see the whole content of the page. Where is my mistake, that's what I'm wondering? With what widget should I wrap Stack or is there a better way for my problem? In short, I'm stacking a Column on top of an Image and I need the whole Stack widget to be scrollable so I can see the whole content of the Stack widget. Here is the code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
overflow: Overflow.visible,
children: [
Image.asset(
'lib/modules/common/images/logo.png',
width: double.infinity,
height: 196.0,
),
Positioned(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
top: 136.0,
child: Column(
children: [
Container(), // some content inside the container
Container(), // // some content inside the container
],
),
),
],
),
),
),
);
}
Thanks in advance for the help!
if you mean to have a image on back and scrollable content at fron check this answer, if not let me know and share a prototype/image that you want.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 3,
child: Stack(
fit: StackFit.loose,
children: [
Align(
alignment: Alignment.topCenter,
child: Image.asset(
'assets/image.jpg',
width: double.infinity,
height: 196.0,
),
),
Positioned(
top: 136.0,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(
2,
(index) => Container(
height: 100,
width: double.infinity,
color: index % 2 == 0
? Colors.amberAccent
: Colors.cyanAccent,
), // some content inside the container
// some content inside the container
),
),
),
),
],
),
),
),
),
);
}
I'm building a ListItem and I want the text to be in a cardview that takes up the entire width and just enough height as the text size is. This is my code
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Align(
child: Container(
width: double.infinity,
height: 200.0,
color: Colors.pinkAccent,
),
),
Container(
width: double.infinity,
color: Colors.deepPurpleAccent,
child: Align(
alignment: Alignment.bottomCenter,
child: Card(
child: Text(
'some text',
textAlign: TextAlign.center,
),
)),
)
],
);
}
There are two widgets inside the stack, I want the second widget to lap above the first widget but just for a small part. Yet as you can see, the align of the second widget isn't at the bottom but at the top. I also tried switching Container and Align as child of each other but to no avail. Here's a screenshot of the resulting code
There is nothing like "BottomCenter" (with capital B). You should use Alignment.bottomCenter. But you probably need to set alignment for Stack.
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
width: double.infinity,
height: 200.0,
color: Colors.pinkAccent,
),
Container(
width: double.infinity,
color: Colors.deepPurpleAccent,
child: Card(
child: Text(
'some text',
textAlign: TextAlign.center,
),
),
)
],
)
I have Column and inside it I am using 7 Expanded widgets and one of them is ClipRRect, but there is a problem: It is not circle.
I think there are 2 ways:
Wrap it with a container and give it's hight value to it's width but I don't know how?
Use another widget?
As I use CachedNetworkImage, I can't use CircleAvatar.
Expanded(),
Expanded(),
Expanded(),
Expanded(
flex: 5,
//padding: EdgeInsets.symmetric(horizontal: 10),
child: TabBarView(
controller: _tabController,
children: <Widget>[
Center(
child: Text(
'tracks',
style: TextStyle(color: Colors.white),
)),
Container(
height: 20,
width: 20,
color: Colors.red,
child: AnimatedBuilder(
animation: _animationController,
child: AspectRatio (
aspectRatio: 1,
child: ClipOval(
//borderRadius: BorderRadius.circular(10000000.0),
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: thisSongInfo.albumImageUrl,
),
),
),
builder: (BuildContext context, Widget child) {
return Transform.rotate(
child: child,
angle: _animationController.value * 2.0 * math.pi,
);
},
),
),
Center(
child: Text(
'information',
style: TextStyle(color: Colors.white),
),
),
],
),
),
Expanded(),
Expanded(),
Expanded(),
I edit and put all code inside that expanded
also I put debugPaintSizeEnabled = true; im main
link:
https://imge.to/i/fU8vi
Wrap your ClipRRect widget with an AspectRatio widget with an aspectRation value of 1. This forces the child widget to be square.
Or, if suitable, use a CircleAvatar widget which displays its child in a circle - this could replace both the AspectRatio and the ClipRRect widgets.
Edit: This is actually because of the TabBarView which forces its children to be full width for some reason. Wrap the child of the TabBarView within a Row so that it's allowed to resize itself horizontally.