chiclet

Description:

chiclet

Highly customizable island-style buttons known as Chiclet.
Features #
Chiclet provides you with highly customizable island-style buttons similar to those found in the popular language learning app Duolingo and Figma courses.

Getting started #
In the dependencies: section of your pubspec.yaml, add the following line:
dependencies:
chiclet: <latest_version>
copied to clipboard
Usage #

Import Chiclet in your main.dart.

import 'package:chiclet/chiclet.dart';
copied to clipboard

Basic implementation:

ChicletOutlinedAnimatedButton(
onPressed: () {},
child: const Icon(Icons.download_rounded),
),
copied to clipboard

Buttons List #

ChicletButton
ChicletAnimatedButton
ChicletOutlinedButton
ChicletAnimatedOutlinedButton
ChicletSegmentedButton

Button Types #
1. RoundedRectangle (default type): #

You can either not specify it, or write ChicletButtonTypes.roundedRectangle in front of the buttonType property. In either case, the result will be the same. Example:
ChicletOutlinedAnimatedButton(
onPressed: () {},
child: const Icon(Icons.download_rounded),
),
copied to clipboard
ChicletOutlinedAnimatedButton(
onPressed: () {},
buttonType: ChicletButtonTypes.roundedRectangle,
child: const Icon(Icons.download_rounded),
),
copied to clipboard



2. Circle: #

You can create a circle shaped button by writing ChicletButtonTypes.circle in front of the buttonType property. Example:
ChicletOutlinedAnimatedButton(
onPressed: () {},
buttonType: ChicletButtonTypes.circle,
child: const Icon(Icons.download_rounded),
),
copied to clipboard



3. Oval: #

You can create an oval shaped button by writing ChicletButtonTypes.circle in front of the buttonType property. Example:
ChicletOutlinedAnimatedButton(
onPressed: () {},
width: 65,
buttonType: ChicletButtonTypes.oval,
child: const Icon(Icons.download_rounded),
),
copied to clipboard



You can find more examples in the /example/lib/main.dart directory.

Customizable Properties #
ChicletButton and ChicletAnimatedButton: #

padding,
width (If not provided, it will be the same as height),
height (default is 50),
minimumSize,
maximumSize,
isPressed (default is false),
buttonHeight (default is 4, and it applies in addition to the height),
borderRadius (default is 16),
buttonColor (default is shade.900 of ThemeData's primarySwatch, unless you provide the backgroundColor property, then it will be shade.900 of the backgroundColor property),
foregroundColor (default is Colors.white),
backgroundColor (default is ThemeData's primarySwatch),
disabledforegroundColor,
disabledbackgroundColor,
splashFactory (default is NoSplash.splashFactory),
buttonType (default is ChicletButtonTypes.roundedRectangle),

ChicletOutlinedButton and ChicletOutlinedAnimatedButton: #

padding,
width (If not provided, it will be the same as height),
height (default is 50),
minimumSize,
maximumSize,
isPressed (default is false),
buttonHeight (default is 4, and it applies in addition to the height),
borderWidth (default is 2),
borderRadius (default is 16),
borderColor (default is Colors.grey),
buttonColor (default is Colors.grey),
foregroundColor (default is ThemeData's primarySwatch),
backgroundColor (default is Colors.white),
disabledborderColor (default is Theme.colorScheme.onSurface(0.12)),
disabledforegroundColor,
disabledbackgroundColor,
splashFactory (default is NoSplash.splashFactory),
buttonType (default is ChicletButtonTypes.roundedRectangle),

ChicletSegmentedButton: #

padding
width
height
minimumSize,
maximumSize,
isPressed (default is false),
buttonHeight (default is 4, and it applies in addition to the height),
borderRadius (default is 16),
buttonColor (default is Colors.grey),
foregroundColor (default is ThemeData's primarySwatch),
backgroundColor (default is Colors.white),
disabledforegroundColor,
disabledbackgroundColor,
splashFactory (default is NoSplash.splashFactory),
buttonType (default is ChicletButtonTypes.roundedRectangle),

ChicletButtonSegment (Intended to be used only as ChicletSegmentedButton's child): #

padding
width
isPressed (default is false),
buttonColor (default is Colors.grey),
foregroundColor (default is ThemeData's primarySwatch),
backgroundColor (default is Colors.white),
disabledforegroundColor,
disabledbackgroundColor,


Note
When using Material 3, providing the primarySwatch doesn't affect the color properties. You should consider providing either colorScheme or ColorSchemeSeed.

Additional information #
Suggestions, recommendations, bug reports, and issues:
DevRedStone