How to let one card extend beyond the screen for scrolling but keep another two cards within screen boundaries?
The below code creates the first screenshot. The problem is that the yellow card is being squashed - the string "Long text" should stay on one line and the user should be able to scroll right to see all 8 columns. Please could you tell me how to fix that while not causing the blue cards to be any wider? (the user should be able to see all of each of the blue cards without having to scroll) - like in the 2nd picture.
class ItemDetails extends StatelessWidget {
return Scaffold(
appBar: AppBar(
title: Text("Test Page"),
),
body: SingleChildScrollView(
child: Container(
margin: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
color: Colors.yellow.shade200,
elevation: 4.0,
child: Column(
children: [
ListTile(
title: Text("Card 1",
style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
),
trailing: IconButton(
onPressed: () async {
await goToWebPage("https://www.google.com");
},
icon: Icon(Icons.edit)
),
),
Container(
padding: EdgeInsets.all(0.0),
alignment: Alignment.centerLeft,
child:
Table(
columnWidths: const <int, TableColumnWidth>{
0: FlexColumnWidth(),
1: IntrinsicColumnWidth(),
},
children: [
]
),
),
/// Detailed payscale table
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
padding: EdgeInsets.all(0.0),
child:
Table(
columnWidths: const <int, TableColumnWidth>{
0: IntrinsicColumnWidth(),
1: IntrinsicColumnWidth(),
2: IntrinsicColumnWidth(),
3: IntrinsicColumnWidth(),
4: IntrinsicColumnWidth(),
5: IntrinsicColumnWidth(),
6: IntrinsicColumnWidth(),
7: IntrinsicColumnWidth(),
8: IntrinsicColumnWidth(),
9: IntrinsicColumnWidth(),
10: IntrinsicColumnWidth(),
11: IntrinsicColumnWidth(),
12: IntrinsicColumnWidth(),
13: IntrinsicColumnWidth(),
14: IntrinsicColumnWidth(),
15: IntrinsicColumnWidth(),
16: IntrinsicColumnWidth()
},
children: [
TableRow(
children: [
TableCell(
child: Text("Column",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("1",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("2",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("3",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("4",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("5",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("6",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("7",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: SizedBox(
width: 10.0,
height: 1.0,
)
),
TableCell(
child: Text("8",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
)
]
),
TableRow(
children: [
TableCell(
child: Text("Row",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text(""),
)
]
),
TableRow(
children: [
TableCell(
child: Text("1",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
),
TableCell(
child: Text(""),
),
TableCell(
child: Text("Long text",
style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
)
)
]
),
]
),
),
],
)),
Card(
color: Colors.blue.shade200,
elevation: 4.0,
child: Column(
children: [
ListTile(
title: Text("Card 2",
style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
),
trailing: IconButton(
onPressed: () async {
await goToWebPage("https://www.google.com");
},
icon: Icon(Icons.edit)
),
),
Container(
padding: EdgeInsets.all(0.0),
alignment: Alignment.centerLeft,
child:
Table(
columnWidths: const <int, TableColumnWidth>{
0: FlexColumnWidth(),
1: IntrinsicColumnWidth(),
},
children: [
TableRow(
children: [
TableCell(
child: Text("Sub Title",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: Text("")
)
]
),
TableRow(
children: [
TableCell(
child: Text("Short text",
)
),
TableCell(
child: Text("")
)
]
)
]
),
),
],
)
),
Card(
color: Colors.blue.shade200,
elevation: 4.0,
child: Column(
children: [
ListTile(
title: Text("Card 3",
style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
),
trailing: IconButton(
onPressed: () async {
await goToWebPage("https://www.google.com");
},
icon: Icon(Icons.edit)
),
),
Container(
padding: EdgeInsets.all(0.0),
alignment: Alignment.centerLeft,
child:
Table(
columnWidths: const <int, TableColumnWidth>{
0: FlexColumnWidth(),
1: IntrinsicColumnWidth(),
},
children: [
TableRow(
children: [
TableCell(
child: Text("Sub Title",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
),
),
TableCell(
child: Text("")
)
]
),
TableRow(
children: [
TableCell(
child: Text("Short text",
)
),
TableCell(
child: Text("")
)
]
)
]
),
),
],
)
),
// text
]
)
)
)
);
}
},
);
}
}
Solution
Make your table scrollable horizontally, by wrapping it with SingleChildScrollView:
Card(
child: Column(
children:[
....
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: YourTable(),
),
]
)
)
Note: you should provide an intrinsic height for that SingleChildScrollView.
If you need your table to be scrollable in both direction:
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: YourTable()
),
)
Remember to provide intrinsic height, to avoid unbounded height exceptions.
- Flutter error: Execution failed for task ':app:compileDebugJavaWithJavac'
- Children that overflow their parents don't receive tap detection
- Flutter auto fill Assists suggestions not working
- Convert a String to enum value in Dart
- How to use the flutter native splash screen
- Where is flutter.compileSdkVersion?
- Execution failed for task ':app:checkDebugDuplicateClasses'. due to Duplicate class com.mapbox.android.core.permissions.PermissionsListener
- Why does Flutter fail to compile as soon as any package is added to the pubspec.yaml in Android Studio?
- How to check the flutter version of a project
- Flutter - Unhandled Exception: FormatException: Unexpected character (at character 1) | Instance of Response
- Android Studio device list stuck on loading
- The image I tried to display via Flutter NetworkImage is not displayed correctly
- How to load Flutter assets in Android
- App must target Android 14 (API level 34) or higher is showing even after update to API level 34
- How to collapse the ExpansionTile on button click? - Flutter
- Flutter: Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized
- Flutter Firebase Google Sign In not working. Stops after account selection
- How to create a 3D house in Flutter with rotation, highlighting, and control?
- Flutter build error for the first time :Could not open settings remapped class cache for 7yvt6la2007dno98lt3rzbguf
- ModalBottomSheet with images from the gallery
- Create a page transition animation from a DraggableScrollableSheet
- Flutter/Dart: Customize Bottom Navigation Bar height
- How Do I Use KeyCloak in Flutter
- Flutter Solve: 'Offset is outside the bounds of the DataView' error only on Firebase Hosting
- Stripe terminal Wisepad 3 reader not get detected in android Flutter
- Flutter z-index in Column
- How to remove trailing zeros using Dart
- Opening Location Permission from the inside of App flutter
- Dart/Flutter check if value is an integer/whole number
- Could not find package "flutter_native_splash". Did you forget to add a dependency?