Material Widgets Vs Cupertino Widgets

Material Widgets and Cupertino Widgets are two different design systems provided by Flutter for building user interfaces that adhere to the design principles of Android (Material Design) and iOS (Cupertino).

Material Widgets:

Material Widgets are designed to follow the Material Design guidelines, which are primarily used for Android apps but can also be used for cross-platform Flutter apps. Material Widgets provide a set of ready-made UI components with a distinctive Material Design look and feel. Here’s a brief overview:

• Examples of Material Widgets:
• AppBar: A Material Design app bar with various options for navigation and actions.
• FloatingActionButton: A Material Design floating action button used for primary actions.
• RaisedButton and ElevatedButton: Buttons styled according to Material Design.
• Card: A Material Design card for displaying content.
• TextField: A text input field with Material Design styling.
• ListTile: A single fixed-height row typically used in lists.
• BottomNavigationBar: A bottom navigation bar for app navigation.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Material Widgets Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text('Elevated Button'),
            ),
            Card(
              child: ListTile(
                leading: Icon(Icons.account_circle),
                title: Text('List Tile'),
                subtitle: Text('A Material Design list tile.'),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                labelText: 'Enter text',
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}

Cupertino Widgets:

Cupertino Widgets are designed to follow the Human Interface Guidelines (HIG) of iOS. They provide widgets with a native iOS look and feel for building Flutter apps that closely resemble iOS apps. Here’s a brief overview:

• Examples of Cupertino Widgets:
• CupertinoNavigationBar: A navigation bar with iOS-style navigation.
• CupertinoButton: A button styled according to iOS guidelines.
• CupertinoTextField: A text input field with iOS styling.
• CupertinoPicker: A wheel-like picker control often used in iOS.
• CupertinoActionSheet: An iOS-style action sheet for presenting options.

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino Widgets Example'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoButton(
              onPressed: () {},
              child: Text('Cupertino Button'),
            ),
            CupertinoTextField(
              placeholder: 'Enter text',
            ),
            CupertinoPicker(
              itemExtent: 32.0,
              onSelectedItemChanged: (int index) {},
              children: <Widget>[
                Text('Item 1'),
                Text('Item 2'),
                Text('Item 3'),
              ],
            ),
          ],
        ),
      ),
    ),
  ));
}