Flutter embraces the power of established design languages, bringing you a rich set of pre-built widgets that adhere to either Google's Material Design or Apple's Human Interface Guidelines (often referred to as Cupertino). This significantly accelerates your development by providing ready-to-use components that are not only visually appealing but also follow platform-specific user experience conventions.
Material Design widgets are designed to mimic the physical world, with surfaces, elevation, and motion providing intuitive user feedback. They offer a consistent and beautiful experience across Android, web, and even desktop platforms. Some common Material widgets include:
AppBar: The top bar of your screen, typically displaying a title and navigation icons.Scaffold: A basic structure for Material Design layouts, providing a framework for things like drawers, snack bars, and floating action buttons.FloatingActionButton: A prominent circular button that represents the primary action in an application.Card: A Material Design surface that displays content in a concise manner, often used for lists and articles.TextField: A widget for user text input.
Scaffold(
appBar: AppBar(
title: Text('My Material App'),
),
body: Center(
child: Text('Hello, Material World!'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Cupertino widgets, on the other hand, are meticulously crafted to provide an authentic iOS experience. They follow Apple's design principles, ensuring that your Flutter app feels right at home on any iPhone or iPad. Key Cupertino widgets include:
CupertinoNavigationBar: The iOS-style top navigation bar.CupertinoPageScaffold: A basic page structure for Cupertino apps.CupertinoButton: A tappable button with an iOS look and feel.CupertinoTextField: The iOS equivalent of a text input field.CupertinoSwitch: A togglable switch with iOS styling.
CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('My Cupertino App'),
),
child: Center(
child: CupertinoButton(
onPressed: () {},
child: Text('Tap Me'),
),
),
)