DevRedStone/Chiclet

Highly customizable island-style buttons known as Chiclet.

Support the Project

If you find this project useful and would like to support its development, you can donate using the following cryptocurrencies. We work on this project in our spare time alongside our full-time jobs, and even a small donation — as little as $1 — goes a long way in Iran and helps us dedicate more time to improving and maintaining it.

• BTC (Bitcoin): bc1qkxcvlvkrslx33g2kql45au438ua3qrvanangw2
• ETH (Ethereum): 0x575ef94aea4aa5bdf5c74c6b47311768118ad7c7
• TRX (Tron): TRXMXafCkQ1sND7f9rfUNVDWazR866GHwF
• USDT (Tron): TRXMXafCkQ1sND7f9rfUNVDWazR866GHwF
• Toncoin (Ton): UQBcgZhcrJ-Qd-MUol1SvCLSqZCWZ01efrJJh4SUsoBpGtJw

Features

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

Chiclet

Getting started

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  chiclet: <latest_version>

Usage

1. Import Chiclet in your main.dart.

import 'package:chiclet/chiclet.dart';

2. Basic implementation:

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

Chiclet

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),
  ),
  

  ChicletOutlinedAnimatedButton(
    onPressed: () {},
    buttonType: ChicletButtonTypes.roundedRectangle,
    child: const Icon(Icons.download_rounded),
  ),
  

Chiclet

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),
  ),
  

Chiclet

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),
  ),
  

Chiclet

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

Chiclet

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