Cupertino Text Button pub version

CodeFactor

A button that looks like a Cupertino text button!

example

Text Button

A simple text button can be created like this:

CupertinoTextButton(
    text: 'Apply',
    style: const TextStyle(fontSize: 20),
    onTap: () {
        // Do your text stuff here.
    },
),

For text buttons you can configure the following properties:

PropertyTypeDescription
textStringTitle of the button
styleTextStyleText style of the title
textAlignTextAlignText alignment of the button
textDirectionTextDirectionThe text direction to use for rendering the text
textOverflowTextOverflowThe text direction to use for rendering the text
softWrapboolWhether the text should break at soft line breaks

Material Icon Button

A simple material icon button can be created like this:

CupertinoTextButton.icon(
    icon: Icons.chevron_left,
    size: 30,
    onTap: () {
        // Do your icon stuff here.
    },
),

For material icon buttons you can configure the following properties:

PropertyTypeDescription
iconIconDataIcon to display
sizedoubleSize of the icon
textDirectionTextDirectionThe text direction to use for rendering the icon

Common Properties

Either you creating a text or an icon button, you can specify these properties:

PropertyTypeDescription
onTapFunctionOn tap handler of the button
onLongPressFunctionOn long press handler of the button
colorColorForeground color of the button in normal state, e.g. not pressed
pressedColorColorForeground color of the button in pressed state
forwardDurationDurationDuration of the animation from color to pressedColor
backwardDurationDurationDuration of the animation back from pressedColor to color
curveCurveThe animation curve.

Theme

All these shared properties, except for the onTap and onLongPress ones, can be configured via the CupertinoTextButtonTheme. Just wrap it around your app or any other parent widget above CupertinoTextButtons in the tree like this:

CupertinoTextButtonTheme(
    color: Colors.white,
    pressedColor: Colors.orange,
    /* forwardDuration, backwardDuration and curve can also be configured here. */
    child: Row(
        children: [
            CupertinoTextButton(
                text: 'First Option',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                    // Do your first stuff here.
                },
            ),
            CupertinoTextButton(
                text: 'Second Option',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                    // Do your second stuff here.
                },
            ),
        ],
    ),
)

And both of these text button will have the same colors!

If these properties are not specified in the button and no theme is provided, fallback values are used:

PropertyFallback Value
colorColors.black
pressedColorTheme*.primaryColor
forwardDurationconst Duration(milliseconds: 20)
backwardDurationconst Duration(milliseconds: 200)
curveCurves.fastOutSlowIn

* Theme — the default Flutter Theme.

Libraries

cupertino_text_button