Widgetの基本

アプリ全体（MaterialApp）
└── ページ（Scaffold）
    ├── AppBar（上部のバー）
    └── Body
        └── Column（縦並び）
            ├── Text（テキスト）
            ├── SizedBox（余白）
            └── ElevatedButton（ボタン）

// シンプルなテキスト
Text('こんにちは')
 
// スタイルを設定
Text(
  'Flutter入門',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

// 塗りつぶしボタン（メインアクション）
ElevatedButton(
  onPressed: () {
    print('ボタンが押された');
  },
  child: const Text('送信'),
)
 
// アウトラインボタン
OutlinedButton(
  onPressed: () {},
  child: const Text('キャンセル'),
)
 
// テキストボタン
TextButton(
  onPressed: () {},
  child: const Text('詳細を見る'),
)

TextField(
  decoration: const InputDecoration(
    labelText: 'ユーザー名',
    hintText: 'enterと入力してください',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('入力値: $value');
  },
)

// ネットワーク画像
Image.network('https://example.com/image.png')
 
// アセット（プロジェクト内の画像）
Image.asset('assets/images/logo.png')

// Column: 縦に並べる
Column(
  mainAxisAlignment: MainAxisAlignment.center,  // 縦方向の揃え
  crossAxisAlignment: CrossAxisAlignment.start, // 横方向の揃え
  children: [
    Text('1行目'),
    Text('2行目'),
    Text('3行目'),
  ],
)
 
// Row: 横に並べる
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.home),
    Text('ホーム'),
    Icon(Icons.arrow_forward),
  ],
)

Container(
  width: 200,
  height: 100,
  padding: const EdgeInsets.all(16),         // 内側の余白
  margin: const EdgeInsets.only(top: 16),    // 外側の余白
  decoration: BoxDecoration(
    color: Colors.blue[100],
    borderRadius: BorderRadius.circular(8),
    border: Border.all(color: Colors.blue),
  ),
  child: const Text('カードのような見た目'),
)

// 固定サイズの余白
const SizedBox(height: 16)
const SizedBox(width: 8)
 
// 残りのスペースを埋める（Flex 内で使う）
const Expanded(child: Text('伸びるテキスト'))

// lib/main.dart
import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: ProfilePage());
  }
}
 
class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('プロフィール')),
      body: Center(
        child: Container(
          width: 300,
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 8,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,  // Columnを内容のサイズに合わせる
            children: [
              // アバター（仮）
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.blue[200],
                child: const Text('T', style: TextStyle(fontSize: 36)),
              ),
              const SizedBox(height: 16),
              const Text(
                '田中太郎',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 8),
              const Text(
                '東北大学 工学部',
                style: TextStyle(color: Colors.grey),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('フォロー'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}