flexible_data_view 0.0.3

A customizable package for displaying data in list, grid, table or slideshow views.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flexible_data_view/flexible_data_view.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flexible Data View Demo',
      theme: ThemeData(primarySwatch: Colors.teal),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  ViewType _currentView = ViewType.list;

  final List<String> data = [
    'Apple',
    'Banana',
    'Cherry',
    'Dragonfruit',
    'Elderberry',
    'Fig',
    'Grapes',
    'Honeydew',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flexible Data View Example'),
        actions: [
          PopupMenuButton<ViewType>(
            onSelected: (type) {
              setState(() => _currentView = type);
            },
            itemBuilder: (context) => [
              const PopupMenuItem(value: ViewType.list, child: Text('List')),
              const PopupMenuItem(value: ViewType.grid, child: Text('Grid')),
              const PopupMenuItem(
                value: ViewType.slideshow,
                child: Text('Slideshow'),
              ),
              const PopupMenuItem(value: ViewType.table, child: Text('Table')),
            ],
          ),
        ],
      ),
      body: _currentView == ViewType.table
          ? FlexibleTableView(
              headers: const ['Fruit Name'],
              rows: data.map((e) => [e]).toList(),
            )
          : SizedBox(
              height: 200,
              child: FlexibleDataView<String>(
                data: data,
                viewType: _currentView,
                scrollDirection: Axis.horizontal,
                gridCrossAxisCount: 2,
                autoSlide: true,
                slideInterval: const Duration(seconds: 2),
                itemBuilder: (item, index) => Card(
                  margin: const EdgeInsets.all(8),
                  color: Colors.teal.shade100,
                  child: Center(
                    child: Text(item, style: const TextStyle(fontSize: 18)),
                  ),
                ),
              ),
            ),
    );
  }
}