Question 293488 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Make table scrollable to display all elements

I have a problem. I have a Table(...) that consists some elements. Unfortunately there are to many elements and I got the following error message Bottom Overflowed by X Pixels.. So the best option would be to make the table scrollable. This means that if not all elements can be displayed, they should simply be displayed further down and the user can scroll down there.

Now my question is, how can I make the element scrollable?

          Center(
              child: Container(
                  child: Column(children: [
                    (isRecording == false) ?
                    ElevatedButton.icon(
                      style: ElevatedButton.styleFrom(
                          backgroundColor: Color(0xC1D1FFC1)),
                      onPressed: () {
                        onRecording();
                      },
                      icon: const Icon(
                        // <-- Icon
                        Icons.play_arrow,
                        size: 24.0,
                      ),
                      label: const Text('Start Recording'), // <-- Text
                    )

                        :
                    ElevatedButton.icon(
                      style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(
                              0xC1FDA0AB)),
                      onPressed: () {
                        onStopRecording();
                      },
                      icon: const Icon(
                        // <-- Icon
                        Icons.stop,
                        size: 24.0,
                      ),
                      label: const Text('Stopp Recording'), // <-- Text
                    ),
                    (isRecording == true) ?
                    Table(
                        children: chunks.map((e) {
                          return TableRow(children: e);
                        }).toList())
                        :
                    Table(),
                  ]))),
Tags:

2

Answers


  1. 0

    You just wrapped the Table with SingleChildScrollView and added the Expanded widget to ensure that the SingleChildScrollView takes up all available vertical space.

     (isRecording == true)
        ? Expanded(
            child: SingleChildScrollView(
              child: Table(
                children: chunks.map((e) {
                  return TableRow(children: e);
                }).toList(),
              ),
            ),
          )
        : Table(),
    Login or Signup to reply.
  2. 0

    To make the Table scrollable, you can use a SingleChildScrollView widget. Here’s an example of how you can modify your code:

    Center(
 child: Container(
    child: Column(
      children: [
        // Your recording buttons...
        (isRecording == true)
            ? Expanded(
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: Table(
                    children: chunks.map((e) {
                      return TableRow(children: e);
                    }).toList(),
                  ),
                ),
              )
            : Table(),
      ],
    ),
  ),
),

    In this modification, I wrapped the Table widget with a SingleChildScrollView. The SingleChildScrollView allows its child to be scrolled if its content exceeds the available space. The scrollDirection is set to Axis.vertical to enable vertical scrolling. Additionally, I wrapped the SingleChildScrollView with an Expanded widget to ensure it takes up all available vertical space.

    This way, if the Table content is too large to fit on the screen, the user can scroll through it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search