Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

Flutter- make horizontally scrollable multiple tables with fixed header and scrollable body

I am trying to have multiple tables in Flutter so that I can scroll horizontally to view the tables one after another. The table header needs to be fixed and the body needs to be vertically scroll-able. I have used table_sticky_headers package. Below is my full code.

    import 'package:flutter/material.dart';
    import 'package:table_sticky_headers/table_sticky_headers.dart';
    
    void main() {
      runApp(
        MaterialApp(
         home: MyApp(),
        ),
      );
    }
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Multiple Sticky Headers Tables'),
          ),
          body: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                StickyHeadersTable(
                  columnsLength: 3,
                  rowsLength: 5,
                  columnsTitleBuilder: (i) => Text('Column $i'),
                  rowsTitleBuilder: (i) => Text('Row $i'),
                  contentCellBuilder: (i, j) => Text('Table 1: Item $i-$j'),
                ),
                StickyHeadersTable(
                  columnsLength: 4,
                  rowsLength: 6,
                  columnsTitleBuilder: (i) => Text('Column $i'),
                  rowsTitleBuilder: (i) => Text('Row $i'),
                  contentCellBuilder: (i, j) => Text('Table 2: Item $i-$j'),
                ),
                StickyHeadersTable(
                  columnsLength: 2,
                  rowsLength: 3,
                  columnsTitleBuilder: (i) => Text('Column $i'),
                  rowsTitleBuilder: (i) => Text('Row $i'),
                  contentCellBuilder: (i, j) => Text('Table 3: Item $i-$j'),
                ),
              ],
            ),
          ),
        );
      }
    }

In console, I get the following exception:

The following assertion was thrown building Scaffold(dirty, state: ScaffoldState#d52a1(tickers: tracking 2 tickers)): No MediaQuery widget ancestor found. Scaffold widgets require a MediaQuery widget ancestor. The specific widget that could not find a MediaQuery ancestor was: Scaffold dirty state: ScaffoldState#d52a1(tickers: tracking 2 tickers) The ownership chain for the affected widget is: "Scaffold ← MyApp ← [root]" No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets. The relevant error-causing widget was: Scaffold Scaffold:file:///D:/AndroidProjects/fixed_header_table/lib/main.dart:14:12

How to achieve what I said above ?

Upvotes: 0

Views: 153

Answers (0)

Related Questions