名刺：レイアウト

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 30/32。

すべてをまとめる時間です。次の3つのレッスンでは、ビジネスカードアプリを作ります。これは、あらゆるプロフィールページの出発点となる画面です。

まずはレイアウトから始めましょう。最初に画面をボックスとして描いてみます。上に丸いアバター、その下に名前、さらにその下に職業を、画面中央に一列に並べます。ボックスを適切な位置に配置したら、次はスタイルを整えます。

チャレンジ

簡単

画面中央に、次の要素を含むColumn（mainAxisSize: MainAxisSize.min）としてカードを作成します。

radius: 48、backgroundColor: Colors.indigoを指定したCircleAvatar。子要素にはイニシャルのJDを白色、サイズ32で表示します。
名前、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'),
        ),
      ),
    );
  }
}