I have an horizontal SingleChildScrollView widget with variable amount of different buttons. I want to display button with right arrow only when there is too much buttons to show all on screen. I want to avoid situation when someone could dont know about more buttons hidden behind right edge of the screen.
How to achieve this?
Container(
height: iconsBarHeight,
color: Theme.of(context).scaffoldBackgroundColor,
padding: const EdgeInsets.fromLTRB(16, 16, 8, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Button2(),
Button4(),
Button1(),
Button6(),
Button7(),
Button3(),
Button2(),
],
),
),
);
you can add ScrollControlller to SingleChildScrollView, and get the max extent of it. If max extent is greater than width of screen, then show the button.
scrollController.position.maxScrollExtent
Related
I have this code
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
HomeHeader(),
Container(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
TitleCard(title: "Popular Coffee Bean"),
SizedBox(height: 5),
PopularCoffeeBeans(), //widget Overflowed
SizedBox(height: 10),
TitleCard(title: "Implementation"),
SizedBox(height: 5),
],
),
),
],
),
);
I want to try auto set height that the column shrinks to fit the children. I dont know whats wrong in my code.
I have try to wrap my first Column with Flexible or Expanded Widget, but thats still not working.
any solve for this?
this is my output
The error is not in your column but in your PopularCoffeBeans() Widget. In that container, wherever you have defined the height increase it by 26 pixels. And as for the problem of running it in smaller screen size, I guess you are trying to define height using the screen height which is usually not a good practice. It is better to define a fixed width to avoid the override solution.
I have solve my problem. the problem come, becaue i wraping my horizontal scroll direction using ListView.builder. ListView.builder is bad thing for now to create a horizontal scroll direction, of course if in 1 page there are many scroll pages. ListView.builder only support shrinkWrap by main Axis direction, thats mean shrinkWrap will be fine for vertical scroll Direction, but not good for horizontal scroll Direction.
I try to change that ListView.builder to SingleChildScrollView with simple For loop to get index Data. And with SingleChildScrollView, you dont need to set height of parent widget because the height will follow the size of the children who are inside.
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
padding: EdgeInsets.all(5),
child: Row(
children: [
for(int index = 0; index < data_variable.length; index++)
Container(
padding: EdgeInsets.only(right: 5),
child: Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Center(
child: Text(data_variable[index]),
),
),
),
],
),
),
)
try giving more height to PopularCoffeeBean card your container seem to be overflowing from card container
I wanna make a Listview where every items has the 'width' of the screen size, scrolling horizontally between them.
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Container(
child: Image.asset("assets/images/tests/asset0.PNG"),
width: MediaQuery.of(context).size.width,
),
Container(
child: Image.asset("assets/images/tests/asset1.PNG"),
width: MediaQuery.of(context).size.width,
),
],
),
But (like if you swipe between many pictures horizontally on instagram) i want the children to be full on page (not half half or something if you start scrolling between them).
Any ideas?
Use PageView.builder instead ListView
I have a home/login screen which is made up of a column that fills the entire screen like so:
Column(
children: <Widget>[
Expanded(
child: Container(
child: Logo(),
),
),
showThis ? This() : That(),
],
),
The second child of the column is dynamic and can have different heights, and this screen will have inputs so the keyboard will also affect the height.
I want to center Logo() vertically within the container when it's small (e.g. when keyboard is active), but limit how much the 'top margin' is able to grow, so that when the keyboard is hidden and This()/That() is small enough, Logo() will be in a static position on the screen, say 150 from the top (no longer centred vertically).
One method I have tried was using 2 empty Expanded() above and below Logo() and wrapping the top part in a ConstraintedBox(), but I am not able to get it to behave correctly.
Have you tried with Center() and also if you wanna in a specific position use Stack, for example
Stack(
children: <Widget>[
showThis(),
Positioned(top: 150, child: Logo())
],
)
This is what ended up working for me:
Column(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
// constrain top spacing with a max height
Flexible(child: Container(height: 160)),
_logo(),
Spacer(),
],
),
),
_bottomWidget(),
],
),
I have been working on flutter, and now have to make the Tab Bar for the page. Since I've succeeded in making the tabs, but there is one thing which is not letting me complete my task which is this,
I have a design blueprint which is like this:
Column{
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <widget>[
Text("Hello World!"),
Container(child: TabWidget())
]
}
I have not given any specific height to the container of the TabWidget() since I wanted the Tabs to take up the full height till the bottom.
TabWidget
child: TabBar(
controller: _controller,
tabs: [
new Tab(
child: Padding(
padding: EdgeInsets.only(top: 18.0),
child: Text(""),
)
),
new Tab(
child: Padding(
padding: EdgeInsets.only(top: 18.0),
child: Text(""),
)
),
]
)
),
Container(
//Deifining the height here, not deifing it will hide the content of the tabs
height: MediaQuery.of(context).size.height/2.3,
child: new TabBarView(
controller: _controller,
children: <Widget>[
new Container(
padding: EdgeInsets.only(top: 15.0),
child: Listview(
scrollDirection: Axis.Vertical,
children: <Widget> [
...
]
)
),
new Container(
padding: EdgeInsets.only(top: 15.0),
child: Listview(
scrollDirection: Axis.Vertical,
children: <Widget> [
...
]
)
)
]
)
)
]
);
Here is the catch, now I have tried my level best to get the result and hence did this :
Use of Expanded() in the TabWidget to take up the height
Use of double.infinity() in the height element of TabBarView
I have read this answer : TabBarView without bounded height, but I don't want my screen to scrollable, Silver is not required in this case. Just the TabBarView should be expanded till the bottom irrespective of from where it is starting
I don't want to give a particular height to my TabBarView, instead, I want it to take the full height till the bottom irrespective of the screen, so my height is dynamic as per the screen.
I'd like to get some inputs on this so that I'd achieve my point. I'm using ListView() in the child of TabBarView, so even if the portion size is small of the screen of the phone user will still be able to scroll the content. But the height should be till bottom, doesn't matter what the screen's size. Thanks.
Any queries are welcome here.
If you can calculate the height of other widgets in the screen above the tabBar then using MediaQuery.of(context).size.height you will get the height of the screen. Deduct the remaining height from the screen height and you can use the resulting value.
P.S. Be careful with the calculations and deduct every height value other than the tab including the safe area one that you will get from MediaQuery.of(context).padding.top & MediaQuery.of(context).padding.bottom.
I have a Stack widget that contains two Image widgets, one image overlaying the other. One image has top set to 10 so it sits 10 pixels higher on the screen. Unfortunately the 10.0px gets cut off at the bottom of the screen. If I set an overflow.visible then I can see it.
I wrap the stack with a GestureDetector the 10.0px overflow is not inside the GestureDetector so when a user clicks on the bottom of the image, nothing happens. The images will be different sizes so I can't set a definite height.
Is there a way to increase the size of the GestureDector to the size of its children?
return new GestureDetector(
onTapDown: (x) => print('onTapDown'),
child: new Stack(
overflow: Overflow.visible,
children: [
new Positioned(
child: shadowImage,
top: 10.0,
),
new Positioned(
child: initialImage,
),
],
),
);
Can (should?) Stack expand its size to its positioned children?
No. But if you want the following, then your child should not be positionned.
Stack, if it has one, will size itself around the first non-positionned child.
So you could transform your shadowImage to
children: [
new Padding(
padding: const EdgeInsets.only(top: 10.0),
child: shadowImage
),
new Positioned(
child: initialImage,
),
],