[英]Flutter Dart Error with padding and TextAlign
I'm trying to remove the space between each Card and get the Meal Text in the Center我正在尝试删除每张卡之间的空间并在中心获取膳食文本
It comes from the EdgeInsets.only(top:220), but this is needed due to the Space between the AppBar.它来自EdgeInsets.only(top:220),但由于 AppBar 之间的空间,这是必需的。
Tried to Create a new Widget but this doesn't work then i get a StreamBuilder Error.试图创建一个新的小部件,但这不起作用然后我得到一个 StreamBuilder 错误。 I also tried to add to the margin MediaQuery.removePadding(removeTop: true), but there i get an error aswell.
我还尝试添加到边距MediaQuery.removePadding(removeTop: true),但我也得到了一个错误。
My Secound Problem i want that the Meal Text is in the middle, i added the textAlign: TextAlign.center.我的第二个问题我希望 Meal Text 在中间,我添加了 textAlign: TextAlign.center。 At the Date it is working but why isn't it at the top one?
在日期它正在工作,但为什么它不在顶部?
Code代码
import 'package:flutter/material.dart';
import 'package:mealapp/models/Widgets/whenAndWhatToEat.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:intl/intl.dart';
import 'package:mealapp/models/global.dart';
class MealTile extends StatefulWidget {
final MealsAndWhen mealsAndWhen;
MealTile ({ this.mealsAndWhen });
@override
MealTileState createState() {
return MealTileState();
}
}
class MealTileState extends State<MealTile> {
String id;
final db = Firestore.instance;
String meal;
Widget buildItem(DocumentSnapshot doc) {
return Padding(
padding: EdgeInsets.only(top: 220),
child: Container(
margin: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Meal: ${doc.data['Meal']}',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
textAlign: TextAlign.center,
),
Text(
'Date: ${doc.data['Date']}',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
textAlign: TextAlign.center,
),
SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(width: 8),
FlatButton(
onPressed: () => deleteData(doc),
child: Text('Delete',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
),
],
),
],
),
decoration: BoxDecoration(
color: lightBlueColor,
borderRadius: BorderRadius.all(Radius.circular(12)),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: darkGreyColor,
body: ListView(
padding: EdgeInsets.all(8),
children: <Widget>[
StreamBuilder<QuerySnapshot>(
stream: db.collection('mealList').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(children: snapshot.data.documents.map((doc) => buildItem(doc)).toList());
} else {
return SizedBox();
}
},
)
],
),
);
}
void deleteData(DocumentSnapshot doc) async {
await db.collection('mealList').document(doc.documentID).delete();
setState(() => id = null);
}
}
[ [
]
]
Instead of applying the padding to the card, wrap your ListView
inside a Padding
widget and apply it there.不要将填充应用于卡片,而是将
ListView
包装在Padding
小部件中并将其应用到那里。
To align the Text
, wrap it in a Center
widget.要对齐
Text
,请将其包装在Center
小部件中。
To add padding to Text
Widgets, just add padding
property to Container
要将填充添加到
Text
小部件,只需将padding
属性添加到Container
eg:例如:
padding: EdgeInsets.all(12),
To Center your Text
just replace CrossAxisAlignment.start
with CrossAxisAlignment.center
要使您的
Text
居中,只需将CrossAxisAlignment.start
替换为CrossAxisAlignment.center
Column(
**crossAxisAlignment: CrossAxisAlignment.center,**
children: <Widget>[
Text(
'Meal: Example Meal',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.center,
),
Text(
'Date: Example Date',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.center,
),
],
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.