Flutterの基礎をまとめてみた（4）

Posted at 2024-11-19

今回はじゃんけんアプリを作ります

最初に、じゃんけんアプリを作るために必要なウィジェットについて学び、
じゃんけんのアプリを作っていきましょう。

ウィジェットについて

そもそもウィジェットって何？　(復習)

ウィジェットは、Flutterでアプリを作るときの「部品」みたいなものです。
おもちゃのブロックを組み立てるように、ウィジェットを組み合わせて画面を作ります。

ウィジェットは主に２種類あります。

①単体で利用できるウィジェット

独立して機能を果たす
例:
Text（文字）
じゃんけんの結果を表示する。

Text("あなたの勝ち！")

Icon（アイコン）
じゃんけんの手（✊、✋、✌️）をアイコンで表示する！

Icon(Icons.handshake)

②レイアウトを司るウィジェット

子ウィジェットの配置を制御する。
これらは、アプリ内の「じゃんけんの手」や「結果表示」などを整列させるのに使います。

例:
Column（たてに並べる）
→ウィジェットを上から下に並べる

Column(
  children: [
    Text("上の文字"),
    Text("下の文字"),
  ],
)

Row（よこに並べる）
→ウィジェットを左から右に並べる

Row(
  children: [
    Icon(Icons.star),
    Text("星アイコンの隣に文字！"),
  ],
)

Stack（重ねる）
→ウィジェットを重ねて配置する

Stack(
  children: [
    Image.asset("背景.png"),
    Text("重ねた文字"),
  ],
)

ウィジェットの紹介

1.Centerウィジェット

要素を画面の上下左右中央にできる。

Center(
    child: //ここに子要素を記載する。
)

2.Textウィジェット

文字列の表示

Text(
    'Hello world'
)

長い文章の場合は最大行数(maxLies)や3点リーダー(overflow)を使う。

Text(
  '長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです',
  maxLines: 2, // 最大1行
  overflow: TextOverflow.ellipsis, // 省略記号を表示
)

テキストの色や大きさなどを変えれます。

TextStyleオブジェクトを使います。

Text(
  'この文字は青です。',
  style: TextStyle(
      color: Colors.blue, //フォントの色
      fontSize: 30,　//フォントサイズ
      fontWeight:FontWeight.bold, //フォントの太さ
      ),   
)

3.Imageウィジェット

Imageウィジェットは２種類あります。
①Image.networkウィジェット
②Image.asstウィジェット

Image.networkウィジェットについて

インターネットから引用して、画像を表示する。

Image.network(
    'https://illustcenter.com/2022/05/13/rdesign_14296/',
    width: 400, // 横サイズ
    height: 100,　// 縦サイズ
),

Image.asstウィジェットについて

プロジェクトの画像を表示する。

pubspec.yamlに必ず画像のパスを通す。
例：assetsディレクトリにgu.pngの画像の場合

  assets:
    - assets/gu.png

Image.asst(
    'assts/01.jpeg', //asstsというディレクトリの01.jpegの画像
    width: 400, // 横サイズ
    height: 100,　// 縦サイズ
),

4.Paddingウィジェット

上下左右に余白を作成します。

Padding(
    padding: EdgeInsets.all(15.0), // 上下左右に余白を追加
      child: Text('長い文章の場の場合のテスト用テキストです'),
    ),

その他
・EdgeInsets.fromLTRB(double left, double top, double right, double bottom)
名前無し引数で左、上、右、下の順に値を設定することで、
それぞれの方向の余白を設定

・EdgeInsets.only({double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0})
名前付き引数で指定したい方向にだけ余白を指定することが可能です。

・EdgeInsets.symmetric({double vertical = 0.0, double horizontal = 0.0})
verticalのプロパティで上と下に同じ値の余白を、horizontalのプロパティで
左と右に同じ値の余白をセットで設定することができます。

5.ColoredBoxウィジェット

ColoredBoxは背景色を作成する。

ColoredBox(
   color: Colors.blue,
   child: Text('こんにちは'),
    ),

Color.fromARGB(255, 255, 0, 0),
透明度,赤,緑,青を0~255で範囲を指定することもできます。

6.Alignウィジェット

上下左右に整列させます。

Align(
   alignment:Alignment.centerLeft, 
      child: Text('こんにちは'),
    ),

・右下に配置したい場合は

Alignment.bottomRight

・左上に配置したい場合は

Alignment.topLeft

・左上に配置したい場合は

Alignment.bottomLeft

・真ん中上に配置したい場合は

Alignment.topCenter

・真ん中下に配置したい場合は

Alignment.bottomCenter

・中央に配置したい場合は

Alignment.center

・中央右に配置したい場合は

Alignment.centerRight

・中央右に配置したい場合は

Alignment.centerLeft

7.TextButtonウィジェット

こんにちはという文字列のボタンが作成できる。

TextButton(
   onPressd:(){ 
      print('押しました。');
      },
     child: Text('こんにちは'),
    ),

8.AlerDialogウィジェット

通知などダイアログを表示できる。

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text("通知"),  // タイトル
      content: Text("押されたアラート"),  // 内容部分
      actions: [  // 閉じる処理
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('close'),
        ),
      ],
    );
  },
);

8.ElevatedButtonウィジェット

立体的なボタンを作成できる。

ElevatedButton(
   onPressd:(){ 
      print('押しました。');
      },
     child: Text('こんにちは'),
    ),

ボタンのその他
・RoundedRectangleBorder
　ボタンを丸くする。

ElevatedButton(
  style: ElevatedButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10) 
      )
  ),
  child: const Text('ボタンを表示'),
  onPressed: () {},
);

参考に
[Flutter]コピペで使える！ボタンのデザイン16種類
https://zenn.dev/coka01/articles/cb0b632766138e9858e7