[flutter]ボタンについてのいろいろと、StatefulとStateless

# ボタンがある画面を作る時の基本（たとえば、背景と真ん中にボタンひとつ）

```dart
import 'package:flutter/material.dart';

// 新しい画面を表すBookScreenクラス
class BookScreen extends StatelessWidget {　//この画面は遷移先の画面でそんなに変化しないからstatelessでOK
  const BookScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Scaffoldウィジェットを使用して画面を構築
    return Scaffold(
      // アプリバーを定義
      appBar: AppBar(
        // アプリバーのタイトルを設定
        title: const Text('あなたの本'),// constは定数を意味する
      ),
      // 画面のボディ部分を定義
      body: Stack(
        children: [
          // 背景画像を配置
          Positioned.fill(
            child: Image.asset(
              'images/01_back.png',
              fit: BoxFit.cover, // 背景画像を画面全体に表示
            ),
          ),

        Center(
          child: OutlinedButton(
            onPressed: (){
              // ボタンがタップされた時の処理
            },           
            child: const Text('イベント申し込み'),
            
          ),
        ),
        
          // 本棚の要素をここに追加する
          // 例:
          // Center(
          //   child: Text('本棚の要素をここに追加'),
          // ),
        ],
      ),
    );
  }
}



```
# テキストボタンの種類
普通のボタン: TextButton
テキストが囲まれボタン: OutlinedButton
テキストが囲まれて背景色ついて影もある: ElevatedButton

```dart 
Center( //真ん中に置くよ
          child: OutlinedButton(
            onPressed: (){
              // ボタンがタップされた時の処理
            },           
            child: const Text('イベント申し込み'),
            
          ),
        ),

```

# ボタン配置のいろいろ

メイン画面とかちょっと複雑に配置したいならPositioned。
シンプル配置でいいならAlign。
整列させたいならRowとかColumnかな。


### Positioned ウィジェット

**メリット:**
- 自由に位置を指定できる。
- 親ウィジェット内の任意の場所に配置できる。

**デメリット:**
- 親ウィジェットとして `Stack` が必要。
- レイアウトが複雑になりやすい。

**使い方の注意点:**
- `Stack` ウィジェット内で使用する。
- 多用するとコードが複雑になるため、必要な場合に限定して使う。

**適する場面:**
- 固定位置に配置する要素が必要な場合（例: オーバーレイ、ドラッグ可能なウィジェット）。

**サンプルコード:**
```dart
Stack(
  children: <Widget>[
    Positioned(
      top: 50,
      left: 100,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Button'),
      ),
    ),
    Positioned(
      bottom: 20,
      right: 50,
      child: Image.network('https://example.com/image.jpg'),
    ),
  ],
)
```

### Align ウィジェット

**メリット:**
- 親ウィジェット内で相対的な位置に配置できる。
- シンプルなレイアウト調整に適している。

**デメリット:**
- 親ウィジェットが制約を持っていると意図した配置が難しい場合がある。

**使い方の注意点:**
- `alignment` プロパティを使って位置を指定する。
- 親ウィジェットのサイズや制約を考慮する。

**適する場面:**
- 中央揃えや特定の位置に要素を配置する場合。

**サンプルコード:**
```dart
Align(
  alignment: Alignment.topLeft,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)
```

### Container ウィジェット

**メリット:**
- レイアウト調整、装飾、サイズ調整が簡単にできる。
- 多機能で柔軟性が高い。

**デメリット:**
- 多機能ゆえに、使いすぎるとコードが複雑になることがある。

**使い方の注意点:**
- 必要なプロパティ（`padding`, `margin`, `decoration` など）を適切に設定する。
- 不要な場合は使用を避ける。

**適する場面:**
- 簡単なレイアウト調整や装飾が必要な場合。

**サンプルコード:**
```dart
Container(
  margin: EdgeInsets.only(top: 50, left: 100),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)
```

### Transform ウィジェット

**メリット:**
- ウィジェットの位置、サイズ、回転などを自由に変更できる。
- 高度なアニメーションや変換が可能。

**デメリット:**
- 誤用するとレイアウトが崩れる可能性がある。
- 他のウィジェットに比べてやや複雑。

**使い方の注意点:**
- 変換の設定を慎重に行う。
- 視覚的な変化が意図したものであることを確認する。

**適する場面:**
- 高度なレイアウト調整やアニメーションが必要な場合。

**サンプルコード:**
```dart
Transform.translate(
  offset: Offset(100, 50),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)
```

### Center ウィジェット

**メリット:**
- 子ウィジェットを親ウィジェットの中央に配置するのが簡単。
- シンプルで使いやすい。

**デメリット:**
- 中央以外の位置には配置できない。

**使い方の注意点:**
- 親ウィジェットが大きすぎると見栄えが悪くなる場合がある。

**適する場面:**
- 要素を中央に配置したい場合。

**サンプルコード:**
```dart
Center(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)
```

### Row ウィジェット

**メリット:**
- 子ウィジェットを水平に並べるのが簡単。
- 柔軟なレイアウト調整が可能。

**デメリット:**
- 子ウィジェットが多すぎると、親ウィジェットの幅を超える場合がある。

**使い方の注意点:**
- `MainAxisAlignment` や `CrossAxisAlignment` を使って、配置を調整する。
- 子ウィジェットが多すぎないように注意する。

**適する場面:**
- 水平に要素を並べたい場合。

**サンプルコード:**
```dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 3'),
    ),
  ],
)
```

### Column ウィジェット

**メリット:**
- 子ウィジェットを垂直に並べるのが簡単。
- 柔軟なレイアウト調整が可能。

**デメリット:**
- 子ウィジェットが多すぎると、親ウィジェットの高さを超える場合がある。

**使い方の注意点:**
- `MainAxisAlignment` や `CrossAxisAlignment` を使って、配置を調整する。
- 子ウィジェットが多すぎないように注意する。

**適する場面:**
- 垂直に要素を並べたい場合。

**サンプルコード:**
```dart
Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 3'),
    ),
  ],
)
```

これらのウィジェットを理解し、適切な場面で使い分けることで、Flutter のレイアウトを効率的に構築できます。


# ちなみにStatelessWidgetとStatefullWigetの違い

`StatelessWidget` と `StatefulWidget` は、Flutter フレームワークで使用される 2 つの主要なウィジェットタイプです。それぞれの違いは、状態管理の方法とその使用目的にあります。

### StatelessWidget

**特徴:**
- **状態を持たない:** `StatelessWidget` は、状態（変化するデータ）を持たないウィジェットです。これは、ウィジェットのプロパティが一度設定されると、その後変更されないことを意味します。
- **再描画:** 状態が変わらないため、ウィジェットが再描画される必要がある場合にのみ再描画されます。
- **軽量:** 状態管理をしないため、通常は `StatefulWidget` よりも軽量です。

**使用例:**
- 単純な UI コンポーネント（テキスト、アイコン、静的レイアウトなど）
- データが一度設定され、変更されない場合

**コード例:**
```dart
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}
```

### StatefulWidget

**特徴:**
- **状態を持つ:** `StatefulWidget` は、状態（変化するデータ）を持つことができます。状態が変わるたびにウィジェットが再描画されます。
- **`State` クラス:** `StatefulWidget` は `State` クラスと組み合わせて使用されます。この `State` クラスが実際の状態を管理し、`StatefulWidget` の再描画をトリガーします。
- **リッチなインタラクション:** ユーザーインターフェースにリッチなインタラクションが必要な場合や、ユーザー入力に応じて動的に変化する場合に使用されます。

**使用例:**
- フォーム、チェックボックス、ラジオボタン
- ユーザーの操作に応じて動的に変化するウィジェット

**コード例:**
```dart
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}
```

### 違いのまとめ
- **状態の管理:** `StatelessWidget` は状態を持たず、`StatefulWidget` は状態を持ちます。
- **使用目的:** `StatelessWidget` は静的なコンテンツに適しており、`StatefulWidget` は動的に変化するコンテンツに適しています。
- **再描画:** `StatelessWidget` は再描画の頻度が少なく、`StatefulWidget` は状態の変更に応じて再描画されます。

これらの違いを理解することで、Flutter アプリケーションの設計と実装において適切なウィジェットタイプを選択することができます。