Junior — Middle
What are the main differences between Material and Cupertino components in the context of user interface development?
sobes.tech AI
Answer from AI
In Flutter, Material and Cupertino components are two sets of widgets designed for different platforms and design styles:
-
Material — a set of widgets based on Google Material Design, primarily used in Android applications. It features bright colors, shadows, animations, and specific interface elements (e.g., FloatingActionButton, AppBar).
-
Cupertino — a set of widgets that mimic the iOS (Apple) style. They have a more minimalist and flat design, characteristic of iPhone and iPad, with elements like CupertinoNavigationBar, CupertinoButton.
Main differences:
- Visual style and animations matching the platform.
- Behavior of control elements (e.g., switches, buttons).
- Usage depending on the target platform to create a native user experience.
Example of usage:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
Widget build(BuildContext context) {
if (Theme.of(context).platform == TargetPlatform.iOS) {
return CupertinoButton(
child: Text('Press me'),
onPressed: () {},
);
} else {
return ElevatedButton(
child: Text('Press me'),
onPressed: () {},
);
}
}