chiclet 1.0.0

Animated island-style buttons.

Highly customizable island-style buttons known as Chiclet.

Features

This package provides you with highly customizable buttons known as Chiclet. Commonly seen in the language learning app Duolingo.

[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]

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),
• 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 Color.grey),
• foregroundColor (default is ThemeData's primarySwatch),
• backgroundColor (default is Colors.white),
• splashFactory (default is NoSplash.splashFactory),
• buttonType (default is ChicletButtonTypes.roundedRectangle),

Additional information

Suggestions, recommendations, bug reports, and issues: DevRedStone