What is the best way to designed a Data Table to fit the full screen in Vertical View?
Try wrapping the DataTable with another SingleChildScrollView and set the scrollDirection to Axis.horizontal. That way you can increase the text size, and still be able to scroll horizontally to see everything.
Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.black54, appBar: AppBar(), body: Center( child: Container( color: Colors.white, height: 130, child: SingleChildScrollView( scrollDirection: Axis.vertical, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: DataTable( columns: <DataColumn>[ DataColumn( label: Text('Column 1'), ), DataColumn( label: Text('Column 2'), ), DataColumn( label: Text('Column 3'), ), DataColumn( label: Text('Column 4'), ), DataColumn( label: Text('Column 5'), ), DataColumn( label: Text('Column 6'), ), ], rows: <DataRow>[ DataRow( cells: <DataCell>[ DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), ], ), DataRow( cells: <DataCell>[ DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), ], ), DataRow( cells: <DataCell>[ DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), DataCell(Text('Data')), ], ), ], ), ), ), ), ), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
