명함: 스타일

Coddy Flutter 여정의 첫 앱 만들기 섹션에 포함된 레슨. 32개 중 31번째.

구성 요소가 제자리에 있습니다. 이제 카드처럼 보이게 꾸며 보세요. 이름이 가장 먼저 눈에 들어오고, 직업은 그 아래에 한결 차분한 줄로 표시되어야 합니다.

크기와 굵기는 문장의 중요도를 나타냅니다. 부드러운 색상은 문장을 뒤로 물러나 보이게 합니다. 아바타와 이름 사이에 약간의 간격을 두면 각각 여유롭게 보입니다.

챌린지

쉬움

카드 스타일 지정하기:

아바타와 이름 사이에 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'),
            ],
          ),
        ),
      ),
    );
  }
}