Flutter 中的设计系统主要指的是其Material和Cupertino两种视觉风格的组件。Material Design 是一种设计语言，而Cupertino则是模仿iOS的设计风格。
以下是如何在Flutter中使用这两种设计风格的简单示例：
Material Design 示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Material Design Example'),
),
body: Center(
child: MaterialButton(
child: Text('Press Me'),
onPressed: () => print('Button Pressed'),
),
),
),
);
}
}Cupertino 示例:
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Cupertino Example'),
),
child: Center(
child: CupertinoButton(
child: Text('Press Me'),
onPressed: () => print('Button Pressed'),
),
),
),
);
}
}在这两个示例中，我们创建了一个简单的应用，使用了Flutter提供的Material和Cupertino组件。MaterialApp和CupertinoApp分别定义了应用的顶级属性，如主题色和标题。Scaffold和CupertinoPageScaffold提供了顶部栏、底部栏和主内容区的基本结构。MaterialButton和CupertinoButton是可点击的按钮组件。