flexible_wrap 0.0.4

FlexibleWrap is a Flutter widget designed to provide a flexible and customizable way to arrange widgets in a wrap layout

example/lib/main.dart

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flexible Wrap Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flexible Wrap Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final padding = 8.0;
  final spacing = 5.0;
  final itemWidth = 380.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: FlexibleWrap(
          length: 35, // Number of children to display
          runAlignment: WrapAlignment.start,
          crossAxisAlignment: WrapCrossAlignment.end,
          spacing: spacing,
          builder: (int index) {
            return Padding(
              padding: EdgeInsets.all(padding),
              child: Container(
                height: 100,
                decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(8.0)),
                child: Center(child: Text('Item $index')),
              ),
            );
          },
          itemWidth: itemWidth, // Width of each item
          direction: Axis.horizontal, // Direction to arrange the children
          alignment: WrapAlignment.start, // Alignment of children within a run
        ),
      ),
    );
  }
}

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

// import 'dart:developer';

// import 'package:flutter/foundation.dart';
// import 'package:flutter/material.dart';
// import 'package:flutter/rendering.dart';

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

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

//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Flutter Demo',
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         colorSchemeSeed: Colors.blue,
//       ),
//       home: MainApp(),
//     );
//   }
// }

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

//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       home: Scaffold(
//         body: MyWrap(
//           children: List.generate(
//             20,
//             (index) => Padding(
//               padding: const EdgeInsets.all(8.0),
//               child: Container(
//                 height: 100,
//                 width: 100,
//                 decoration: BoxDecoration(
//                   color: index == 19 ? Colors.brown : Colors.blue,
//                   borderRadius: BorderRadius.circular(8.0),
//                 ),
//                 child: Center(child: Text('Item $index')),
//               ),
//             ),
//           ),
//         ),
//       ),
//     );
//   }
// }

// class MyWrap extends Wrap {
//   const MyWrap({super.key, super.children});

//   @override
//   RenderWrap createRenderObject(BuildContext context) {
//     return MyRenderWrap(
//       direction: direction,
//       alignment: WrapAlignment.center,
//       spacing: spacing,
//       runAlignment: runAlignment,
//       runSpacing: runSpacing,
//       crossAxisAlignment: crossAxisAlignment,
//       textDirection: textDirection ?? Directionality.maybeOf(context),
//       verticalDirection: verticalDirection,
//       clipBehavior: clipBehavior,
//     );
//   }
// }

// class MyRenderWrap extends RenderWrap {
//   MyRenderWrap({
//     super.direction,
//     super.alignment,
//     super.spacing,
//     super.runAlignment,
//     super.runSpacing,
//     super.crossAxisAlignment,
//     super.textDirection,
//     super.verticalDirection,
//     super.clipBehavior,
//   });
//   @override
//   void performLayout() {
//     final parentSize = (parent as RenderBox).constraints.maxWidth;
//     super.performLayout();
//     for (var child = firstChild; child != null; child = childAfter(child)) {
//       double extraWidth = 0.0;
//       final double widthWithSpacing = child.size.width;
//       if (parentSize.isFinite) {
//         int items = (parentSize / widthWithSpacing).floor();
//         double remainder = parentSize.remainder(widthWithSpacing);
//         extraWidth = remainder / items;
//       }
//       print((parent as RenderBox).getMaxIntrinsicWidth(child.size.height));
//       // child.child!.layout(BoxConstraints.tight(Size(300, 60)));
//       child.layout(BoxConstraints.tight(Size(180, 60)));
//     }
//   }
// }