array_view 0.0.1

Customizable Flutter row and column widgets that provide additional functionality.

example/lib/main.dart

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

void main() {
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Array View Demo',
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final insets = MediaQuery.of(context).padding;

    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: ArrayView.column(
            spacing: 12,
            padding: EdgeInsets.only(
              left: insets.left + 24,
              top: insets.top + 24,
              right: insets.right + 24,
              bottom: insets.bottom + 24,
            ),
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Text(
                'ArrayView',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 24,
                ),
              ),
              const Text(
                'The quick brown fox jumps over the lazy dog',
              ),
              IgnoreArrayPadding(
                child: Container(
                  padding: const EdgeInsets.all(12),
                  color: Colors.lightGreen,
                  child: const Icon(
                    Icons.image,
                    size: 128,
                    color: Colors.white,
                  ),
                ),
              ),
              ArrayView.row(
                height: 64,
                spacing: 12,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: ['A', 'B', 'C'].map((letter) {
                  return Expanded(
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Center(
                        child: Text(
                          letter,
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  );
                }).toList(),
              ),
              Container(
                height: 64,
                decoration: BoxDecoration(
                  color: Colors.indigo,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Center(
                  child: Text(
                    'Button',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}