I am trying to build an Android app in my college project but in faculty info, I am getting an error, like A RenderFlex overflowed by 7.5 pixels on the right.
import 'package:flutter/material.dart';
class Faculty extends StatefulWidget {
const Faculty({Key? key}) : super(key: key);
#override
_FacultyState createState() => _FacultyState();
}
class _FacultyState extends State<Faculty> {
final style = const TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Faculty Info'),
backgroundColor: const Color(0xff01A0C7),
),
body: ListView(
children: <Widget>[
const SizedBox(height: 35),
const Center(
child: Text(
'Faculty-Chart',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
DataTable(
columns: const [
DataColumn(
label: Text(
'ID',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Name',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Contact no',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
],
rows: const [
DataRow(
cells: [
DataCell(Text('1')),
DataCell(Text('Amit Thakkar')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('2')),
DataCell(Text('Hemang Thakkar')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('3')),
DataCell(Text('Shrushti Gajjar')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('4')),
DataCell(Text('Dhruvi Thrivedi')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('5')),
DataCell(Text('Deep Kotharia')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('6')),
DataCell(Text('Vaibhai Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('7')),
DataCell(Text('Jaina Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('8')),
DataCell(Text('Ritesh Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('9')),
DataCell(Text('Ayushi Chaudhari')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('10')),
DataCell(Text('Mayuri Popat')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('11')),
DataCell(Text('Trusha Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('12')),
DataCell(Text('Celine Davla')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('13')),
DataCell(Text('Jayshree Mehta')),
DataCell(Text('')),
],
),
],
),
],
),
);
}
}
This is my code and I am getting an error about pixel overflow. When I try to solve this error by using SingleChildScrollView, new errors are occurring.
This happens because a widget is bigger than what the screen can display, so it gets off-bounds.
Two solutions that will work: Either wrap your DataTable with a SingleChildScrollView and set the scrollDirection to Axis.horizontal:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
Or set a fixed columnSpacing:
DataTable(
columnSpacing: 10,
columns: [
Wrap the DataTable widget with SingleChildScrollView then set the scroll direction to horizontal scrollDirection: Axis.horizontal
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Faculty extends StatefulWidget {
const Faculty({Key? key}) : super(key: key);
#override
_FacultyState createState() => _FacultyState();
}
class _FacultyState extends State<Faculty> {
TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(' Faculty Info'),
backgroundColor: Color(0xff01A0C7),
),
body: ListView(children: <Widget>[
SizedBox(height: 35),
Center(
child: Text(
'Faculty-Chart',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
)),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
DataColumn(
label: Text('ID',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold))),
DataColumn(
label: Text('Name',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold))),
DataColumn(
label: Text('Contact no',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold))),
],
rows: [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Amit Thakkar')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('2')),
DataCell(Text('Hemang Thakkar')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('3')),
DataCell(Text('Shrushti Gajjar')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('4')),
DataCell(Text('Dhruvi Thrivedi')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('5')),
DataCell(Text('Deep Kotharia')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('6')),
DataCell(Text('Vaibhai Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('7')),
DataCell(Text('Jaina Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('8')),
DataCell(Text('Ritesh Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('9')),
DataCell(Text('Ayushi Chaudhari')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('10')),
DataCell(Text('Mayuri Popat')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('11')),
DataCell(Text('Trusha Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('12')),
DataCell(Text('Celine Davla')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('13')),
DataCell(Text('Jayshree Mehta')),
DataCell(Text('')),
]),
],
),
),
]));
}
}
Related
I have a datatable with 4 columns but only 3 are currently showing when the screen is rotated i am able to see all 4 columns it is not even scrollable.
I am try to see the 4 columns in a single view ut I am getting this error:
lib/screens/home_screen.dart:79:29: Error: Cannot invoke a non-'const' constructor where a const expression is expected.
Try using a constructor or factory that is 'const'.
DataTable(
^^^^^^^^^
lib/screens/home_screen.dart:78:54: Error: Too many positional arguments: 0 allowed, but 1 found.
Try removing the extra positional arguments.
const SingleChildScrollView(
^
/C:/src/flutter/flutter/packages/flutter/lib/src/widgets/single_child_scroll_view.dart:140:9: Context: Found this candidate, but the arguments don't match.
const SingleChildScrollView({
^^^^^^^^^^^^^^^^^^^^^
Restarted application in 274ms.
Here is th e code for the table:
ExpansionTile(
title: const Text("Click Here to See table Name"),
children: [
const SingleChildScrollView(
DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Sr.No',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Website',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Tutorial',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Review',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(
Text('1'),
),
DataCell(
Text('https://flutter.dev/'),
),
DataCell(
Text('Flutter'),
),
DataCell(
Text('5*'),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(
Text('2'),
),
DataCell(
Text('https://dart.dev/'),
),
DataCell(
Text('Dart'),
),
DataCell(
Text('5*'),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(
Text('3'),
),
DataCell(
Text('https://pub.dev/'),
),
DataCell(
Text('Flutter Packages'),
),
DataCell(
Text('5*'),
),
],
),
],
),
),
],
),
My question: How can make the table view in one screen so that it can be wrapped or the columns shrink to be view in a singleview?
You nee to pass DataTable to SingleChildScrollView's child, you forget to add child world also needed to pass scrollDirection too:
SingleChildScrollView(
scrollDirection: Axis.horizontal,// <---add this
child: DataTable(// <---add this
columns: <DataColumn>[
...
]
)
)
You have to define Datatable to child and if you are going to define more than one, you need to remove const in columns.
SingleChildScrollView(
child: DataTable( //Edited
columns: <DataColumn>[ //Edited
...
]
)
)
How to remove default bottom devider from DataTable() widget
here is my code
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
dividerThickness: 0,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Color(0xFFE6E7EB),
)),
columns: [
DataColumn(label: Text('RollNo')),
DataColumn(label: Text('Name')),
],
rows: [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Arya')),
]),
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Arya')),
])
]),
),
);
I tried to set devider thickness value to 0 but it still shows some border bellow it
wrap your DataTable with the Theme widget and change the divide color to transparent also set dividerThickness to 0 in DataTable like this :
Widget build(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child:DataTable(
dividerThickness:0.0,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Text('Professor')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
],
),
],
));
}
I'm having a bit of a problem with Flutter's widget placement. Here's the code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
final _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: _scrollController,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: _scrollController,
child: DataTable(
//Rows and columns filled with random data
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Text('Professor')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
],
),
),
//How to make this widget be at the bottom?
const Text('This widget should be at the bottom'),
],
),
),
);
}
}
I have a DataTable and a Text widget, wrapped with a Column and two SingleChilScrollViews in order to have bidirectional scrolling (the table is larger than the screen). I want to place the Text widget on the bottom of the screen. Tinkering with the code, I can do it pretty easily by giving the Column widget a parent Container, and fixing its size to my screen. However, how would I go about sizing it dynamically? I've tried using MediaQuery but the result was not that accurate. This "fix" can be found below:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
final _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: _scrollController,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: _scrollController,
child: DataTable(
//Rows and columns filled with random data
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Text('Professor')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
],
),
),
//How to make this widget be at the bottom?
const Text('This widget should be at the bottom'),
],
),
),
),
);
}
}
Any ideas or suggestions on how to tackle this issue? Thanks.
EDIT
Using the text in the bottomNavigationBar of the Scaffold works as well, however it doens't seem an appropriate solution.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
final _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
//Rows and columns filled with random data
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Text('Professor')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
],
),
),
],
),
bottomNavigationBar: const Text('Is at the bottom - doesnt seem right'),
);
}
}
i think This might get you resolved your Error.
Code:
Scaffold(
body:SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height-100,
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: Column(
children: [
///// your Scrollabel Data Table will be here
for(int i=0;i<20;i++)
ListTile(
title: Text('Tile $i'),
),
],
),
),
),
const Align(
alignment: Alignment.bottomCenter,
child: Text('Hello I am at the Bottom'),
),
],
),
) ,)
You can use a SingleChildScrollView inside a Listview to achive that.
ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
children: [
//Your table goes here
],
),
),
Text(
//Your bottom text goes here,
),
],
),
I found a more elegant solution while tinkering with my code and the provided answers. I wrapped the Scaffold's body in a Column and used 2 expanded widgets: one for my bottom widget and another one for the ScrollViews and Table. Here's the final body:
body: Column(
children: [
Expanded(
flex: 9,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: _scrollController,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: _scrollController,
child: DataTable(
columns: _controller.columns,
rows: _controller.rows,
),
),
),
),
Expanded(
child: Total(_controller.total),
),
],
),
did you try to use BottomSheetNavigtor?
I have a data table like below with three columns and I want to add vertical border separator , divider or whatever it called between all columns-included header- is this available in flutter datatables and how to do this ?
thanks
as a side note : I tried multiple options but it is hard to minuplate like listview or json_table package
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:talab/helpers/constant_helper.dart';
class TablesPage extends StatefulWidget {
#override
TablesPageState createState() => TablesPageState();
}
class TablesPageState extends State<TablesPage> {
// Generate a list of fiction prodcts
final List<Map> _products = List.generate(30, (i) {
return {"id": i, "name": "Product $i", "price": Random().nextInt(200) + 1};
});
int _currentSortColumn = 0;
bool _isAscending = true;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kindacode.com'),
),
body: Container(
width: double.infinity,
child: SingleChildScrollView(
child: DataTable(
dividerThickness: 5,
decoration: BoxDecoration(
border:Border(
right: Divider.createBorderSide(context, width: 5.0),
left: Divider.createBorderSide(context, width: 5.0)
),
color: AppColors.secondaryColor,
),
showBottomBorder: true,
sortColumnIndex: _currentSortColumn,
sortAscending: _isAscending,
headingRowColor: MaterialStateProperty.all(Colors.amber[200]),
columns: [
DataColumn(label: Text('كود الطلب')
),
DataColumn(label: Text('الاشعار')),
DataColumn(
label: Text(
'التاريخ',
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
),),
],
rows: _products.map((item) {
return DataRow(cells: [
DataCell(Text(item['id'].toString())),
DataCell(Text(item['name'])),
DataCell(Text(item['price'].toString()))
]);
}).toList(),
),
),
));
}
}
As others have suggested, adding a vertical divider is one solution. Another is to use the DataTable's built-in border, which adds a border to every cell. It works like Border in the Decoration class. So, using your code example, the table can be defined:
DataTable(
border: TableBorder.all(
width: 5.0,
color:AppColors.secondaryColor,
dividerThickness: 5,
You can remove all of the other borders in your code. I believe this will give you the look you want.
As variant, you can use VerticalDivider widget. For example, define props of your vertical divider
Widget _verticalDivider = const VerticalDivider(
color: Colors.black,
thickness: 1,
);
and add it between header columns and cells
columns: [
DataColumn(label: Text('كود الطلب')),
DataColumn(label: _verticalDivider),
DataColumn(label: Text('الاشعار')),
DataColumn(label: _verticalDivider),
DataColumn(
label: Text(
'التاريخ',
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
),),
],
rows: _products.map((item) {
return DataRow(cells: [
DataCell(Text(item['id'].toString())),
DataCell(_verticalDivider),
DataCell(Text(item['name'])),
DataCell(_verticalDivider),
DataCell(Text(item['price'].toString()))
]);
}).toList(),
The following works for me:
DataTable(
showBottomBorder: true,
dividerThickness: 5.0,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(''),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(''),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Albert')),
DataCell(VerticalDivider()),
DataCell(Text('19')),
DataCell(VerticalDivider()),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(VerticalDivider()),
DataCell(Text('43')),
DataCell(VerticalDivider()),
DataCell(Text('Professor')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(VerticalDivider()),
DataCell(Text('27')),
DataCell(VerticalDivider()),
DataCell(Text('Associate Professor')),
],
),
],
)
The heights of widgets in a DataTable DataCell can vary:
DataCell(Text('Professor\nProfessor\nProfessor\nProfessor\nProfessor\nProfessor\n'))
But if you add the data as a Column, the cell overflows. Why? And how to fix it?
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Column(mainAxisSize: MainAxisSize.min, children: [
Text("Professor"),
Text("Professor"),
Text("Professor"),
Text("Professor"),
])),
// DataCell(Text('Professor\nProfessor\nProfessor\nProfessor\nProfessor\nProfessor\n')),
],
),
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatelessWidget(),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Column(mainAxisSize: MainAxisSize.min, children: [
Text("Professor"),
Text("Professor"),
Text("Professor"),
Text("Professor"),
])),
// DataCell(Text('Professor\nProfessor\nProfessor\nProfessor\nProfessor\nProfessor\n')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
],
),
],
);
}
}
You need to wrap your column with SingleChildScrollView.
Here is my solution.
DataCell(Expanded(
child: SingleChildScrollView(
child: Column(mainAxisSize: MainAxisSize.min, children: [
Text("Professor"),
Text("Professor"),
Text("Professor"),
Text("Professor"),
]),
),
))