#firebase #flutter #imagepicker
#firebase #флаттер #imagepicker
Вопрос:
когда я реализую этот код, на дисплее отображается Нижняя часть, заполненная бесконечными пикселями. Кто-нибудь знает почему? Я хочу, чтобы средство выбора изображений находилось в верхнем левом углу.
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);
},
),
],
),
),
),
),
Вот как это выглядит сейчас => но я хочу, чтобы средство выбора изображений находилось в верхнем левом углу
Итак, я изменил сценарий, ошибка теперь исчезла, но средство выбора изображений не отображается. Это должно выглядеть так здесь
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);
},
),
],
),
),
),
),
],
),
Так что, возможно, это весь мой сценарий, который лучше понять.
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);
},
),
],
),
),
),
),
],
),
Решаемый код!
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);
},
),
],
),
Комментарии:
1. Не могли бы вы показать изображение или эскиз, что вы хотите?
2. Теперь я загрузил изображение, как оно должно выглядеть.
Ответ №1:
Почему ошибка?
Нижняя часть переполнена бесконечным пикселем, потому что по умолчанию столбец занимает всю высоту, доступную на экране, и если вы задаете высоту его дочерним элементам, например, добавляя размер шрифта, отступы, поля и т.д. К его дочерним элементам, то в какой-то момент его дочерний элемент не помещается в столбец и выдает эту ошибку.
Решение:
Используйте ListView, потому что он добавляет функциональность прокрутки, но в этом случае вы задаете определенную высоту столбцу, чтобы столбец знал область, в которой он прокручивается.
Чтобы выровнять элемент по верхнему левому углу в столбце или строке: используйте crossAxisAlignment.start
Комментарии:
1. Ошибка переполнения устранена, спасибо, но она не отображает функцию Profil Picture в левом верхнем углу.
2. Выравнивание основной оси строки слева направо, и вы устанавливаете его в центр, тогда, как вы ожидаете, изображение профиля будет слева. измените выравнивание основной оси строки на выравнивание основной оси.начать
3. Когда я делаю это, консоль выдает мне эту ошибку: объекту RenderIndexedSemantics был присвоен бесконечный размер во время компоновки.
4. Итак, я загрузил весь скрипт.
5. Я все равно выяснил, в чем проблема, спасибо за помощь
Ответ №2:
Вы можете обернуть столбец с помощью SingleChildScrollView.
Это переполнение произошло из-за того, что столбец занимает все доступное пространство, которое в данном случае является высотой экрана.