【Flutter】Containerを透明(Opacity)にする実装から透明処理の基本を学ぼう！

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // Containerを透明にするサンプル
          child: Opacity(
            opacity: 0.5, // 1. 透明度を50%に設定
            child: Container(
              width: 200.0, // 2. Containerの幅を200に設定
              height: 200.0, // 3. Containerの高さを200に設定
              color: Colors.blue, // 4. Containerの色を青に設定
              child: Text(
                '透明なContainer', // 5. Textウィジェットを追加
                style: TextStyle(
                  color: Colors.white, // 6. テキストの色を白に設定
                  fontSize: 24, // 7. フォントサイズを24に設定
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}