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
Related
I have a screen that contains a Row widget with 3 Column children. I want to add a space for the first children and another space for the second children. In general, I want a screen like this:
I try with these codes but not work correctly.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 10),
child: Column(
children: [
item(),
item(),
item(),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
children: [
item(),
item(),
item(),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Column(
children: [
item(),
item(),
item(),
],
),
),
),
],
);
Can you help me?
Add a SizedBox to the children of the Rows, each with different height.
I hope this will help you and I just modified it with some Container().
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 10),
child: Column(
children: [
Container(
height: 50,
color: Colors.red,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
children: [
//////here you have to add SizedBox widget with different heights
const SizedBox(
height: 40,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Column(
children: [
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
Container(
color: Colors.red,
height: 50,
),
],
),
),
),
],
)
Output:
You can add a SizedBox between the items. Like:
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Column(
children: [
item(),
SizedBox(height:20),
item(),
SizedBox(height:20),
item(),
],
),
),
),
I think that is simple, but works.
You can use a Container with margins in the items too.
If you want a more complex item, you can use ListView.separated.
ListView.separated(
separatorBuilder: (context, index) => Divider(
color: Colors.black,
),
itemCount: 20,
itemBuilder: (context, index) => Padding(
padding: EdgeInsets.all(8.0),
child: Center(child: Text("Index $index")),
),
)
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'm making a login screen, and from what I learned, I need to use SingleChildScrollView in order to prevent 'yellow-stripes' issues when TextFields are focused.
Whenever I add SingleChildScrollView, perhaps I lose any kind of widget alignment as MainAxisAlignment is not working anymore:
How is it looking like with SignleChildScrollView: Screenshot with SingleChildScrollView
How it should be looking like: Screenshot without SingleChildScrollView
I've tried anything but just can't figured it out.
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(bottom: 50),
child: TypeScript(textTypeScript: tsLogin),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
child: Column(
children: [
emailField,
SizedBox(height: 20),
passwordField,
Container(
height: 80,
padding: EdgeInsets.only(top: 10),
alignment: Alignment.topRight,
//child: passwordRecovery,
),
Container(
child: loginButton,
),
SizedBox(
height: 52,
width: MediaQuery.of(context).size.height; / 2,
child: orStripe,
),
Container(
padding: EdgeInsets.only(bottom: 10),
child: signButton,
),
],
),
),
],
),
),
),
);
}
}
Try to replace the SingleChildscrollview with the following:
CustomScrollView(
slivers[
SliverFillRemaining(
hasScrollBody: false,
child: YourChildWidget(),
),
),
)
I would suggest two things to you:
1 In Line4, try to change mainAxisAlignment.end inside Column to MainAxisAlignment.start
2 There's an error that i've pointed out in the code below.
Check these out and tell me if this resolves your problem?
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(bottom: 50),
child: TypeScript(textTypeScript: tsLogin),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
child: Column(
children: [
emailField,
SizedBox(height: 20),
passwordField,
Container(
height: 80,
padding: EdgeInsets.only(top: 10),
alignment: Alignment.topRight,
//child: passwordRecovery,
),
Container(
child: loginButton,
),
SizedBox(
height: 52,
width: MediaQuery.of(context).size.height / 2, //ERROR
child: orStripe,
),
Container(
padding: EdgeInsets.only(bottom: 10),
child: signButton,
),
],
),
),
],
),
),
),
In my flutter project, I haved used a Row where I aligned two text horizontally, the first Text size is fixed but the I want the second one to have as much width as the screen size.
Here's is my code-
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("City: "),
),
Container(
color: Colors.red,
child: Text("London"),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Country: "),
),
Container(
color: Colors.red,
child: Text("England "),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Address: "),
),
Container(
color: Colors.red,
child: Text("aaaaa zzzzz wwwww qqqqqq rrrrr"),
)
],
)
),
),
),
With the above code I got the following output-
The problem is the black marked section in the image.
So, I need help to know how the text will take as much width as the screen size & rest of the text will be shown in the next line.
The text widget has a property called overflow you can use that to either clip the extra string or put ellipsis. You could try different types of TextOverflow like a clip, ellipsis, fade, etc. As for the putting it to the next line you could set maxLines property to any number you like.
example:
Container(
width: MediaQuery.of(context).size.width / 2
child: Text(
"Hello world!!!!",
maxLines: 2,
overflow: TextOverflow.ellipsis
),
);
This problem can be solved by a widget called Flexible. I had to write few more lines for solving these but it works perfectly for the problem mentioned in the question.
So, here's the code-
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("City: "),
),
Container(
color: Colors.red,
child: Text("London"),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Country: "),
),
Container(
color: Colors.red,
child: Text("England "),
)
],
)
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: (
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
color: Colors.blue,
child: Text("Address: "),
),
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.red,
child: Text("aaaaa zzzzz qqqqqq eeeeeeeeeeeeee "),
)
],
),
),
],
)
),
),
),
how can i move a container to right.
I have 3 icon and i need move last icon to right so 2 other icons was at left
I writing app for flutter
example a post from my app
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeLikedBy.count.toString()),
],
),
),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeMediaToComment.count.toString()),
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
Simply use a - Spacer() widget to fill up space in between.
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text('10'),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeLikedBy.count
.toString()),
],
),
),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node
.edgeMediaToComment.count
.toString()),
Spacer(), // Add this
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
you can follow the answer above or add the IconComment and it is value on the same row and set the mainaxis alignement to MainAxisAlignment.spaceBetween
try the code below
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeLikedBy.count
.toString()),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeMediaToComment.count
.toString()),
],
),
),
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
you can modify that margin right to make it fit perfectly