flutter_multi_scroll_table 0.0.1

The Multi-Scroll Table package provides a comprehensive solution for displaying a scrollable table in both vertical and horizontal directions. This package is ideal for scenarios where you need to dis [...]

A multi-direction widget for showing the list in Flutter.

A Flutter package used to show list scrollable in both vertical and horizontal direction.

Installation

First, add flutter_multi_scroll_table as a dependency in your pubspec.yaml file.

Usage

import 'package:flutter_multi_scroll_table/flutter_multi_scroll_table.dart';

Easy to use , just call the widget name

class DemoScreen extends StatefulWidget {
  const DemoScreen({super.key});

  @override
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: FlutterMultiScrollTable(
        totalWidth: 700,
        height: 500,
        scrollableColumnChildren: List.generate(
          20,
          (index) => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  EachCell(
                    text: Utils.names[index],
                    width: 120,
                    // height: 60,
                  ),
                  const EachCell(
                    text: "B",
                    width: 50,
                  ),
                  const EachCell(
                    text: "C",
                    width: 50,
                  ),
                  const EachCell(
                    text: "D",
                    width: 50,
                  ),
                  const EachCell(
                    text: "E",
                    width: 50,
                  ),
                  const EachCell(
                    text: "F",
                    width: 50,
                  ),
                  const EachCell(
                    text: "G",
                    width: 50,
                  ),
                  const EachCell(
                    text: "H",
                    width: 50,
                  )
                ],
              ),
              const SizedBox(height: 5),
              Container(
                padding: const EdgeInsets.symmetric(vertical: 2),
                width: 600 - 60,
                child: const Divider(
                  height: 1,
                ),
              ),
            ],
          ),
        ),
        fixedColumnChildren: [
          Utils.srNumbers.map((number) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                EachCell(
                  text: number.toString(),
                  width: 80,
                ),
                const SizedBox(height: 5),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 2),
                  child: const Divider(
                    height: 1,
                  ),
                ),
              ],
            );
          }).toList(),
          List.generate(
            20,
            (index) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const EachCell(
                  text: "Y",
                  width: 80,
                ),
                const SizedBox(height: 5),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 2),
                  child: const Divider(
                    height: 1,
                  ),
                ),
              ],
            ),
          ),
          Utils.numbers.map((number) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                EachCell(
                  text: number.toString(),
                  width: 80,
                ),
                const SizedBox(height: 5),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 2),
                  child: const Divider(
                    height: 1,
                  ),
                ),
              ],
            );
          }).toList(),
        ],
        fixedColumnTitles: const ["S.no", 'A', 'B'],
        columns: const [
          EachCell(
            text: "Members",
            width: 120,
            isHeader: true,
          ),
          EachCell(
            text: "A",
            width: 50,
            isHeader: true,
          ),
          EachCell(
            text: "B",
            width: 50,
            isHeader: true,
          ),
          EachCell(
            text: "C",
            width: 50,
            isHeader: true,
          ),
          EachCell(
            text: "D",
            width: 50,
            isHeader: true,
          ),
          EachCell(
            text: "E",
            width: 50,
            isHeader: true,
          ),
          EachCell(
            text: "F",
            width: 50,
            isHeader: true,
          ),
          EachCell(
            text: "G",
            width: 50,
            isHeader: true,
          ),
        ],
        fixedColumnWidths: const [40, 40, 40],
      ),
    );
  }
}

Parameters

Parameters	Description
totalWidth	Required parameter for giving the width to the list view.
fixedColumnWidths	Required parameter for the fixed columns which are scrollable only in vertical direction.
height	Optional parameter that denotes the total height of the list view.
fixedColumnTitles	Optional parameter that denotes the fixed columns titles.
scrollableColumnChildren	Required parameter used to show list items which is scrollable in both vertical and horizontal direction.
fixedColumnChildren	Required parameter used to show list items which is scrollable only in vertical direction.
columns	Required parameter used to give the column names for list items which is scrollable in both vertical and horizontal directions.

Additional information

This package is in a very early stages of development and quite experimental.

License

Licensed under the MIT License, Copyright © 2022 GeekyAnts. See LICENSE for more information.