My problem is i have to set fixed height for TabBarView to solve RenderBox error, unfortunately this size is fixed and it couldn't expanded by child heigh. how can i resolve that?
i tested Expanded, SizedBox.expanded but it doesn't any change
Scaffold <----------------parent
SingleChildScrollView <---child
Stack <-----------------child
Padding <-----------------child
Column <-----------------child
Container( <--------------child
height: 250.0,
child: TabBarView(
children: [
Column(
),
Column(
),
Column(
),
],
controller: tabController,
),
),
);
I am not sure how you want your UI to look like, but you can try these 2 solutions:
Use LimitedBox and give some maxHeight
SingleChildScrollView(
physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
LimitedBox( // use this
maxHeight: 200, // give some maxHeight
child: TabBarView(
children: [
FlutterLogo(colors: Colors.orange, size: 100,),
FlutterLogo(colors: Colors.red, size: 100),
],
),
),
SizedBox(height: 50),
FlutterLogo(size: 100),
SizedBox(height: 100),
FlutterLogo(size: 100),
],
),
],
),
)
Remove SingleChildScrollView and add Expanded
Stack( // remove SingleChildScrollView
children: <Widget>[
Column(
children: <Widget>[
Expanded( // use Expanded
child: TabBarView(
children: [
FlutterLogo(colors: Colors.orange),
FlutterLogo(colors: Colors.red),
],
),
),
SizedBox(height: 50),
FlutterLogo(size: 100),
SizedBox(height: 100),
FlutterLogo(size: 100),
],
),
],
)
Related
I have a Column and inside that Column, I have SingleChildScrollView and inside it I have another Column. This is not working:
Column(
children: <Widget>[
SliderWidget(SliderList, "text", "text"),
const SizedBox(height: 20),
SingleChildScrollView(
child: Column(
children: [
text("Some text"),
Expanded(
child: Padding(
padding: const EdgeInsets.all(24.0),
child:
GridListing(FavouriteList, false),
),
),
],
),
),
],
),
Please suggest me alternate.
SingleChildScrollView and Expanded both are trying to get infinite height. Providing height on GridView will solve the issue.
To understand the overflow, we need to check how SingleChildScrollView is getting size and setting on children. In order to get available space, we need wrap SingleChildScrollView with Expanded widget.
Now we can wrap GridView with SizedBox(height:x
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Column(
children: <Widget>[
// SliderWidget(SliderList, "text", "text"),
const SizedBox(height: 20),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Text("Some text"),
SizedBox(
height: constraints.maxHeight * .6,
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
children: List.generate(
222,
(index) => Container(
color: Colors.red,
width: 200,
height: 200,
child: Text(" $index"),
),
),
),
),
Container(
height: 500,
color: Colors.pink,
),
],
),
),
),
],
),
),
);
A better way of doing it will be using CustomScrollView
If you use the IntrinsicHeight widget around the inner column flutter can display your widget tree.
Column(
children: <Widget>[
SliderWidget(SliderList, "text", "text"),
const SizedBox(height: 20),
SingleChildScrollView(
child: IntrinsicHeight( // added widget
child: Column(
children: [
text("Some text"),
Expanded(
child: Padding(
padding: const EdgeInsets.all(24.0),
child:
GridListing(FavouriteList, false),
),
),
],
),
),
),
],
),
It looks fine when the keyboard is hidden but when displayed the container is on top of it and it should be behind (not related to the content of the container):
SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
)
If you use Scaffold above your code, change it with Material widget, and the problem will gone. Just like this:
return Material(
child: SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
),
);
I would like to do a scroll that the map part fixed on top, once i scroll up those widget can be overlay on top of the map.
i tried to do the scroll effect.
i use a stack with one container(the map) and one SingleChildScroll.
but the map is not able to tap after i put the SingleChildScroll on top of the map.
So is there any ways to made this out?
Any suggestions that i can do this design?
Thanks a lot!
This is the normal view
after i scroll up little bit
here is the code
return Scaffold(
key: _scaffoldKey,
backgroundColor: ThemeColors.orangeYellow,
floatingActionButton: Padding(
padding: EdgeInsets.only(right: 30),
child: Row(
children: [
_profileButton,
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
body: Stack(
children: [
Positioned(
top: 0,
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Container(),
_map,
_nearbyRestaurantBox,
_getCurrentLocationButton,
],
),
),
SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(
children: <Widget>[
Column(
// alignment: Alignment.bottomCenter,
// overflow: Overflow.visible,
children: <Widget>[
// Container(),
// _map,
Padding(
padding: EdgeInsets.only(top: _mapHeight - 70),
),
Stack(
children: [
Column(
children: [
SizedBox(
height: 70,
// child: Container(
// // color: Colors.green,
// ),
),
SizedBox(
height: 70,
child: Container(
color: Colors.amber,
),
)
],
),
// Padding(
// padding: EdgeInsets.only(top: 35),
// ),
Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.only(top: 5),
child: _searchBox,
),
)
],
),
// Positioned(top: 0, child: _map),
// _searchBox,
// _nearbyRestaurantBox,
// _getCurrentLocationButton,
],
),
Container(
color: ThemeColors.orangeYellow,
child: Center(
child: Column(
children: <Widget>[
_categoryBox,
..._buildBanners(),
],
),
),
),
],
),
)
],
),
);
I am trying to add SingleChildScrollView for the page but it appears to be not working, can't figure the reason. I am not getting any overflow errors as such but the Fitbutton is not visible on the screen. I tried searching on the net but didn't find any relevant solution.
This is the code snippet I tried:
return Scaffold(
body:SingleChildScrollView(
child: Form(
key:_formKey,
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Stack(
children: <Widget>[
Container(
decoration:( ...
),
)
),
Positioned(
top: MediaQuery.of(context).size.width * 0.10,
child: Container(
margin: EdgeInsets.all(13.0),
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Welcome",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 25.0),),
SizedBox(
height: 22,
),
Stack(
alignment: Alignment.centerLeft,
children: [
Container(
height:60.0,
padding: EdgeInsets.only(left: 53.0),
child: buildNameField()
),
CircleAvatar(
...
),
],
),
SizedBox(
height: 22.0,
),
Stack(
alignment: Alignment.centerLeft,
children: [
.....
],
),
SizedBox(
height: 10,
),
Stack(
alignment: Alignment.centerLeft,
children: [
...
],
),
SizedBox(height: 22),
FitButton(
....
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: _buildSignInButton(),
),
]
),
),
),],
),
),
),),
);
Any help would be great !!
Remove SingleChildScrollView from Form and
Wrap to Column may be solved.
Try wrapping the form in a sizedBox and then wrapping the sizedBox with the SingleChildScrollView
I have an expanded widget for my ClipRRect, which I think I need, but I also need to spacebetween my row, but I can't manage it. If I wrap it in an expanded widget it changes the size of my image in ClipRRect, which I don't want to do. This is my code:
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(6),
child: GestureDetector(
onTap: function,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 1,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Stack(
children: <Widget>[
assetImage,
],
),
),
),
Row(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('$myText -', style: myTextStyle),
SizedBox(width: 5.0,),
Text('$locationText', style: myTextStyle),
],
),
Card(
elevation: 1,
color: Colors.white,
shape: cardBorder,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$myText - $endmyText mins', style: myTextStyle,),
),
),
],
),
],
),
),
),
);
}
Assuming your question says you want to divide widgets with equal spaces, for it replaces Row with Wrap widget
Wrap(
direction: Axis.horizontal,
spacing: 30, // add space in between widget
children: <Widget>[
Wrap(
spacing: 30, // add space in between widget
direction: Axis.horizontal,