Hello I'm new to flutter and I'm trying to make a stack scrollable
How can I make Scroll Inside a Stack without getting unbound error?
I'm using Stack in another Stack and I'm trying to make First Stack Scrollable
Stack(
children:[
Positioned(
top:0,
child:SingleScrollChildView(
child:firstStack()
),
),
Positioned(
bottom:0,
child:secondStack(),
),
]
)
first of all a code snippet well be a good idea for anyone to understand what you are going through .
second of all you can wrap your Stack with a SingleChildScrollView : hope this is helpful
If the stack is throwing an unbounded height error, wrap it inside a Container and give it a height. That's what I always do.
Second thing, don't give 0 values to the Positioned widget. If you're using the widget make sure to give at least 2 non-zero values to it.
This is how I'd probably do it:
Stack(
children: [
Positioned(
top: 10.0,
left: 10.0,
child: ListView(
child: Container(
height: 120.0,
child: firstStack(),
)
),
),
Positioned(
bottom: 0.0,
right: 10.0
ListView(
child: Container(
height: 120.0,
child: firstStack(),
)
),
),
]
),
Related
What is the best way to have a background gradient fill the entire screen, all while being in a SingleChildScrollView? I would like the screen to scroll only when necessary (when the items and bottom text overflow the screen). Note the Back button is a FAB.
Note: I have tried ConstrainedBox (but the scroll is weird when there's no overflow in the listview)
What's the best way to 1) fill the background completely, and 2) have scrolling activity only activate when the listview overflows?
My code:
Widget body() {
return SingleChildScrollView(
child: Container(
decoration: background(),
child: Column(children: [
listViewReminderBuilder(),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(5),
child: bottomText()),
SizedBox(height: 10),
])));
}
BoxDecoration Background() {
return BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
topColor,
bottomColor,
],
));
}
This is the result of the above code is shown below. The scroll works as I'd like (only scrolls when there's an overflow of listview items), but obviously the background doesn't fill the screen.
Many solutions online led me to the ConstrainedBox. My code and result is as follows:
Widget body() {
_screenHeight = MediaQuery.of(context).size.height;
return SingleChildScrollView(
child: Container(
decoration: background(),
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: _screenHeight),
child: Column(children: [
listViewReminderBuilder(),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(5),
child: bottomText()),
SizedBox(height: 10),
]))));
}
// background() was the same
The result. In this case, the background nicely fills the screen, but the screen is always scrollable and looks weird if the listview items aren't overflowing.
What's the best way to 1) fill the background completely, and 2) have scrolling activity only activate when the listview overflows?
first of all: wraping ListView with SingleChildScrollView is not good practice.
workaround:
use container only for background. by setting width infinity to fill entire screen.
no need to wrap with SingleChildScrollView if you have a ListView. just use Expanded widget.
Widget body() {
return Container(
width: double.infinity,
// here you can set height if you want.
// but since we use Column,by default it will expand the maximum height.
decoration: background(),
child: Column(children: [
// using Listview will make you widget not overflowing.
// wrap with expanded to make it fill available screen.
Expanded(child: listViewReminderBuilder(),),
SizedBox(height: 10),
Container(padding: EdgeInsets.all(5), child: Text('Back')),
SizedBox(height: 10),
]));
}
i just tried on dartpad. and it works fine.
I need your help. I am trying to replicate a design I saw from Instagram for personal growth. I have an Image inside Stack, the Stack is a child to a Container with Border radius. However, the image inside the box doesn't take after the border radius. I have tried different methods but none of them worked.
What I am getting is
VS what I am trying to get
How can I make the image have a border radius even though is Positioned outside the box ??
Here is a snippet of my code
Container(
width: 300,
height: 500,
decoration: BoxDecoration(
color: boxColor,
borderRadius: BorderRadius.circular(12.0),
),
child: Stack(
children: [
Positioned(
right: -150,
top: -200,
child: ClipRRect(
clipBehavior: Clip.antiAlias,
// borderRadius: BorderRadius.circular(12.0),
child:Image.asset(
height: width*.35,
width: width*.35,
"assets/box.png",
),
),
),
],
),
)
Include clipBehavior: Clip.hardEdge, on container
Container(
width: 300,
height: 500,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(12.0),
),
If you still like to use ClipRRect use it on top of container.
I am new to flutter and creating a project where the design contains rounded top navigation. In flutter we have tab bars. So I searched around but could not find the solution. There were solution for rounded tabs but not the tab bar as whole. Is it even possible or is there a work around it.
You can create custom tab bar using Container and Stack to positioned Container on top.
Something like this.
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: 80,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(25.0))
),
child: Row(
children: <Widget>[
//icons buttons
],
),
),
)
],
)
),
Currently the only way I could make this kind of curved effect would be through making 2 container, making 1 a child of another and making 1 container's colour into the background colour.
However I cannot replicate this effect if the background is an image. Could anyone assist?
Example of the code I use:
Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Container(
height: 100,
color: Color(0xFF0D6068),
),
Expanded(
child: Container(
color: Color(0xFF0D6068),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
)),
),
))
],
)),
);
You can make use of a Stack widget to achieve this, such that the background color or image would be at the back then the curved container would be stacked on it. Here is an example code.
Stack(children <Widget> [
Image.asset(''),
Container()
]
)
Instead of using an image asset, you can make use of BoxDecoration with the decoration parameter of a container. The BoxDecoration has an image parameter where you can provide your image with a DecorationImage() widget.
Hi Everyone I am creating a profile page for a flutter app.
The SliverAppBar needs to show the below view when in the expanded state:
And below view when the user scrolls the silver list.
As you see this is a custom stack that I can create.
I don't know how to do it in slivers in a flutter.
Any links would also be highly appreciated to learn in-depth about flutter and slivers especially.
Code for the collapsed stack:
Stack(
alignment: Alignment.topRight,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 12),
width: 2000,
height: 80,
decoration: BoxDecoration(boxShadow: [
BoxShadow(blurRadius: 5.0, color: Colors.black87)
])),
Container(
margin: EdgeInsets.only(right: 20, top: 5),
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(blurRadius: 5.0, color: Colors.black87)
],
border: Border.all(color: Colors.cyan, width: 3.0)),
child: CircleAvatar(
backgroundImage: AssetImage(
"assets/images/food/avocado-f.jpg"),
radius: 50,
),
)
],
),
You should use SliverPersistentHeader and create your own SliverPersistentHeaderDelegate.
In the build method you add your Stack view and you can use Transform or SizedBox to scale and transform the circle depending on the height of the header.
There is a nice tutorial that explains how to use this widget
https://medium.com/flutter-community/how-to-code-a-dynamic-header-in-flutter-e171ec2231bf