I split the screen in half by 3/5. I added the "table" widget to the bottom part. But I want the bottom to be scrollable. I added SingleChildScrollView but it doesn't work. What should I do?
void main() {
runApp(
MaterialApp(
home: HomePage(),
),
);
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
key: _scaffoldKey,
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Expanded(
flex: 3,
child: Stack(
children: <Widget>[
OpaqueImage(
imageUrl: "assets/images/matematik_sembolleri.jpg",
),
SafeArea(
child: Padding(
padding: const EdgeInsets.all(4),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Align(
alignment: Alignment.centerLeft,
child: IconButton(
icon: const Icon(Icons.menu),
color: Colors.white,
onPressed: () {
_scaffoldKey.currentState.openDrawer();
},
),
),
Align(
alignment: Alignment.topCenter,
child: Text(
"Pirekare Matematik",
textAlign: TextAlign.center,
style: headingTextStyle,
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: const Icon(Icons.star),
color: Colors.white,
onPressed: () {},
),
),
],
),
MyInfo(),
],
),
),
),
],
),
),
The code up to this point is for the top of the screen and is fixed. (You must combine the codes. )
The codes below are for the bottom of the screen and I want them to be scrollable.
Expanded(
flex: 5,
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.only(top: 30),
color: Colors.white,
child: Table(
children: [
TableRow(
children: [
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Özel Ders Programı",
secondText:
"Seviyenize göre çalışma programı ayarlayın",
icon: Icon(
Icons.next_plan,
size: 16,
color: blueColor,
),
),
),
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Konu Anlatım Videoları",
secondText:
"İstediğiniz konuya videoları izleyerek çalışın",
icon: Icon(
Icons.video_collection_rounded,
size: 16,
color: blueColor,
)),
),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Soru Tipleri",
secondText:
"Soru çözme yeteneğinizi arttırın",
icon: Icon(
Icons.text_snippet_rounded,
size: 16,
color: blueColor,
)),
),
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Soru Cüzdanı",
secondText:
"Kaydetmek istediğiniz soruları cüzdanınıza ekleyin",
icon: Icon(
Icons.local_post_office,
size: 16,
color: blueColor,
),
),
),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Puan Tablosu",
secondText:
"Diğer öğrencilerle puanlarınızı karşılaştırın",
icon: Icon(
Icons.leaderboard,
size: 16,
color: blueColor,
),
),
),
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Türkiye Geneli Sınav",
secondText:
"Diğer öğrencilerle aynı anda sınava girin",
icon: Icon(
Icons.map,
size: 16,
color: blueColor,
),
),
),
],
),
],
),
),
),
),
],
),
Positioned(
top: screenHeight * (3 / 8) - 60 / 2,
left: 16,
right: 16,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ProfileInfoCard(firstText: "54", secondText: "Net"),
SizedBox(
width: 10,
),
ProfileInfoCard(firstText: "543", secondText: "Puanınız"),
SizedBox(
width: 10,
),
ProfileInfoCard(firstText: "15", secondText: "Seviye"),
],
),
),
),
],
),
drawer: Drawer(
child: DrawerDosyasi(),
),
);
}
}
If i can't use Table, what do you suggest?
You can give a height to your container that wrapped your table and wrap your table with Listview. You can scroll the tablerow now.
Expanded(
flex: 5,
child: SingleChildScrollView(
child: Container(
height: 80,
padding: const EdgeInsets.only(top: 30),
color: Colors.white,
child: ListView(
children: [
Table(
children: [
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
],
),
],
),
),
),
),