fluttersinglechildscrollviewscrollable-table

Is SingleChildScrollView with "Table" Widget possible?


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?


Solution

  • 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")),
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),