Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@maof-devinAIdea

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

Posted at

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

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

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

ボタン配置のいろいろ

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

Positioned ウィジェット

メリット:

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

デメリット:

  • 親ウィジェットとして Stack が必要。
  • レイアウトが複雑になりやすい。

使い方の注意点:

  • Stack ウィジェット内で使用する。
  • 多用するとコードが複雑になるため、必要な場合に限定して使う。

適する場面:

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

サンプルコード:

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 プロパティを使って位置を指定する。
  • 親ウィジェットのサイズや制約を考慮する。

適する場面:

  • 中央揃えや特定の位置に要素を配置する場合。

サンプルコード:

Align(
  alignment: Alignment.topLeft,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)

Container ウィジェット

メリット:

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

デメリット:

  • 多機能ゆえに、使いすぎるとコードが複雑になることがある。

使い方の注意点:

  • 必要なプロパティ（padding, margin, decoration など）を適切に設定する。
  • 不要な場合は使用を避ける。

適する場面:

  • 簡単なレイアウト調整や装飾が必要な場合。

サンプルコード:

Container(
  margin: EdgeInsets.only(top: 50, left: 100),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)

Transform ウィジェット

メリット:

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

デメリット:

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

使い方の注意点:

  • 変換の設定を慎重に行う。
  • 視覚的な変化が意図したものであることを確認する。

適する場面:

  • 高度なレイアウト調整やアニメーションが必要な場合。

サンプルコード:

Transform.translate(
  offset: Offset(100, 50),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)

Center ウィジェット

メリット:

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

デメリット:

  • 中央以外の位置には配置できない。

使い方の注意点:

  • 親ウィジェットが大きすぎると見栄えが悪くなる場合がある。

適する場面:

  • 要素を中央に配置したい場合。

サンプルコード:

Center(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)

Row ウィジェット

メリット:

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

デメリット:

  • 子ウィジェットが多すぎると、親ウィジェットの幅を超える場合がある。

使い方の注意点:

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

適する場面:

  • 水平に要素を並べたい場合。

サンプルコード:

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 を使って、配置を調整する。
  • 子ウィジェットが多すぎないように注意する。

適する場面:

  • 垂直に要素を並べたい場合。

サンプルコード:

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 コンポーネント（テキスト、アイコン、静的レイアウトなど）
  • データが一度設定され、変更されない場合

コード例:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}

StatefulWidget

特徴:

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

使用例:

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

コード例:

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 アプリケーションの設計と実装において適切なウィジェットタイプを選択することができます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?