명함: 레이아웃

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

이제 모든 것을 하나로 모아 볼 시간입니다. 다음 세 개의 수업에서는 명함 앱을 만들게 됩니다. 모든 프로필 페이지가 시작되는 화면 같은 앱입니다.

레이아웃부터 시작하세요. 먼저 화면을 상자들로 그려 보세요. 맨 위에는 둥근 아바타, 그 아래에는 이름, 그다음에는 직업을 화면 가운데 한 열로 배치합니다. 상자들이 올바른 위치에 놓이면 다음은 스타일을 적용할 차례입니다.

챌린지

쉬움

화면 중앙에 다음으로 구성된 Column(mainAxisSize: MainAxisSize.min)로 카드를 만드세요.

radius: 48, backgroundColor: Colors.indigo를 사용하고 자식으로 흰색, 크기 32의 이니셜 JD를 표시하는 CircleAvatar
이름, Jordan Diaz
직업, Flutter Developer

직접 해보기

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: Text('Jordan Diaz'),
        ),
      ),
    );
  }
}