feat: add main and cross axis alignments

analysis_options.yaml

@@ -0,0 +1 @@
+include: package:flutter_lints/flutter.yaml

example/.metadata

@@ -4,35 +4,20 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: "2663184aa79047d0a33a14a3b607954f8fdd8730"
-  channel: "stable"
+  revision: "99d909aed0f862ecac957eb157353ab7d82da20b"
+  channel: "main"
 
 project_type: app
 
 # Tracks metadata for the flutter migrate command
 migration:
   platforms:
     - platform: root
-      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-    - platform: android
-      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-    - platform: ios
-      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-    - platform: linux
-      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-    - platform: macos
-      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      create_revision: 99d909aed0f862ecac957eb157353ab7d82da20b
+      base_revision: 99d909aed0f862ecac957eb157353ab7d82da20b
     - platform: web
-      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-    - platform: windows
-      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
-      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      create_revision: 99d909aed0f862ecac957eb157353ab7d82da20b
+      base_revision: 99d909aed0f862ecac957eb157353ab7d82da20b
 
   # User provided section
 

example/analysis_options.yaml

@@ -0,0 +1,5 @@
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  rules:
+    library_private_types_in_public_api: false

example/lib/avatars.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:overflow_view/overflow_view.dart';
+
+class Avatar {
+  const Avatar(this.initials, this.color);
+  final String initials;
+  final Color color;
+}
+
+String getInitials(int index) {
+  return String.fromCharCode(65 + (index % 26 + 1));
+}
+
+Color getColor(int index) {
+  return Colors.primaries[index % Colors.primaries.length].shade500;
+}
+
+List<Avatar> generateAvatars(int count) {
+  return List.generate(count + 1, (index) => Avatar(getInitials(index), getColor(index)));
+}
+
+class AvatarsDemo extends StatefulWidget {
+  const AvatarsDemo({super.key});
+
+  @override
+  State<AvatarsDemo> createState() => _AvatarsDemoState();
+}
+
+class _AvatarsDemoState extends State<AvatarsDemo> {
+  int _avatarCount = 5;
+  double _spacing = -40;
+
+  @override
+  Widget build(BuildContext context) {
+    final avatars = generateAvatars(_avatarCount);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SizedBox(
+          width: double.infinity,
+          child: Card(
+            child: Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: OverflowView.flexible(
+                spacing: _spacing,
+                children: <Widget>[
+                  for (int i = 0; i < avatars.length; i++)
+                    AvatarWidget(text: avatars[i].initials, color: avatars[i].color)
+                ],
+                builder: (context, remaining) {
+                  return AvatarWidget(
+                    text: '+$remaining',
+                    color: Colors.red,
+                  );
+                },
+              ),
+            ),
+          ),
+        ),
+        Slider(
+          value: _avatarCount.toDouble(),
+          min: 1,
+          max: 50,
+          onChanged: (value) => setState(() => _avatarCount = value.toInt()),
+        ),
+        SizedBox(height: 20),
+        Text('Spacing (${_spacing.toInt()})'),
+        SizedBox(height: 10),
+        SizedBox(
+          width: 200,
+          child: Slider(
+            value: _spacing,
+            min: -40,
+            max: 40,
+            onChanged: (value) => setState(
+              () => _spacing = value,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class AvatarWidget extends StatelessWidget {
+  const AvatarWidget({
+    super.key,
+    required this.text,
+    required this.color,
+  });
+
+  final String text;
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return CircleAvatar(
+      radius: 40,
+      backgroundColor: color,
+      foregroundColor: Colors.white,
+      child: Text(
+        text,
+        style: TextStyle(fontSize: 30),
+      ),
+    );
+  }
+}

example/lib/fixed_flexible.dart

@@ -0,0 +1,123 @@
+import 'package:flutter/material.dart';
+import 'package:overflow_view/overflow_view.dart';
+import 'overflow_controls.dart';
+
+class FixedVsFlexibleDemo extends StatefulWidget {
+  const FixedVsFlexibleDemo({super.key});
+
+  @override
+  State<FixedVsFlexibleDemo> createState() => _FixedVsFlexibleDemoState();
+}
+
+class _FixedVsFlexibleDemoState extends State<FixedVsFlexibleDemo> {
+  bool _fixed = false;
+  int _count = 10;
+  double _width = 300;
+  double _spacing = 8.0;
+  Axis _axis = Axis.horizontal;
+  MainAxisAlignment _mainAxisAlignment = MainAxisAlignment.start;
+  CrossAxisAlignment _crossAxisAlignment = CrossAxisAlignment.start;
+
+  Widget _buildOverflow(BuildContext context, int count) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.yellow,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      height: 50,
+      width: 50,
+      child: Center(child: Text("Ov: $count")),
+    );
+  }
+
+  List<Widget> _buildChildren(BuildContext context, int count) {
+    return List.generate(
+      count,
+      (index) => Container(
+        decoration: BoxDecoration(
+          color: Colors.blue,
+          borderRadius: BorderRadius.circular(10),
+        ),
+        height: index % 3 * 10 + 50,
+        width: 50 + index % 3 * 10,
+        child: Center(child: Text("Child: $index")),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: double.infinity,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            decoration: BoxDecoration(
+              border: Border.all(color: Colors.black),
+              borderRadius: BorderRadius.circular(10),
+            ),
+            height: 300,
+            width: _width,
+            child: Center(
+              child: OverflowView(
+                mainAxisAlignment: _mainAxisAlignment,
+                crossAxisAlignment: _crossAxisAlignment,
+                builder: _buildOverflow,
+                direction: _axis,
+                layoutBehavior: _fixed ? OverflowViewLayoutBehavior.fixed : OverflowViewLayoutBehavior.flexible,
+                spacing: _spacing,
+                children: _buildChildren(context, _count),
+              ),
+            ),
+          ),
+          OverflowControls(
+            mainAxisAlignment: _mainAxisAlignment,
+            crossAxisAlignment: _crossAxisAlignment,
+            axis: _axis,
+            spacing: _spacing,
+            expandFirstChild: false,
+            fixed: _fixed,
+            count: _count,
+            width: _width,
+            onMainAxisAlignmentChanged: (value) {
+              setState(() {
+                _mainAxisAlignment = value;
+              });
+            },
+            onCrossAxisAlignmentChanged: (value) {
+              setState(() {
+                _crossAxisAlignment = value;
+              });
+            },
+            onAxisChanged: (value) {
+              setState(() {
+                _axis = value;
+              });
+            },
+            onSpacingChanged: (value) {
+              setState(() {
+                _spacing = value;
+              });
+            },
+            onFixedChanged: (value) {
+              setState(() {
+                _fixed = value;
+              });
+            },
+            onCountChanged: (value) {
+              setState(() {
+                _count = value;
+              });
+            },
+            onWidthChanged: (value) {
+              setState(() {
+                _width = value;
+              });
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}