BOTTOM OVERFLOWED BY Infinity PIXELS?
when i implement this code the display shows Bottom Overflowed by infinity pixels. Anyone knows why? I want that the The Image Picker is in the top left corner.
Scaffold(
body: Builder(
builder: (context)=> Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
Here is what it Looks like now => but i want that the Image Picker is in the top left corner
So I have changed the script the Error is now gone but the Image picker is not display. It should be look like this here
Scaffold(
body: Builder(
builder: (context)=> Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
],
),
So thats my whole script Maybe that is better to understand.
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
File _image;
int _currentTabIndex = 0;
Future getImage() async{
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
print('Image Path $_image');
});
}
Future uploadPic(BuildContext context)async{
String fileName=basename(_image.path);
StorageReference firebaseStorageRef=FirebaseStorage.instance.ref().child(fileName);
StorageUploadTask uploadTask=firebaseStorageRef.putFile(_image);
StorageTaskSnapshot taskSnapshot= await uploadTask.onComplete;
setState(() {
print('Profile Picture uploaded');
Scaffold.of(context).showSnackBar(SnackBar(content: Text('Profile Picture Uploaded')));
});
}
@override
Widget build(BuildContext context) {
Future<DocumentSnapshot> getUserInfo()async{
var firebaseUser = await FirebaseAuth.instance.currentUser;
return await Firestore.instance.collection("SerX").doc(firebaseUser.uid).get();
}
final _kTabPages = <Widget>[
Center(child: Icon(Icons.new_releases, size: 64.0, color: Colors.white)),
Center(child: Icon(Icons.local_grocery_store, size: 64.0, color: Colors.white)),
Center(child: Icon(Icons.chat, size: 64.0, color: Colors.white)),
ListView(
children: <Widget> [
Center(
child: FutureBuilder(
future: getUserInfo(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
subtitle: Text(snapshot.data.data()["Email"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 10.0,
fontWeight: FontWeight.bold,),textAlign: TextAlign.right,
),
title: Text(snapshot.data.data()["Username"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 25.0,
fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
);});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");}
return Center(
child: SpinKitFadingCircle(color: Colors.white, size: 20.0),heightFactor: 29,
);
},
),
),
Scaffold(
body: Builder(
builder: (context)=> Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
],
),
Center(child: Icon(Icons.settings, size: 64.0, color: Colors.white)),
];
final _kBottmonNavBarItems = <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.new_releases, color: Colors.black), activeIcon: Icon(Icons.new_releases,color: Colors.grey) ,title: Text('News', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
BottomNavigationBarItem(icon: Icon(Icons.local_grocery_store ,color: Colors.black),activeIcon: Icon(Icons.local_grocery_store,color: Colors.grey), title: Text('Store', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),
),
BottomNavigationBarItem(icon: Icon(Icons.chat,color: Colors.black), activeIcon: Icon(Icons.chat,color: Colors.grey), title: Text('Chat', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
BottomNavigationBarItem(icon: Icon(Icons.supervisor_account,color: Colors.black), activeIcon: Icon(Icons.supervisor_account,color: Colors.grey), title: Text('Profile', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
BottomNavigationBarItem(icon: Icon(Icons.settings,color: Colors.black), activeIcon: Icon(Icons.settings,color: Colors.grey), title: Text('Settings', style: TextStyle(
color: Color(0xFF000000),
fontSize: 10.0,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),),
];
assert(_kTabPages.length == _kBottmonNavBarItems.length);
final bottomNavBar = BottomNavigationBar(
items: _kBottmonNavBarItems,
fixedColor: Colors.black,
currentIndex: _currentTabIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentTabIndex = index;
});
},
);
return Scaffold(
appBar: AppBar(
bottom: PreferredSize(
child: Container(
color: Colors.white,
height: 4.0,
),
preferredSize: Size.fromHeight(0)),
backgroundColor: Colors.black,
leading: Container(),
title: Text('Ser X' , style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 35,
fontWeight: FontWeight.bold,
fontFamily: 'Orbitron',
),),
titleSpacing: -45,
),
body: _kTabPages[_currentTabIndex],
backgroundColor: Colors.black,
bottomNavigationBar: bottomNavBar,
);
}
}
Updated
Scaffold(
body: Builder(
builder: (context)=> Container(
height: 200,
child: ListView(
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
So I uprgaded my Script again
ListView(
children: <Widget> [
Center(
child: FutureBuilder(
future: getUserInfo(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
subtitle: Text(snapshot.data.data()["Email"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 10.0,
fontWeight: FontWeight.bold,),textAlign: TextAlign.right,
),
title: Text(snapshot.data.data()["Username"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 25.0,
fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
);});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");}
return Center(
child: SpinKitFadingCircle(color: Colors.white, size: 20.0),heightFactor: 29,
);
},
),
),
Scaffold(
body: Builder(
builder: (context)=> Container(
height: 100,
child: ListView(
children: <Widget>[
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Container(
padding: EdgeInsets.only(left: 0, top: 0),
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 100.0, right: 40),
child: IconButton(
icon: Icon(
Icons.camera_alt,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
),
),
),
],
),
Solved Code!
ListView(
children: <Widget> [
Center(
child: FutureBuilder(
future: getUserInfo(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
subtitle: Text(snapshot.data.data()["Email"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 10.0,
fontWeight: FontWeight.bold,),textAlign: TextAlign.right,
),
title: Text(snapshot.data.data()["Username"], style: TextStyle(
color: Colors.white,
fontFamily: 'Orbitron',
fontSize: 25.0,
fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
);});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");}
return Center(
child: SpinKitFadingCircle(color: Colors.white, size: 20.0),heightFactor: 29,
);
},
),
),
SizedBox(height: 5.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
Container(
padding: EdgeInsets.only(left: 0, top: 0),
child: CircleAvatar(
radius: 60.0,
backgroundColor: Colors.white,
child: ClipOval(
child: SizedBox(
width: 110.0,
height: 110.0,
child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
:Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 50.0),
child: IconButton(
icon: Icon(
Icons.camera_alt,
color: Colors.white,
size: 30.0,
),
onPressed: (){
getImage();
},
),
)
],
),
RaisedButton(
color: Colors.white,
onPressed: (){
uploadPic(context);
},
),
],
),
serby
2 Answers
Why error?
Bottom is overflowed by infinity pixel because by default column take all the height available on the screen and if you give height to its child elements like by adding font size,padding,margin etc to its children then at some point its child does not fit into column and give this error.
Solution:
Use ListView because its adding scroll functionality but in this case you give specific height to column so column know the area in which it scroll.
To Align element to top left in column or row : use crossAxisAlignment.start
answered on Stack Overflow Aug 28, 2020 by 
Programmer_3
Programmer_3You can wrap the column with a SingleChildScrollView.
This overflow occured because the column is taking all available space that is the height of the screen in this case.
answered on Stack Overflow Aug 28, 2020 by 
theCaptainXgod
theCaptainXgodUser contributions licensed under CC BY-SA 3.0