×
×

Spread the love

Flutter Cupertino Button

Cupertino button is a widget in flutter used to display ios style button. A CupertinoButton can have text or icon & optional background which is no background by default. It fades out when the user presses the button and fades in when the user releases the button. The default padding of the button is 16px. If you are designing applications for ios this widget will come in handy.

We can create a cupertino button in two ways.

  • CupertinoButton
  • CupertinoButton.filled

Don’t know what Cupertino is? it is nothing but a set of flutter widgets that follow the ios design pattern. These widgets are designed to implement ios features in flutter apps built for the ios platform.

In this tutorial we will learn how to use a cupertino button widget in flutter with example. We will also customize the widget with different properties.

If you are building applications for android platform consider using material buttons in flutter.

How To Create Cupertino Button In Flutter?

To create a cupertino button in flutter we have to call the constructor of CupertinoButton class and provide the required properties. The cupertino button has one required property child. We can use any widget for child property but generally, we will use a text widget. The button will be in the disabled state even if we provide the child. In order to enable the button, we have to use onPressed property. Provide an empty function to onPressed callback.

Flutter Cupertino Button Constructor:

CupertinoButton(
{Key? key, 
 required Widget child, 
 EdgeInsetsGeometry? padding, 
 Color? color, 
 Color disabledColor, 
 double? minSize, 
 double? pressedOpacity, 
 BorderRadius? borderRadius, 
 AlignmentGeometry alignment, 
 required VoidCallback? onPressed}
) 

Basic implementation of CupertinoButton.

CupertinoButton(
  child:Text("Click Me"),
  onPressed: (){}
)

Output:

flutter cupertino button

How To Create CupertinoButton.filled In Flutter?

To create a cupertino button with a background use this constructor. All the properties are similar to the previous constructor except the color property.

Flutter CupertinoButton.filled Constructor:

CupertinoButton.filled(
{Key? key, 
 required Widget child, 
 EdgeInsetsGeometry? padding, 
 Color disabledColor, 
 double? minSize, 
 double? pressedOpacity, 
 BorderRadius? borderRadius, 
 AlignmentGeometry alignment, 
 required VoidCallback? onPressed}
) 

Basic implementation of CupertionButton.filled

CupertinoButton.filled(
  child:Text("Click Me"),
  onPressed: (){}
)

Output:

flutter cupertino button filled

Flutter Cupertino Button Properties

The properties of a flutter cupertion button are:

  • child
  • color
  • padding
  • disabledColor
  • minSize
  • pressedOpacity
  • borderRadius
  • alignment
  • onPressed

child

To add a child widget like text or icon to cupertino button we have to use child property. It accepts a widget as a child.

CupertinoButton(
  child:Text("Click Me"),
  onPressed: (){}
)

Output:

flutter cupertino button child

color

To apply a background color to the cupertino button we will use color property. By default, there is no background for cupertino button. It takes CupertinoColors constant as value.

CupertinoButton(
            onPressed: ()
            {},
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue
          )

Output:

flutter cupertino button background color

padding

To add padding to the cupertino button we have to use the padding property. It accepts EdgeinsetsGeometry as a value. By default it is 16px.

CupertinoButton(
            onPressed: ()
            {},
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.all(10),
          )

Output:

flutter cupertino button padding

disabedColor

To apply a color to the cupertino button when it is disabled we have to use the disabledColor property. It takes CupertinoColors or Colors class constant as value. To disable the button I’m ignoring the onPressed property. We can also disable the button by setting onPressed to null.

CupertinoButton(
            /*onPressed: ()
            {},*/
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.all(10),
            disabledColor: Colors.grey,
          )

Output:

flutter cupertino button disabled color

minSize

To apply a minimum size to the button we will use the minSize property. It takes double as a vale.

CupertinoButton(
            onPressed: ()
            {},
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.all(10),
            disabledColor: Colors.grey,
            minSize: 60,
          )

Output:

flutter cupertino button minsize

pressedOpacity

To apply opacity when we press the cupertino button we will use the pressedOpacity property. It takes double as value. It ranges from 0.0 to 1.0. By default, the pressed opacity is 0.4.

CupertinoButton(
            onPressed: ()
            {},
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.all(10),
            disabledColor: Colors.grey,
            pressedOpacity:0.6,
          )

borderRadius

To apply rounded corners to the cupertino button we will use borderRadius property.

CupertinoButton(
            onPressed: ()
            {},
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.all(16),
            disabledColor: Colors.grey,
            pressedOpacity:0.6,
            borderRadius: BorderRadius.all(Radius.circular(20)),
          )

Output:

flutter cupertino button border radius

alignment

To align the cupertino button at different positions we will use the alignment property. It takes Alignment constant as value. By default, its value is Alignment.center. Other constants are topLeft, topCenter, topRight, centerLeft, centerRight, bottomLeft, bottomCenter, bottomRight.

Container(
          margin: EdgeInsets.all(40),
          alignment: Alignment.topCenter,
          child: CupertinoButton(
            onPressed: ()
            {},
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.all(16),
            disabledColor: Colors.grey,
            pressedOpacity:0.6,
            alignment: Alignment.topLeft
          )
        ),

Output:

alignment of cupertino button in flutter

onPressed

To listen to click events of the cupertino button we will use onPressed callback. If we set it to null or ignore using it the button will be disabled. If we provide a function to it we can listen to the click of the button and perform some action. In the below example I will disable the button by setting the onPressed to null.

 CupertinoButton(
            onPressed: null,
            child: Text("Click Me"),
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.all(16),
          )

Output:

flutter cupertino button onPressed

Flutter Cupertino Button Example

Let’s create an example that demonstrates the use of cupertino button in flutter. In this example, we will display two cupertino buttons. We will create one using CupertinoButton constructor and the other using CupertinoButton.filled constructor.

Create a new Flutter project and replace the code in main.dart file with the code below.

Complete Code:

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Learning',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  double value = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text("Flutter Cupertino Button"),
        ),
        body:Container(
          height: MediaQuery.of(context).size.height*0.25,
          margin: EdgeInsets.all(40),
          alignment: Alignment.topCenter,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              CupertinoButton(
                onPressed: (){},
                child: Text("Click Me"),
                padding: EdgeInsets.all(16),
              ),
              CupertinoButton.filled(
                  child: Text("Click Me"),
                  onPressed: (){}
                  )
            ],
          )
        ),
    );
  }
}

Output:

fluttr cupertino button example output

That’s all about the tutorial on how to use cupertino button widget in flutter. We have also seen an example where we implemented the same. Let’s catch up with some other widget in the next post. Have a great day !!

Do like & share my Facebook page. Subscribe to the newsletter if you find this post helpful. Thank you !!

Reference: Flutter Official Documentation.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.