Flutter Cupertino Button – Tutorial and Examples

Last updated on December 30, 2020 A Goodman Loading... Post a comment

Flutter has libraries with lots of built-in widgets like Material and Cupertino. If you want to make an app that your target audience is iPhone and iPad users, then you’ll probably want to use the Cupertino library. This one provides a bunch of widgets that implement the current iOS design language.

In this article, we’ll take a look at the CupertinoButton widget and walk through several examples of using it in Flutter applications. You’ll also learn how to style and disable a Cupertino button.

Overview

A Cupertino button responds to touches with fade-in and fade-out effects. By default, its padding is 16. When using it inside a fixed height widget, the padding should be set to a smaller number.

To use CupertinoButton, don’t forget to import the Cupertino library:

import 'package:flutter/cupertino.dart';

Constructors

CupertinoButton constructor:

CupertinoButton({
  Key key, 
  @required Widget child, 
  EdgeInsetsGeometry padding, 
  Color color, 
  Color disabledColor: CupertinoColors.quaternarySystemFill, 
  double minSize: kMinInteractiveDimensionCupertino, 
  double pressedOpacity: 0.4, 
  BorderRadius borderRadius: const BorderRadius.all(Radius.circular(8.0)), 
  @required VoidCallback onPressed
})

Example:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
          child: CupertinoButton(
        child: Text('A Button'),
        onPressed: () {},
      )
      ),
    );
  }
}

Output:

Another example:

CupertinoButton(
          child: Text('A Button'),
          color: CupertinoColors.activeOrange,
          onPressed: (){},
        )

Output:

CupertinoButton.filled

You can also create a filled Cupertino button by using CupertinoButton.filled. Here’s the construtor:

CupertinoButton.filled({
  Key key, 
  @required Widget child, 
  EdgeInsetsGeometry padding, 
  Color disabledColor: CupertinoColors.quaternarySystemFill, 
  double minSize: kMinInteractiveDimensionCupertino, 
  double pressedOpacity: 0.4, 
  BorderRadius borderRadius: const BorderRadius.all(Radius.circular(8.0)), 
  @required VoidCallback onPressed
})

Example:

CupertinoButton.filled(
          child: Text('A Button'),
          onPressed: () {},
     )

Output:

Disable a Cupertino button

To disable a Cupertino button, just set its onPressed property to null.

Example:

CupertinoButton.filled(
          child: Text('A Button'),
          disabledColor: CupertinoColors.inactiveGray,
          onPressed: null,
        )

Output:

Cupertino icon buttons

A CupertinoButton can take in an icon as its child.

Example

This example uses a Cupertino icon but using a material icon with a Cupertino button is totally fine and you can do that if you like.

CupertinoButton(
     onPressed: () {}, 
     child: Icon(CupertinoIcons.add_circled_solid, size: 100,
)),

Output:

CupertinoButton within CupertinoNavigationBar

If you want to implement a CupertinoButton within a CupertinoNavigationBar, don’t forget to set the button’s padding to 0, otherwise your interface will be skewed.

Example:

import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      // hide the debug banner
      debugShowCheckedModeBanner: false,
      title: "Kindacode.com",
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Kindacode.com'),
        trailing: CupertinoButton(
          child: Icon(CupertinoIcons.settings),
          onPressed: () {},
          padding: EdgeInsets.zero,
        ),
      ),
      child: Container(),
    );
  }
}

Output:

Conclusion

This article went over the basics and a few examples of using Cupertino buttons in Flutter applications. These iOS-style buttons are great and are suitable if the app you’re working on focuses on iPhone and iPad users, giving them the best experience and comfort.

If you would like to explore more about Flutter, check out our Flutter topic page for more tutorials and examples.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x