名刺：スタイル

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'),
            ],
          ),
        ),
      ),
    );
  }
}