I am developing a city travel guide application for my project. In this project, I have page like this:
Screenshot
In this page, I want to make the container with red border scrollable vertically until green line with DraggableScrollableSheet . And also I want to add TabBarView to the same container and scroll horizontally.
But I can not handle, encountered with many render errors.
How can i fix this?
Here is the full code:
import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';
class CategoryScreen extends StatefulWidget {
final double _expandedBottomSheetBottomPosition = 0;
final townimage;
const CategoryScreen({Key key, this.townimage}) : super(key: key);
#override
_CategoryScreen createState() => _CategoryScreen(
townimage: this.townimage,
);
}
class _CategoryScreen extends State<CategoryScreen>
with TickerProviderStateMixin, AfterLayoutMixin<CategoryScreen> {
var townimage;
_CategoryScreen({this.townimage});
double _bottomSheetBottomPosition = -330;
bool isCollapsed = false;
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(elevation: 0, backgroundColor: Colors.transparent),
body: Container(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Hero(
tag: "image" + townimage,
child: Image.asset(
"images/photos/turkey.jpg",
fit: BoxFit.cover,
)),
AnimatedPositioned(
duration: const Duration(milliseconds: 500),
curve: Curves.decelerate,
bottom: _bottomSheetBottomPosition,
left: 0,
right: 0,
child: Column(
children: [
_tabBar(),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3.0),
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 32),
height: 90,
child: Row(
children: [
Text(
"Historical Places",
style: TextStyle(
fontSize: 28.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
SingleChildScrollView(
physics: ScrollPhysics(),
child: _clipsWidget(),
),
],
),
),
],
),
),
],
),
),
);
}
Widget _clipsWidget() {
return Container(
color: Theme.of(context).canvasColor,
height: 250,
margin: const EdgeInsets.symmetric(horizontal: 16),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.account_balance_rounded),
Text("I want to add TabBarView to this area"),
Text(
"Some Future Builder elements will be implemented.",
)
],
),
));
}
#override
void afterFirstLayout(BuildContext context) {
Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
isCollapsed = true;
_bottomSheetBottomPosition = widget._expandedBottomSheetBottomPosition;
});
});
}
Widget _tabBar() {
return TabBar(
controller: _tabController,
indicatorColor: Colors.transparent,
isScrollable: true,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelPadding: EdgeInsets.symmetric(horizontal: 10),
tabs: [
Container(
height: 70,
child: Tab(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Theme.of(context).canvasColor.withOpacity(0.8),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.account_balance_rounded,
),
),
),
],
)),
),
Container(
height: 70,
child: Tab(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Theme.of(context).canvasColor.withOpacity(0.8),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.park,
),
),
),
],
)),
),
]);
}
}
I am trying to bring a List of containers and i want to change the details inside this list of containers using fire store. But when i am running the program the page is showing blank. The output i want is like this image,
The output i am getting. And my second question is how to add images to the field inside the firestore.
Thanks in advance, it is really hard to publish a question in stack overflow.
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//1st box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_1']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_1']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_1_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_1_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
)),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_1']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
//2nd box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_2']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_2']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_2_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_2_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
),
),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_2']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
I don't think you need the second listview, but if you do, try this:
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
//1st box
...
trying to expand Expanded or Container vertically to match its height with Row widget height, here is my code
#override
Widget build(BuildContext context) {
return InkWell(
onTap: ()=> onDepartClicked(),
child: Container(
padding: EdgeInsets.all(16),
child: Card(
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(department.name,
overflow: TextOverflow.visible,
style: TextStyle(fontSize: 20),
),
Container(
margin: EdgeInsets.only(top: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset("assets/images/feedback.png", width: 20, height: 20,),
SizedBox(width: 4,),
Text(department.phone),
SizedBox(width: 16,),
Image.asset("assets/images/feedback.png", width: 20, height: 20,),
SizedBox(width: 4,),
Text(department.type),
],
),
),
Container(margin: EdgeInsets.symmetric(vertical: 8),child: Divider(height: 0.3, color: Colors.grey,)),
Container(
child: Text(department.description,
maxLines: 3,
style: TextStyle(fontSize: 13),
),
)
],
),
),
),
Container(
width: 40,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Image.asset("assets/images/feedback.png",
width: 20,
height: 20,
fit: BoxFit.scaleDown,
),
],
),
),
],
),
),
),
);
}
I want to expand this block in the above code (second child of the Row):
Container(
width: 40,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Image.asset("assets/images/feedback.png",
width: 20,
height: 20,
fit: BoxFit.scaleDown,
),
],
),
),
I want to achieve this view with blue area expanded vertically in parent
Edit after more clarification on the question:
The idea behind the code below is like the This Image.
Left child of the row contains a column, the column has 3 children.
The first child of the column is the title, second one is a Row of phone and type and the last one is the description.
For "phone" and "type" you can use ListTile but you should put them on something like Flexible or define size for them.
I deinded a Listview and put 10 card inside it.
Here is the code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView.builder(
padding: EdgeInsets.all(16.0),
itemBuilder: (BuildContext context, int index) {
return _card();
},
shrinkWrap: true,
itemCount: 10,
),
),
);
}
Widget _card() {
return Card(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
fit: FlexFit.tight,
flex: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'UBIT',
overflow: TextOverflow.visible,
style: TextStyle(fontSize: 20),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.message),
SizedBox(width: 4),
Text('+09210000000'),
SizedBox(width: 16),
Icon(Icons.message),
SizedBox(width: 4),
Text('Science'),
],
),
Divider(),
Text(
'Lorem Ipsum ist ein einfacher Demo-Text für ' +
'die Print- und Schriftindustrie. Lorem Ipsum ' +
'ist in der Industrie bereits der Standard Demo-Text' +
' seit 1500',
textAlign: TextAlign.justify,
),
],
),
),
Padding(
padding: EdgeInsets.only(left: 8.0),
child: Icon(
Icons.message,
size: 30.0,
),
),
],
),
),
);
}
}
Wrap the Container in a SizedBox with height:double.infinity to make it take all the available space, in your case the height of the row.
Expanded(
child: SizedBox(
height:double.infinity,
child:Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
),
child: Image.asset("assets/images/feedback.png", width: 20, height: 20, fit: BoxFit.scaleDown,),
),
),
)
Hi I am trying to create login screen. It is working fine for me. When I open the keyboard then it is giving me an error Bottom overloaded by 213 pixels.
Widget LoginPage() {
return new Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.05), BlendMode.dstATop),
image: AssetImage('assets/images/mountains.jpg'),
fit: BoxFit.cover,
),
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal#live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: new FlatButton(
child: new Text(
"Forgot Password?",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
textAlign: TextAlign.end,
),
onPressed: () => {},
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => {},
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
Text(
"OR CONNECT WITH",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.only(right: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xff3B5998),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea90,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"FACEBOOK",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.only(left: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xffdb3236),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea88,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"GOOGLE",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
],
),
)
],
),
));
}
Does anyone know what could be the issue ?
I would suggest replacing the top Column widget with a ListView, that automatically resizes on keyboard input, whilst also supporting scrolling.
If you really want this setup as it is, you can edit your Scaffold with the parameter
resizeToAvoidBottomPadding: false
That should make the error disappear
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
...
)
As Andrey said, you may have issues with scrolling, so you may try
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
body: SingleChildScrollView(child: YourBody()),
)
With resizeToAvoidBottomPadding: false in Scaffold, You don't see all the widgets that are below the open textfield. The solution is to insert a container with a SingleChildScrollView inside. Example:
Container(
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
color: viewModel.color,
child: SingleChildScrollView(child:"Your widgets"));
you usually need to provide a scroll widget on top of your widgets because if you try to open the keyboard or change the orientation of your phone, flutter needs to know how to handle the distribution of the widgets on the screen.
Please review this resource, you can check the different options that flutter provide Out of the box, and choose the best option for your scenario.
https://flutter.io/widgets/scrolling/
wrap your child view into ListView will solve the prob. Please check this
class _LoginScreenState extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new Text("jk", style: TextStyle(fontFamily: "mono_bold")),
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(),
decoration: InputDecoration(
labelText: "Email",
contentPadding: EdgeInsets.all(8.0)
),
keyboardType: TextInputType.emailAddress,
)
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(
),
decoration: InputDecoration(
labelText: "Password"
),
keyboardType: TextInputType.text,
obscureText: true,
),
),
],
),
),
],
)
),
);
}
wrap your column into SingleChildScrollView will solve the problem. Please check this:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(),
TextField(),
],
),
))));
}
And You also use for removing yellow black overflow line
resizeToAvoidBottomPadding: false
but in this case, TextField does not move up on click time.
wrap with SingleChildScrollView Widget here's my code to solve this situation:
it is best and easiest method
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Hero(
tag: 'logo',
child: Container(
height: 200.0,
child: Image.asset('images/logo.png'),
),
),
SizedBox(
height: 48.0,
),
TextField(
onChanged: (value) {
//Do something with the user input.
},
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter username'),
),
SizedBox(
height: 8.0,
),
TextField(
onChanged: (value) {
//Do something with the user input.
},
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter password'),
),
SizedBox(
height: 24.0,
),
RoundedButton(
colour: Colors.blueAccent,
text: 'Register',
onPressed: () {
//later todo
},
),
],
),
),
You can set resizeToAvoidBottomInset: false for avoiding overflow, but you can't reach fields in bottom of page, which can be covered by keyboard.
Or you can wrap body of Scaffold inside SingleChildScrollView
You can enclose all the widgets within the ListView.
So you can scroll it and the overloaded will disappear.
you should add resizeToAvoidBottomInset: false, and put your button in child:SingleChildScrollView() like the following code below :
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: PreferredSize(
preferredSize:const Size(double.infinity,100),
child:(ResponsiveLayout.isTinyLimit(context) ||
ResponsiveLayout.isTinyHeightLimit(context))
? Container()
: const AppBarWidget(),
),
body: Center(
child:SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center ,
children: [
Text("Temperature"),
LineChartSample2(),
Text("Gas Level"),
LineChartSample2(),
on?Icon(Icons.lightbulb,
size:100,
color: Colors.lightBlue.shade700 ,
):const Icon(Icons.lightbulb_outline,
size:100,
),
ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: on? Colors.green: Colors.white10),
onPressed: (){
dbR.child("movement").set({"Switch":!on});
setState(() {
on = !on;
});
},
child:on ? const Text("On"):const Text("Off"))
],
),
),
) ),
),
);
Put your content in to SingleChildScrollView and add a ConstrainedBox and try
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
Wrap your top column inside SingleChildScrollView.
Make you layout scrollable.
You can wrap your Fields in single child ScrollView of Flutter.
This align items bottom to top,
Try this..
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
reverse: true,
Remove unwanted padding top and bottom
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
top: size.width * 0.15,
bottom: size.width * 0.15,
),
to change by this
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
),
This worked for me.
please set resizeToAvoidBottomPadding: false and set scrollPadding in textField
Instead of column widget try to use flex widget, which might solve your problem.
Try wrapping your main Column with
1.(ListView and give property shrinkWrap: true,) List view has property children: [], or
2.( SingleChildScrollView() )but it has only child: , .
Something like:
child: ListView(shrinkWrap: true, children: <Widget>[
new Column(children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal#live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
])
]),