Flutter’s CupertinoButton
is a widget that provides an iOS styling button for your apps. Whether you’re building an iOS app or incorporating Cupertino widgets into your cross-platform projects, this widget is essential for achieving a sleek, native look.
In this article, we’ll explore the CupertinoButton
with an easy-to-follow example. By the end, you’ll be able to use this widget effectively in your Flutter projects.
What is CupertinoButton
?
The CupertinoButton
widget is designed to replicate the iOS styling seen in native applications. It comes in two variants:
- Default CupertinoButton: A simple text button.
- Filled CupertinoButton: A button with a solid background for emphasis.
Example: CupertinoButton with iOS Styling
Here’s a Flutter code snippet to demonstrate how CupertinoButton
works:
import 'package:flutter/cupertino.dart'; /// Flutter code sample for [CupertinoButton]. void main() => runApp(const CupertinoButtonApp()); class CupertinoButtonApp extends StatelessWidget { const CupertinoButtonApp({super.key}); @override Widget build(BuildContext context) { return const CupertinoApp( theme: CupertinoThemeData(brightness: Brightness.light), home: CupertinoButtonDemo(), ); } } class CupertinoButtonDemo extends StatelessWidget { const CupertinoButtonDemo({super.key}); @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: const CupertinoNavigationBar( middle: Text('CupertinoButton Demo'), ), child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ const CupertinoButton( onPressed: null, child: Text('Disabled Default'), ), const SizedBox(height: 20), const CupertinoButton.filled( onPressed: null, child: Text('Disabled Filled'), ), const SizedBox(height: 20), CupertinoButton( onPressed: () { debugPrint('Default Button Pressed!'); }, child: const Text('Enabled Default'), ), const SizedBox(height: 20), CupertinoButton.filled( onPressed: () { debugPrint('Filled Button Pressed!'); }, child: const Text('Enabled Filled'), ), ], ), ), ); } }
Key Features in the Code
- Class Names:
CupertinoButtonApp
: The main app class for the Flutter application.CupertinoButtonDemo
: A descriptive class name showcasing the use ofCupertinoButton
with iOS styling.
- Event Handlers:
- Debug messages are added in the
onPressed
callbacks to demonstrate button functionality.
- Debug messages are added in the
- UI Elements:
- Both states (
Enabled
,Disabled
) are displayed for both button types (default and filled), demonstrating the iOS styling effectively.
- Both states (
Why Use CupertinoButton
?
- iOS Styling: Provides a native look and feel for buttons on iOS devices.
- Customizable: Easily modify text, background color, padding, and more to suit your design needs.
- Seamless Integration: Perfectly integrates into apps using Cupertino widgets for an authentic iOS experience.
Final Thoughts
Using CupertinoButton
in your Flutter apps ensures a polished iOS styling experience for your users. This example offers a clear understanding of how the widget works and how to incorporate it into your projects.
Start using CupertinoButton
today and take your Flutter apps to the next level!
If you enjoyed this tutorial or have questions about CupertinoButton
, let us know in the comments below. Don’t forget to share this article with fellow developers to spread the knowledge. 🚀