如何在 Flutter margin/padding 的情况下将图像放在屏幕中央？
How to put Image in Center of the screen whithout margin/padding in Flutter?
大家好，你们好吗？我想把这张图片放在屏幕中间，它只是一张图片，下面有一些文字，但我找不到不使用填充或边距的方法。当我使用填充或边距缩小图像时，当我转到对话框弹出屏幕时，给我看这个。
image of the error
那么，我怎样才能将图像独立于任何东西放在屏幕中央？我已经尝试使用 Center() 和 Container，但 none 有效。
下面是我的代码。我会用这个符号标记我想更改的代码部分 *.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'dialogAddUser.dart';
class HomePage extends StatelessWidget {
static String tag = '/home';
@override
Widget build(BuildContext context) {
Firebase.initializeApp();
var snapshots = FirebaseFirestore.instance
.collection('senhas')
.where('excluido', isEqualTo: false)
.orderBy('data')
.snapshots();
return Scaffold(
backgroundColor: Colors.grey[200],
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(top: 60, bottom: 0, left: 10),
child: Text.rich(TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Bem-vindo(a)',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500),
),
TextSpan(
text: '\nSuas senhas cadastradas',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300),
)
],
)),
),
StreamBuilder(
stream: snapshots,
builder: (
BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot,
) {
// Mensagem de erro
if (snapshot.hasError) {
return Center(
child: Text('Ocorreu um erro: \n${snapshot.error}'));
}
// Bolinha carregando enquanto processa os arquivos.
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
// Se nenhuma senha for encontrada
**// This is the Part!**
**********************************************
if (snapshot.data.docs.length == 0) {
return Column(
children: <Widget>[
Image(
image: AssetImage('assets/no_data_found.png'),
height: 350,
),
Container(
margin: const EdgeInsets.fromLTRB(30, 10, 30, 0),
child: Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Oops!\n',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500)),
TextSpan(
text: 'Nenhuma senha encontrada',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
],
),
textAlign: TextAlign.center,
),
),
),
// Imagem no_data_found
],
);
}
********************************************
// Mostrando as senhas
return Flexible(
child: ListView.builder(
itemCount: snapshot.data.docs.length,
itemBuilder: (BuildContext context, int i) {
var doc = snapshot.data.docs[i];
var itens = doc.data();
return Container(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
margin: const EdgeInsets.fromLTRB(15, 15, 15, 5),
// Layout de cada senha
child: ListTile(
isThreeLine: true,
leading: IconButton(icon: Icon(Icons.person_rounded)),
title: Text(itens['nomeDaSenha'],
style: TextStyle(
fontSize: 25, color: Colors.orange[700])),
subtitle: Text("Senha: ${itens['senha']}",
style: TextStyle(fontSize: 20)),
trailing: IconButton(
icon: Icon(
Icons.delete,
size: 30,
color: Colors.red[300],
),
onPressed: () {
doc.reference.delete();
Fluttertoast.showToast(
msg: "Senha apagada",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.grey[500]);
},
),
),
);
},
),
);
}),
],
),
// Floating button Adicionar
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 15, right: 5),
child: FloatingActionButton(
onPressed: () => modalCreate(context),
tooltip: 'Adicionar',
child: Icon(Icons.add),
),
),
);
}
}
有关代码的任何问题，请告诉我。期待答案，谢谢。
尝试使用定位和居中图像，您可以使用 MediaQuery 获取屏幕的大小。的（上下文）。尺寸。宽度
Expl = top : (MediaQuery.of(context).size.height / 2) - image.height /2
您可以使用此示例布局。简单来说，我使用的是 Stack 居中对齐和 Container 环绕在外面以填充屏幕。
完整示例：
import "package:flutter/material.dart";
main() {
runApp(MaterialApp(
home: HomePage(),
));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
// This set the position of the inside Container to top-left
Align(
alignment: Alignment.topLeft,
child: Container(
margin: const EdgeInsets.only(top: 60, bottom: 0, left: 10),
child: Text.rich(TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Bem-vindo(a)',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500),
),
TextSpan(
text: '\nSuas senhas cadastradas',
style:
TextStyle(fontSize: 25, fontWeight: FontWeight.w300),
)
],
)),
),
),
// This Column will align to center
Column(
mainAxisSize: MainAxisSize.min,
children: [
Image(
image: AssetImage('assets/no_data_found.png'),
height: 350,
),
Container(
margin: const EdgeInsets.fromLTRB(30, 10, 30, 0),
child: Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Oops!\n',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500)),
TextSpan(
text: 'Nenhuma senha encontrada',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
],
),
textAlign: TextAlign.center,
),
),
),
],
),
],
),
),
// Floating button Adicionar
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 15, right: 5),
child: FloatingActionButton(
onPressed: () {},
tooltip: 'Adicionar',
child: Icon(Icons.add),
),
),
);
}
}
您可以用容器包裹该列，并将其宽度和高度设置为满屏或您想要的大小，然后像这样将其居中对齐
return container(
width:mediaquery.of(context).size.width,
height:mediaquere.of(context).size.height,
alignment:Aligment.center,
child :Column(
children: <Widget>[
Image(
image: AssetImage('assets/no_data_found.png'),
height: 350,
),
Container(
child: Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Oops!\n',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500)),
TextSpan(
text: 'Nenhuma senha encontrada',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
],
),
textAlign: TextAlign.center,
),
),
),
// Imagem no_data_found
],
);
);
大家好，你们好吗？我想把这张图片放在屏幕中间，它只是一张图片，下面有一些文字，但我找不到不使用填充或边距的方法。当我使用填充或边距缩小图像时，当我转到对话框弹出屏幕时，给我看这个。
image of the error
那么，我怎样才能将图像独立于任何东西放在屏幕中央？我已经尝试使用 Center() 和 Container，但 none 有效。
下面是我的代码。我会用这个符号标记我想更改的代码部分 *.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'dialogAddUser.dart';
class HomePage extends StatelessWidget {
static String tag = '/home';
@override
Widget build(BuildContext context) {
Firebase.initializeApp();
var snapshots = FirebaseFirestore.instance
.collection('senhas')
.where('excluido', isEqualTo: false)
.orderBy('data')
.snapshots();
return Scaffold(
backgroundColor: Colors.grey[200],
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(top: 60, bottom: 0, left: 10),
child: Text.rich(TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Bem-vindo(a)',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500),
),
TextSpan(
text: '\nSuas senhas cadastradas',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300),
)
],
)),
),
StreamBuilder(
stream: snapshots,
builder: (
BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot,
) {
// Mensagem de erro
if (snapshot.hasError) {
return Center(
child: Text('Ocorreu um erro: \n${snapshot.error}'));
}
// Bolinha carregando enquanto processa os arquivos.
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
// Se nenhuma senha for encontrada
**// This is the Part!**
**********************************************
if (snapshot.data.docs.length == 0) {
return Column(
children: <Widget>[
Image(
image: AssetImage('assets/no_data_found.png'),
height: 350,
),
Container(
margin: const EdgeInsets.fromLTRB(30, 10, 30, 0),
child: Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Oops!\n',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500)),
TextSpan(
text: 'Nenhuma senha encontrada',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
],
),
textAlign: TextAlign.center,
),
),
),
// Imagem no_data_found
],
);
}
********************************************
// Mostrando as senhas
return Flexible(
child: ListView.builder(
itemCount: snapshot.data.docs.length,
itemBuilder: (BuildContext context, int i) {
var doc = snapshot.data.docs[i];
var itens = doc.data();
return Container(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
margin: const EdgeInsets.fromLTRB(15, 15, 15, 5),
// Layout de cada senha
child: ListTile(
isThreeLine: true,
leading: IconButton(icon: Icon(Icons.person_rounded)),
title: Text(itens['nomeDaSenha'],
style: TextStyle(
fontSize: 25, color: Colors.orange[700])),
subtitle: Text("Senha: ${itens['senha']}",
style: TextStyle(fontSize: 20)),
trailing: IconButton(
icon: Icon(
Icons.delete,
size: 30,
color: Colors.red[300],
),
onPressed: () {
doc.reference.delete();
Fluttertoast.showToast(
msg: "Senha apagada",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.grey[500]);
},
),
),
);
},
),
);
}),
],
),
// Floating button Adicionar
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 15, right: 5),
child: FloatingActionButton(
onPressed: () => modalCreate(context),
tooltip: 'Adicionar',
child: Icon(Icons.add),
),
),
);
}
}
有关代码的任何问题，请告诉我。期待答案，谢谢。
尝试使用定位和居中图像，您可以使用 MediaQuery 获取屏幕的大小。的（上下文）。尺寸。宽度
Expl = top : (MediaQuery.of(context).size.height / 2) - image.height /2
您可以使用此示例布局。简单来说，我使用的是 Stack 居中对齐和 Container 环绕在外面以填充屏幕。
完整示例：
import "package:flutter/material.dart";
main() {
runApp(MaterialApp(
home: HomePage(),
));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
// This set the position of the inside Container to top-left
Align(
alignment: Alignment.topLeft,
child: Container(
margin: const EdgeInsets.only(top: 60, bottom: 0, left: 10),
child: Text.rich(TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Bem-vindo(a)',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500),
),
TextSpan(
text: '\nSuas senhas cadastradas',
style:
TextStyle(fontSize: 25, fontWeight: FontWeight.w300),
)
],
)),
),
),
// This Column will align to center
Column(
mainAxisSize: MainAxisSize.min,
children: [
Image(
image: AssetImage('assets/no_data_found.png'),
height: 350,
),
Container(
margin: const EdgeInsets.fromLTRB(30, 10, 30, 0),
child: Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Oops!\n',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500)),
TextSpan(
text: 'Nenhuma senha encontrada',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
],
),
textAlign: TextAlign.center,
),
),
),
],
),
],
),
),
// Floating button Adicionar
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 15, right: 5),
child: FloatingActionButton(
onPressed: () {},
tooltip: 'Adicionar',
child: Icon(Icons.add),
),
),
);
}
}
您可以用容器包裹该列，并将其宽度和高度设置为满屏或您想要的大小，然后像这样将其居中对齐
return container(
width:mediaquery.of(context).size.width,
height:mediaquere.of(context).size.height,
alignment:Aligment.center,
child :Column(
children: <Widget>[
Image(
image: AssetImage('assets/no_data_found.png'),
height: 350,
),
Container(
child: Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Oops!\n',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 40,
fontWeight: FontWeight.w500)),
TextSpan(
text: 'Nenhuma senha encontrada',
style: TextStyle(
fontFamily: 'SanFrancisco',
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
],
),
textAlign: TextAlign.center,
),
),
),
// Imagem no_data_found
],
);
);