DEV Community

Stanislav Ilin
Stanislav Ilin

Posted on

Flutter GroupButton 5.0.0 release notes

#flutter #dart #android #opensource

Hello everybody!

A lot of people read my last post about my group_button package
And I decide to tell you about huge package update to 5.0.0 version.

The main feature of the update - go to Generics

Changelog:

  • 🔥 MAIN FEAT: GroupButton<T> now is generic class.
    Now you can create int, DateTime, double or YourCustomClass typed buttons List for default GroupButton constructor.
    More here

  • ❗️ BREAKING: All deprecated by 4.3.0 and 4.6.0 fields was removed from package.
    More here

  • ❗️ BREAKING: buttonBuilder from 4.6.0 now build buttons by value
    The buttonIndexedBuilder took over the past functionality of the buttonBuilder

  • ⬆️ FEAT: onSelected method now calling with value argument.
    More here

  • 🎀 INFO: Updated examples & README

What is thats meaning ?

In new 5.0.0 version you can set custom buttons value type
It can be int, DateTime, double or YourCustomClass
Button text will be result of .toString() model method in common button display case

GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
)
Enter fullscreen mode Exit fullscreen mode

Also you can use generic button values with custom buttonBuilder
In order to turn values into any widget

GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
  buttonBuilder: (selected, date, context) {
    return Text('${date.year}-${date.month}-${date.day}');
  },
),
Enter fullscreen mode Exit fullscreen mode

Customization

In order to customize your buttons inside GroupButton you can use GroupButtonOptions

GroupButtonOptions(
  selectedShadow: const [],
  selectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.pink[900],
  ),
  selectedColor: Colors.pink[100],
  unselectedShadow: const [],
  unselectedColor: Colors.amber[100],
  unselectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.amber[900],
  ),
  selectedBorderColor: Colors.pink[900],
  unselectedBorderColor: Colors.amber[900],
  borderRadius: BorderRadius.circular(100),
  spacing: 10,
  runSpacing: 10,
  groupingType: GroupingType.wrap,
  direction: Axis.horizontal,
  buttonHeight: 60,
  buttonWidth: 60,
  mainGroupAlignment: MainGroupAlignment.start,
  crossGroupAlignment: CrossGroupAlignment.start,
  groupRunAlignment: GroupRunAlignment.start,
  textAlign: TextAlign.center,
  textPadding: EdgeInsets.zero,
  alignment: Alignment.center,
  elevation: 0,
),
Enter fullscreen mode Exit fullscreen mode

GroupButtonValueBuilder buttonBuilder

Custom builder method to create
your own custom buttons by button [T] value

final buttons = ['10:00', '11:00', '12:00'];

GroupButton(
  buttons: buttons,
  buttonBuilder: (selected, val, context) {
    return Text('$val is selected: $selected');
  },
),
Enter fullscreen mode Exit fullscreen mode

And this example equals to next ->

GroupButtonIndexedBuilder buttonIndexedBuilder

Custom builder method to create
your own custom buttons by button [int] index

final buttons = ['10:00', '11:00', '12:00'];

GroupButton(
  buttons: buttons,
  buttonIndexedBuilder: (selected, index, context) {
    return Text('${buttons[index]} selected: $selected');
  },
),
Enter fullscreen mode Exit fullscreen mode

Remove deprecated and refactor base

And last awesome chage is update package api
Now you can create group of buttons by 1 code line😳:

Image description

GroupButton(buttons: ['10:00', '11:00', '12:00', '13:00']),
Enter fullscreen mode Exit fullscreen mode 
GroupButton(buttons: [10.5, 11, 11.5, 12, 12.5]),
Enter fullscreen mode Exit fullscreen mode 
GroupButton(buttons: [35, 36, 37, 38, 39]),
Enter fullscreen mode Exit fullscreen mode 
GroupButton(buttons: [false, true]),
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this small post🙏!

Connect with me on GitHub and pls put ✨star✨ for this package

Top comments (9)

Collapse
 
ndrohith profile image
Rohith ND •

Looks impressive ! Will try for my next flutter project.

Collapse
 
frezyx profile image
Stanislav Ilin •

Thank you !

Collapse
 
afheisleycook profile image
technoshy •

Good contribution

Collapse
 
frezyx profile image
Stanislav Ilin •

Big thanks

Collapse
 
aryamangodara profile image
Aryaman Godara •

Nice work bro.. love from India

Collapse
 
frezyx profile image
Stanislav Ilin •

❤️

Collapse
 
snelson1 profile image
Sophia Nelson •

Thank you for writing this

Collapse
 
squeezeoj profile image
squeezeoj •

Does [selectedButtons] still exist? If not, then what's the best way to set a default button? Thanks!

Collapse
 
squeezeoj profile image
squeezeoj •

I found the answer here: github.com/Frezyx/group_button/blo...

Need to set defaults in GroupButtonController, like this:

final controller = GroupButtonController(
    selectedIndex: 20,
    selectedIndexes: [0, 1, 2, 3, 4],
    disabledIndexes: [10, 12, 13, 14, 15, 23],
    onDisablePressed: (i) => print('Button #$i is disabled'),
  );
Enter fullscreen mode Exit fullscreen mode

Read next

lukachi profile image

Implement WitnessCalc in native apps Pt.1

Phat -

m_muhd8 profile image

Rock Paper Scissors Game - Flutter

Muha-mmed -

ssharyk profile image

Custom Kotlin Delegates: Shared Preferences

Sergey-Sharyk -

hadywalied profile image

Introducing Zakker: Bringing Islamic Remembrance to Your IDE

Hady Walied -