For some reason the text in the Cards are displaying slightly lower than the vertical center of each Card. It becomes more noticeable as more cards are added.
I have tried wrapping the Text widget in a Center widget. I have tried placing mainAxisAlignment and crossAxisAlignment in what I felt was appropriate placing, but still no difference.
Worth noting: I am using AutoSizeText widget where normal Text widget would be. But even with the normal Text widget, I encounter the same issue.
return new Container(
padding: new EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
'Happy with this text',
style: new TextStyle(fontSize: 20.0),
),
new Text(
'Happy with this text',
style: new TextStyle(fontSize: 20.0),
),
],
),
),
Expanded(
flex: 8,
child: Row(
// mainAxisAlignment: MainAxisAlignment.center, // does not make any noticeable difference
// crossAxisAlignment: CrossAxisAlignment.center, // does not make any noticeable difference
children: <Widget>[
Expanded(
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 30),
minFontSize: 12.0,
),
),
leading: Icon(
Icons.question_answer,
color: Colors.blue[500],
),
),
),
)),
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: InkWell(
onTap: () {
print("Card 1 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 12),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 2 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 3 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'A nocturnal ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 4 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'A nocturnal ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
],
),
),
],
),
),
],
),
);
Container(
child: Card(
margin: EdgeInsets.all(20.0),
elevation: 10.0,
//color: Colors.blue,
child:Align(
child: ListTile(
title: Text(
"CIL",
style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
alignment: Alignment.center,
),
),
),
Removing ListTile fixed the issue, though I assume a better way would be to override whatever defaults ListTile has which causes this.
Related
The code below (I shortened the code for simplicity) displays the characteristics of the device. I placed all the characteristics in the body and displayed them in a certain way. Tell me how I can make two buttons (marked in red in the photo) under the body. Or put them in the body? tell me the best way to do it.
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
),
body: Align(
alignment: Alignment.topCenter,
child: Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
],
),
),
)
),
));
You can use bottomNavigationBar on Scaffold
Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
),
Also, you can wrap Container with Column widget
body: Column(
children: [
Container(...)//your widget
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(child: OutlinedButton(...)),
SizedBox(width:x),
Expanded(child: OutlinedButton(...)),
Full snippet on second approach
return Scaffold(
body: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
const Divider(
color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
],
),
),
)),
// Spacer(), /// you you want at the bottom
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
)
],
),
);
You can check more about widgets, Column and layout.
I have 3 widgets in the row
GestureDetector(
onTap: () {},
child: Card(
margin: EdgeInsets.zero,
child: Padding(
padding: EdgeInsets.all(15),
child: Row(
children: <Widget>[
Text(
"Description",
style: TextStyle(fontSize: 15, color: Colors.orange),
),
Spacer(),
Expanded(
child: Text(
descriptionText,
style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
),
),
Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
],
),
),
),
)
The UI looked like this
How can I move the All beside > ? If the text is too long, I would like the Text displayed multi line, that why I use Expanded.
You can remove the Expanded, however if there's a need for that, you can use the textAlign property:
Expanded(
child: Text(
'All',
textAlign: TextAlign.right,
),
)
Full solution:
GestureDetector(
onTap: () {},
child: Card(
margin: EdgeInsets.zero,
child: Padding(
padding: EdgeInsets.all(15),
child: Row(
children: <Widget>[
Text(
"Description",
style: TextStyle(fontSize: 15, color: Colors.orange),
),
Spacer(),
Expanded(
child: Text(
descriptionText,
textAlign: TextAlign.right, // <-- You need this
style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
),
),
Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
],
),
),
),
)
I cannot seem to enter a trailing row of icons at the end of each card list view.
Is there a way of solving this using the same card code or should another method be used?
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
I decreased the amount of padding to increase the possible available space within the alert dialog box area.
contentPadding: EdgeInsets.all(5.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
content: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
right: -40.0,
top: -40.0,
// width: 600.0,
child: InkResponse(
onTap: () {
Navigator.of(context).pop();
},
child: CircleAvatar(
child: Icon(
Icons.close,
color: Colors.white,
),
backgroundColor: Colors.red,
maxRadius: 20.0,
),
),
),
Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Choose a Submission Type',
style: TextStyle(
fontFamily: 'OpenSans',
fontSize: 18.0),
),
Divider(
height: 10.0,
),
Text(
'This campaign is available to creators with 3000 or more followers.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'OpenSans',
fontSize: 14.0,
),
),
Card(
margin: EdgeInsets.zero,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading:
const Icon(Icons.image),
title: Text(
'Post',
style: TextStyle(
fontFamily: 'OpenSans',
fontSize: 16.0,
fontWeight:
FontWeight.bold,
),
),
subtitle: Text(
'Single media file',
style: TextStyle(
fontFamily: 'OpenSans',
fontSize: 14.0,
),
),
This is where the issue lies with my code at present. I cannot edit the code to include the two additional icons. What is the best solution for including these trailing icons within this area.
// trailing: Row(
// children: <Widget>[
// Icon(
// FontAwesomeIcons
// .instagram,
// size: 10.0,
// ),
//// Icon(
//// FontAwesomeIcons
//// .facebook,
//// size: 10.0,
//// ),
// ],
// ),
),
],
),
),
All you need to do is add mainAxisSize: MainAxisSize.min, to the Row Like this
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
FontAwesomeIcons.instagram,
size: 10.0,
),
SizedBox(
width: 5,
),
Icon(
FontAwesomeIcons.facebook,
size: 10.0,
),
],
),
Let me know if this is what you want. I added that SizedBox too if that wasn't the look you wan't just take it out
I'm having a problem with handling texts when they overflow. I've tried overflow: TextOverflow.xxxx ,Expanded and Flexible but it's still doesn't work. Can anyone help me with this situation?
class _FeaturedCardState extends State<FeaturedCard>{
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
showToast(widget.name, context);
},
child: Padding(
padding: EdgeInsets.only(top: 5.0),
child: Container(
height: MediaQuery.of(context).size.height / 9,
width: MediaQuery.of(context).size.width,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
elevation: 3.0,
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: CircleAvatar(
radius: 20,
backgroundImage: AssetImage(widget.img),
backgroundColor: Colors.transparent,
),
),
SizedBox(width: 10),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 3.0, 3.0, 3.0),
child: Wrap(
direction: Axis.vertical,
children: <Widget>[
SizedBox(height: 2),
Text(
widget.name,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 15,
color: Colors.blueGrey,
),
),
SizedBox(height: 3),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.attach_money,
size: 11,
),
Text(
widget.salary,
style: TextStyle(
fontSize: 10,
fontFamily: 'Montserrat',
color: Colors.blue[300]
),
)
],
),
SizedBox(height: 3),
Text( // This is the text that overflows
widget.desc,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
),
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
)
],
),
),
),
),
);
}
I've searched a lot of atricles and it still doesn't help. If anyone could come up with a solution for this that'll be really great. Any help would be appreciated, thank you.
You can try this,
class _FeaturedCardState extends State<FeaturedCard> {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(5.0),
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 3.0,
child: InkWell(
borderRadius: BorderRadius.circular(5.0),
onTap: (){
showToast(widget.name, context);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 20,
backgroundImage: AssetImage(widget.img),
backgroundColor: Colors.transparent,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
widget.name,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 15,
color: Colors.blueGrey,
),
),
const SizedBox(height: 3),
Text(
"\u0024${widget.salary}", // Char code for $ symbol "\u0024"
style: TextStyle(
fontSize: 10,
fontFamily: 'Montserrat',
color: Colors.blue[300],
),
),
const SizedBox(height: 3),
Text(
// This is the text that overflows
widget.desc,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
),
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
)
],
),
),
),
),
);
}
}
Add your Text in Container and set static width for Container
for example:
Container(
width: MediaQuery.of(context).size.width*0.7,
child: Text( "xxxxx",),
),
I have a ListView which consists of 3 Cards. Each Card has a Text and different fontSize. How can I write a single code for one Card and call it in the ListView for the remaining 2 Cards with different Text and fontSize.
This will help me save extra lines of Code. The code below
Widget homeBody = Container(
child: ListView(
children: <Widget>[
SizedBox(
height: 200.0,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
margin: EdgeInsets.all(8.0),
child: InkWell(
splashColor: Colors.blueGrey,
onTap: () {},
child: Column(
// crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'About',
style: TextStyle(
fontSize: 32.0, fontWeight: FontWeight.bold),
),
Text(
'Vishwapreneur',
style: TextStyle(
fontSize: 32.0, fontWeight: FontWeight.bold),
),
],
),
),
),
),
SizedBox(
height: 200.0,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
margin: EdgeInsets.all(8.0),
child: InkWell(
splashColor: Colors.blueGrey,
onTap: () {},
child: Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Smart Sociothon',
style: TextStyle(
fontSize: 32.0, fontWeight: FontWeight.bold),
),
// Text(
// 'Sociothon',
// style: TextStyle(
// fontSize: 32.0, fontWeight: FontWeight.bold),
// ),
],
),
),
),
),
SizedBox(
height: 200.0,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
margin: EdgeInsets.all(8.0),
child: InkWell(
splashColor: Colors.blueGrey,
onTap: () {},
child: Column(
// crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Entrepreneurship',
style: TextStyle(
fontSize: 30.0, fontWeight: FontWeight.bold),
),
Text(
'Development Cell',
style: TextStyle(
fontSize: 30.0, fontWeight: FontWeight.bold),
),
],
),
),
),
),
],
),
);
Thank you in Advance.
Pass your text along with textSize to your card.
The example below will give you an idea
ListView list(){
Map<String, double> items = new Map();
items["A"] = 14.0;
items["B"] = 24.0;
items["C"] = 32.0;
return new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return myCard(items.keys.toList()[index], items.values.toList()[index]);
},
);
}
Card myCard(String text, double textSize){
return new Card(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Text(text, style: TextStyle(fontSize: textSize),),
),
);
}