名片:样式
本课属于 Coddy Flutter 学习旅程的“你的第一个应用”单元。第 31 课,共 32 课。
各个部分都已就位。现在把它们排成卡片的样子:让名字成为最先映入眼帘的内容,职业则作为下方一行更低调的文字。
字号和字重会让一行文字显得重要。柔和的颜色能让文字退居次要位置。在头像和名字之间留出一点空隙,让它们各自更舒展。
挑战
简单设置卡片样式:
- 在头像和姓名之间留出
16像素的间距 - 将姓名字号设为
28,并加粗 - 将职业设置为
Colors.blueGrey
亲手试试
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
radius: 48,
backgroundColor: Colors.indigo,
child: Text('JD', style: TextStyle(fontSize: 32, color: Colors.white)),
),
Text('Jordan Diaz'),
Text('Flutter Developer'),
],
),
),
),
);
}
}
这节课包含一个小测验。开始学习即可作答,并记录你的进度。
你的第一个应用中的所有课
自己练习: Flutter 在线编译器