I have a DataTable in my Flutter app. The problem is that when data is filled, the width of the columns is set automatically, and it too large. How can I manually set the column width? I tried to change the width parameters in the "Widget build", but it change the width of the whole table, but not a desired column.
Add columnSpacing property to DataTable. By default it is set to 56.0.
columnSpacing: 30.0
#Smith, you mean you can't do this ? if you could share some code ...
Widget build(BuildContext context) {
return Scaffold(
body: DataTable(
columns: [DataColumn(label: Text('label'))],
rows: [
DataRow(cells: [DataCell(
Container(
width: 200, //SET width
child: Text('text')))
])
]
),
);
use columnSpacing in the databale then set 1 this takes then length of column text
columnSpacing: 0,
Better than using Container as per the accepted answer, use ConstrainedBox so that the cell size will only increase if the contents is equal to or exceeds the constrained width.
import 'package:flutter/material.dart';
void main() async {
runApp(
MaterialApp(
home: Scaffold(
body: Card(
child: DataTable(columns: [
DataColumn(
label: Text(
'short text column'.toUpperCase(),
style: TextStyle(fontWeight: FontWeight.bold),
)),
DataColumn(
label: Text(
'long text column'.toUpperCase(),
style: TextStyle(fontWeight: FontWeight.bold),
)),
], rows: [
DataRow(cells: [
DataCell(Text('short text')),
DataCell(ConstrainedBox(
constraints: BoxConstraints(maxWidth: 250), //SET max width
child: Text('very long text blah blah blah blah blah blah',
overflow: TextOverflow.ellipsis))),
]),
DataRow(cells: [
DataCell(Text('short text')),
DataCell(ConstrainedBox(
constraints: BoxConstraints(maxWidth: 250), //SET max width
child: Text('very long text blah blah blah blah blah blah',
overflow: TextOverflow.ellipsis))),
])
]),
),
),
),
);
}
View Dartpad example
Related
I'm trying to make a Table with two cells of the same width and height, so that the height depends on the size of the content. However, the smaller TableCell always shrinks:
This is what I'm trying to implement:
Here's the code:
Table(
children: [
TableRow(
children: [
TableCell(
child: Container(
color: Colors.green,
child: Text(
'long text long text long text long text long text long text long text'),
),
),
TableCell(
child: Container(
color: Colors.orange,
child: Text('short text'),
),
),
],
)
],
),
P.S. I could solve it by adding verticalAlignment: TableCellVerticalAlignment.fill, to the smaller cell, but any cell can be the smaller one, depending on the content. When I add this line to both cells, the whole table disappears. The only bypass I could imagine is to calculate the length of the content and find the smaller cell, but I wonder if there is a way to implement this UI directly with Flutter.
Would appreciate any help.
1. Row with IntrinsicHeight
IntrinsicHeight limits the height of the Row to the content size, which however is considered a 'relatively expensive' approach and is not recommended.
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.green,
child: Text(
'long text long text long text long text long text',
))),
Expanded(
child: Container(
color: Colors.orange,
child: Text(
'short text',
))),
],
),
),
2. Table with TableCellVerticalAlignment.fill
As mentioned in the question, the .fill option must not be used in the largest TableCell, because in this case the TableRow will have zero height. This is the preferred solution, because it doesn't have the 'expensiveness' issue of the previous one.
final texts = ['long text long text long text long text long text', 'short text'];
final colors = [Colors.green, Colors.orange];
// find the longest text and its index
final max = texts.asMap().entries.reduce(
(a, b) => (a.value.length > b.value.length) ? a : b,
);
return Table(children: [
TableRow(
children: texts
.asMap()
.entries
.map((e) => TableCell(
// use .fill in all cells except the largest
verticalAlignment: (e.key != max.key)
? TableCellVerticalAlignment.fill
: TableCellVerticalAlignment.top,
child: Container(
color: colors[e.key],
child: Text(e.value),
)))
.toList(),
),
]);
I need to fix a minimum width to my Column Widgets. Inside each of them, I have Text Widgets which can be very short or very long. I need to fix a minimum width to them in order to have an acceptable size of Column even if the text is short. The other Column need obviously to adapt himself.
Row(children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child: RichText(
text: TextSpan(
text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
],
),
],
)
There's probably a dozen ways to do what you want. And likely none of them straightforward or easy to understand. (The subject of constraints & sizes is quite complicated. See this constraints page for more examples & explanations.)
Here's one potential solution.
This will set a minimum width for the blue column (based on stepWidth), but will expand/grow if the text (child) inside wants to.
The yellow column will resize to accommodate the blue column.
class ExpandedRowPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Row Page'),
),
body: SafeArea(
child: Center(
child: Row(
children: [
IntrinsicWidth(
stepWidth: 100,
// BLUE Column
child: Container(
color: Colors.lightBlueAccent,
child: Column(
children: [
//Text('Short'),
Text('shrt')
],
)
),
),
// YELLOW Column
Flexible(
child: Container(
alignment: Alignment.center,
color: Colors.yellow,
child: Column(
children: [
Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
],
)
),
)
],
)
),
),
);
}
}
You could do the above without a Flexible yellow column, but a very long text child would cause an Overflow warning without a Flexible or Expanded wrapping widget.
A Row widget by itself has an infinite width constraint. So if a child wants to be bigger than screen width, it can, and will cause an overflow. (Try removing Flexible above and rebuild to see.)
Flexible and Expanded, used only inside Row & Column (or Flex, their superclass), checks screen width and other widgets inside a Row, and provides its children with a defined constraint size instead of infinite. Children (inside Flexible/Expanded) can now look up to parent for a constraint and size themselves accordingly.
A Text widget for example, will wrap its text when it's too wide for constraints given by Flexible/Expanded.
use FittedBox();
suppose Example:
Row(
children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child:
FittedBox(
child: RichText(
text: TextSpan(
text:
"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
),
],
),
],
);
I have a horizontal list bar with fixed height 100 (used inside Column).
Height 100 is good for iPhone8.
But the pixel overflows in iPhone-X due to limited 100 height.
If I make it 140, both are good. But the bar looks no good in iphone8.
So I want 120 height in one device and 140 in other device.
I thought I could achieve it using ConstrainedBox like below:
ConstrainedBox(constraints: BoxConstraints(minHeight: 100, maxHeight: 140), child: ListView(...))
But listview goes with 140 height all the time.
So How to achive dynamic height contraint for different device?
Sample widget:
class MyHorizontalBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
height: 100, // 140
child: ListView(
scrollDirection: Axis.horizontal,
children: [
_myCard(),
_myCard(),
_myCard(),
],
),
);
}
Widget _myCard(){
return Container(
width: 115,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Top', style: TextStyle(fontSize: 12)),
Text('Middle', style: TextStyle(fontSize: 25)),
Text('Bottom', style: TextStyle(fontSize: 18)),
],
),
);
}
}
Try using MediaQuery.of(context).size.height or width in place of constant height and width.
You can use LayoutBuilder widget. But such problems are usually solved with a flexible layout.
e.g. defining your horizontal bar height as 1/3 of available height.
Use MediaQuery.of(context)
try the following code.
class MyHorizontalBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
double magicNumber = 5; // Try playing with this number to get the appearence.
return SizedBox(
height: MediaQuery.of(context).size.height / magicNumber,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
_myCard(),
_myCard(),
_myCard(),
],
),
);
}
Widget _myCard() {
return Container(
width: 115,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Top', style: TextStyle(fontSize: 12)),
Text('Middle', style: TextStyle(fontSize: 25)),
Text('Bottom', style: TextStyle(fontSize: 18)),
],
),
);
}
}
Try playing with the variable magicNumber.
I'm trying to have multiple, centered lines in the DataColumn() row of a DataTable() in flutter. It seems, though, that there is no support for centering or for multiple lines.
My DataTable Code looks something like this:
class TestDayData extends StatelessWidget {
final List<String> timesList = [
"This is",
"a bunch",
"of strings",
];
final String day;
TestDayData({Key key, this.day}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: DataTable(
showCheckboxColumn: false,
columns: [
DataColumn(
label: Center(child: Text(day)),
numeric: false,
),
],
rows: timesList
.map(
(times) => DataRow(cells: [
DataCell(
Text(times.toString()),
),
]),
)
.toList(),
),
);
}
}
I made a dartpad file here to show the above code in a larger context. (the reason that I am putting multiple DataTables in a Row widget, instead of using one DataTable for all of the days, is because I plan on putting each of them into a Stack widget so that I can overlay appointments on top of the columns.)
https://dartpad.dev/44bbb788e0d5f1e6393dd38a29430981
So far, I can approximate a multi-lined, centered DataColumn row by adding spaces and using a newline character as seen in the dartpad file. (but there has to be a better way!)
You are missing textAlign property in Text widget
DataTable(
showCheckboxColumn: false,
columns: [
DataColumn(
label: Center(child: Text(day, textAlign:TextAlign.center)),
numeric: false,
),
],
rows: timesList
.map((times) => DataRow(cells: [
DataCell(
Text(times.toString(), textAlign: TextAlign.center),
),
]),
)
.toList(),
),
You can try this to center your text in Datacolumn
DataColumn(
label: Center( widthFactor: 1.4,
child: Text("HELLO", textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0,),),)),
You can try this to center your text in Datacell for rows.
DataCell( Center(child: Text("Hello")))
For me on the DataColumn, using the Center widget or the textAlign property on the Text widget didn't work:
this is my solution:
DataColumn(
label: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [Text("text")],
),
),
),
DataCell worked just fine with the Center widget
I figured out the solution.
you just need to wrap the text with Center widget and then wrap it again with Expanded widget just like this:
DataTable(
columns: [
DataColumn(label: Expanded(child: Center(child: Text('ID', textAlign: TextAlign.center,))),),
DataColumn(label: Expanded(child: Center(child: Text('name', textAlign: TextAlign.center,)))),
]
)
I can center the DataCell in a DataRow but how do you do it for the DataColumn label?
I want the first DataColumn left justified and the rest centered. Wrapping the label in a Center widget does not take effect.
new DataColumn(
label: Center(
child: Text(statName,textAlign: TextAlign.center,
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),),
)
);
Found how:
DataColumn(
label: Expanded(
child: Text(
'Label',
textAlign: TextAlign.center,
))),
You may want to wrap the contents of the Label in a Center widget. There's also an Align widget that uses alignment: Alignment.center and your Text as it's child.
This is how i resolved this issue :
DataColumn(
label: Center(
widthFactor: 5.0, // You can set as per your requirement.
child: Text(
'View',
style: style_16_bold_primary,
),
),
),
I had the same problem and solved the issue by commenting the following code section in data_table.dart file.
if (onSort != null) {
final Widget arrow = _SortArrow(
visible: sorted,
down: sorted ? ascending : null,
duration: _sortArrowAnimationDuration,
);
const Widget arrowPadding = SizedBox(width: _sortArrowPadding);
label = Row(
textDirection: numeric ? TextDirection.rtl : null,
children: <Widget>[ label, arrowPadding, arrow ],
);
}