【Flutter/Dart】Container/Row/Column/Stack/Expanded/Flexible/Align/Centerの使い方

Container(
  width: 100,   // 横幅
  height: 100,  // 高さ
  padding: EdgeInsets.all(20), // 内部余白
  margin: EdgeInsets.symmetric(vertical: 10), // 外部余白
  color: Colors.black, // 背景色
  child: Text(
    'Container',
    style: TextStyle(color: Colors.white),
  ),
)

Container(
  width: 100,
  height: 100,
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.red, Colors.orange], // グラデーション色
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: Text(
    'グラデーション',
    style: TextStyle(color: Colors.white), 
  ),
)

Container(
  width: 100,
  height: 100,
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.orange,
    // 角丸
    borderRadius: BorderRadius.circular(20), 
    boxShadow: [
      // 影
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        blurRadius: 10,
        spreadRadius: 3,
        offset: Offset(4, 4),
      ),
    ],
  ),
  child: Text(
    '角丸', 
    style: TextStyle(color: Colors.white)
    ),
)

Container(
  width: 200,
  height: 100,
  color: Colors.yellow,
  alignment: Alignment.center, // 中央配置
  child: Text('中央配置'),
)

Row(
  // 横方向の配置
  mainAxisAlignment: MainAxisAlignment.center, 
  // 縦方向の配置
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Icon(Icons.home),
    Icon(Icons.star),
    Icon(Icons.settings),
  ],
)

Column(
  // 縦方向の配置
  mainAxisAlignment: MainAxisAlignment.start, 
  // 横方向の配置
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Icon(Icons.home),
    Icon(Icons.star),
    Icon(Icons.settings),
  ],
)

Stack(
  children: <Widget>[
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      top: 20,
      left: 20,
      child: Icon(Icons.star, size: 50),
    ),
  ],
)

Row(
  children: <Widget>[
    Icon(Icons.home),
    Expanded(child: Container(color: Colors.black, height: 50)),
    Icon(Icons.star),
  ],
)

Row(
  children: <Widget>[
    Flexible(
      flex: 2,
      child: Container(color: Colors.blue, height: 50),
    ),
    Icon(Icons.home),
    Flexible(
      flex: 1,
      child: Container(color: Colors.green, height: 50),
    ),
  ],
)

Row(
  children: <Widget>[
    Spacer(),
    Flexible(
      flex: 2,
      child: Container(color: Colors.blue, height: 50),
    ),
    SizedBox(height: 20),
    Flexible(
      flex: 1,
      child: Container(color: Colors.green, height: 50),
    ),
    Spacer(),
  ],
)

Align(
  alignment: Alignment.topRight,  // 右上に配置
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

Center(
  child: Text('Centered Text'),
)