1. My_Application 備忘録

1.1. 内容・目的

　どうも最近Flutterをはじめたどこにでもいる理工系の大学生です．　今日は初めて自分で考えたアプリのひな型を作製したのでその備忘録と躓いたポイントのアウトプットとしてまとめた物です．解釈の間違いや理解不足な点がありますがご指摘していただけうと幸いです．
　今回制作しているアプリは友達からのお願いでAIノベリスとの補助用のアプリとして制作しています．講義や休みの合間に制作しているためかなり進捗は遅いですが，実力向上のため頑張ります. 公式ドキュメント等で学んだ内容に対する理解を深めることを目的としています．

　今回の目標アプリの画面にListView型式でassetsフォルダの中の画像をXのUIのように表示すること

1.1.1. 対象者

Flutter初学者

1.2. 内容

1.2.1. 完成コード

　まずはいったん完成した以下コードです．

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const List<String> data = [
    "test1",
    "test2",
    "test3",
    "test4",
    "test5",
    "test6",
    "test7",
    "test8",
    "test9",
    "test10",
    "test11",
    "test12",
    "test13",
    "test14",
    "test15",
    "test16",
    "test17",
    "test18",
    "test19",
    "test20"
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(title: const Text("Flutter App"), actions: const [
              Padding(
                  padding: EdgeInsets.only(right: 20), child: Icon(Icons.info))
            ]),
            body: ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return Card(
                  child: ListTile(
                    leading:
                        Image.asset('assets/images/${data[index]}.png',
                            errorBuilder: (context, error, stackTrace) {
                      return const Icon(Icons.error);
                    }),
                    title: Text(data[index]),
                    trailing: const Icon(Icons.more_vert), //右に表示されるアイコン
                    isThreeLine: false,
                    dense: true,
                    enabled: true,
                    selected: false,
                    onTap: () {},
                    onLongPress: () {},
                  ),
                );
              },
        )));
  }
}

　重要なのは@overrideより下のコードです．
下記の表は私がアプリを作るうえで必要となる要素についてまとめた物です

関数・Widget	内容
Widget build	Widgetがどのように描写されるかを表す．UI構築のための親Widgetで，取る引数が構築する為に必要な情報である.
変数宣言	そのクラスで使われるインスタンス．変数を宣言するときはインスタンスとして継承する．
Image.assets	.yamlで記述するとき, pathはフルで--assets/imagesのようにassetsを含んで記述する.

1.2.2. 勘違いしていたこと

1.2.2.1. Widget

　Widgetについて，htmlやcssのように入れ子構造で考えていたが考え方は同じだが少し異なっていた．
Widgetはどこまで行ってもただのUIを格納する箱であり，一種の変数に近い．ゆえにListView Widgetの中で変数を宣言することは，変数の中で変数を宣言することに等しい．つまりできない.

1.2.2.2. 「,」と「;」の扱い

　「,」 は引数を取る時に使い．「;」はWidgetや関数の区切りとして記述する．どっちを書けばいいか迷ったときはWidgetの中を記述しているのかを考えながらすればコピペしてきても簡単に判断できる.

1.3. 今後の展望

　描写されたCardにワンクリックで対応するテキストがコピペできる機能を実装する．またCardにアイコンを実装する．

1.3.1. 引用・参考

公式ドキュメント
参考サイト