view_matrix 1.0.0

A flexible and extensible Flutter framework for rendering list and grid views with unified API and local data handling.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "ViewMatrix Example",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ExampleHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: const Text("ViewMatrix Examples"),
          bottom: const TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: "API - GET"),
              Tab(text: "API - POST"),
              Tab(text: "Local Grid"),
              Tab(text: "Fully Custom UI"),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            ApiGetExample(),
            ApiPostExample(),
            LocalGridExample(),
            FullCustomExample(),
          ],
        ),
      ),
    );
  }
}

//
// -------------------------------------------------------------
// 1️⃣ API GET EXAMPLE
// -------------------------------------------------------------
class ApiGetExample extends StatelessWidget {
  const ApiGetExample({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewMatrix(
      viewType: ViewType.list,
      sourceType: SourceType.api,
      apiConfig: ApiConfig(
        url: "https://fakestoreapi.com/products",
        method: HttpMethod.get,
        enableLogging: true,
        showOnly: [
          DataItem.fieldImage,
          DataItem.fieldTitle,
          DataItem.fieldDescription,
          DataItem.fieldBadge,
        ],
        fieldMapping: {
          // Example: renaming API field → DataItem field
          DataItem.fieldTitle: "title",
          DataItem.fieldDescription: "description",
          DataItem.fieldImage: "image",
          DataItem.fieldBadge: "category"
        },
      ),
      uiConfig: ViewMatrixUIConfig(
        titleStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
        descriptionStyle: const TextStyle(fontSize: 14, color: Colors.black54),
        badgeStyle: const TextStyle(color: Colors.blueAccent),
        cardRadius: 16,
        cardElevation: 4,
        imageHeight: 140,
        badgeBackgroundColor: Colors.blue.shade50,
        loaderColor: Colors.indigo,
      ),
    );
  }
}

//
// -------------------------------------------------------------
// 2️⃣ API POST (JSON + Multipart Auto)
// -------------------------------------------------------------
class ApiPostExample extends StatelessWidget {
  const ApiPostExample({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewMatrix(
      viewType: ViewType.list,
      sourceType: SourceType.api,
      apiConfig: ApiConfig(
        url: "https://jsonplaceholder.typicode.com/posts",
        method: HttpMethod.post,
        enableLogging: true,
        body: {
          "title": "ViewMatrix User",
          "body": "Flutter Developer",
          "userId": 1
        },
        successStatusCodes: [200, 201, 202, 204],
        showOnly: [
          DataItem.fieldTitle,
          DataItem.fieldDescription,
          DataItem.fieldBadge
        ],
        fieldMapping: {
          DataItem.fieldTitle: "title",
          DataItem.fieldDescription: "body",
          DataItem.fieldBadge: "userId"
        },
      ),
      uiConfig: ViewMatrixUIConfig(
        titleStyle: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        badgeBackgroundColor: Colors.green.shade50,
        badgeStyle: const TextStyle(color: Colors.green),
        loaderColor: Colors.green,
      ),
    );
  }
}

//
// -------------------------------------------------------------
// 3️⃣ LOCAL GRID EXAMPLE
// -------------------------------------------------------------
class LocalGridExample extends StatelessWidget {
  const LocalGridExample({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewMatrix(
      viewType: ViewType.grid,
      sourceType: SourceType.nonApi,
      localItems: [
        DataItem(title: "Laptop", description: "Macbook Pro", badge: "Tech"),
        DataItem(title: "Bike", description: "Yamaha R15", badge: "Vehicles"),
        DataItem(title: "Shoes", description: "Nike Air", badge: "Fashion"),
      ],
      uiConfig: ViewMatrixUIConfig(
        gridCrossAxisCount: 3,
        cardRadius: 18,
        imageHeight: 100,
        badgeBackgroundColor: Colors.orange.shade50,
        badgeStyle: const TextStyle(color: Colors.deepOrange),
      ),
    );
  }
}

//
// -------------------------------------------------------------
// 4️⃣ FULLY CUSTOM UI EXAMPLE (Custom Card Builder)
// -------------------------------------------------------------
class FullCustomExample extends StatelessWidget {
  const FullCustomExample({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewMatrix(
      viewType: ViewType.grid,
      sourceType: SourceType.api,
      apiConfig: ApiConfig(
        url: "https://fakestoreapi.com/products",
        method: HttpMethod.get,
        enableLogging: false,
        fieldMapping: {
          DataItem.fieldTitle: "title",
          DataItem.fieldDescription: "description",
          DataItem.fieldImage: "image",
        },
      ),
      uiConfig: ViewMatrixUIConfig(
        gridCrossAxisCount: 2,
        customGridBuilder: (item) {
          return Container(
            margin: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Colors.black87,
              borderRadius: BorderRadius.circular(18),
            ),
            child: Column(
              children: [
                Expanded(
                  child: ClipRRect(
                    borderRadius:
                        const BorderRadius.vertical(top: Radius.circular(18)),
                    child: Image.network(
                      item.image ?? "",
                      fit: BoxFit.cover,
                      width: double.infinity,
                      errorBuilder: (_, __, ___) =>
                          const Icon(Icons.broken_image),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(12),
                  child: Text(
                    item.title,
                    style: const TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}