Description:

wrap and more

wrap_and_more #
The wrap_and_more library provides a custom Flutter widget called WrapAndMore that allows you to display child widgets within a Wrap layout and handle cases where the number of children exceeds a specified maximum row count.
The WrapAndMore widget lays out its children in a Wrap widget and
displays the specified overflowWidget when the children exceed the
maximum number of rows specified by the maxRow parameter. The number
of children to display is automatically determined based on the available
space within the Wrap.
You can use this widget to achieve:

Limiting the number of rows
Get the count of the remaining children

Features #

Getting started #
In your flutter project pubspec.yaml add the dependency:
dependencies:
...
wrap_and_more: ^[version]
copied to clipboard
Usage #
This library doesn't use other library, so it should work out of the box.
Import wrap_and_more.dart.
import 'package:wrap_and_more/wrap_and_more.dart';
copied to clipboard
Add WrapAndMore in your build method.
WrapAndMore(
maxRow: 2,
spacing: 8.0,
runSpacing: 8.0,
overflowWidget: (restChildrenCount) {
return Text(
'+ $restChildrenCount more',
style: TextStyle(color: Colors.grey),
);
},
children: [
// Add your widgets here
],
)
copied to clipboard
Full example:
import 'package:flutter/material.dart';
import 'package:wrap_and_more/wrap_and_more.dart';

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

class MyApp extends StatelessWidget {
const MyApp({Key? key});
static const List<String> categories = [
"Automotive",
"Services",
"Home and application",
"Beauty and Care",
"Fashion and Apparel",
"Technology and Electronics",
"Health and Wellness",
"Food and Beverages",
"Toys and Games",
"Books and Entertainment",
];

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Wrap and More"),
),
body: Container(
padding: const EdgeInsets.all(16),
width: 500,
child: WrapAndMore(
maxRow: 3,
spacing: 5,
runSpacing: 5,
overflowWidget: (restChildrenCount) {
return MyChip(text: "+$restChildrenCount");
},
children: categories
.map(
(e) => MyChip(text: e),
)
.toList(),
),
),
),
);
}
}

class MyChip extends StatelessWidget {
final String text;
const MyChip({
Key? key,
required this.text,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey, borderRadius: BorderRadius.circular(10)),
child: Text(
text,
style: TextStyle(color: Colors.white),
),
);
}
}

copied to clipboard
Important parameters and explanation #



Parameter
Explanation




key
Key for WrapAndMore, used to call WrapAndMoreState


maxRow
The maximum number of rows to show within the Wrap


overflowWidget
The overflowWidget parameter is a function that takes an integer as input, representing the number of remaining children beyond the maxRow, and returns a widget to display as the "overflow" representation.


spacing
Parameters control the vertical spacing between children in the Wrap.


runSpacing
Parameters control the horizontal spacing between children in the Wrap.


children
The children parameter is a list of widgets to display within the Wrap.



Issue #
Please file any issues, bugs or feature requests as an issue on our GitHub page.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter