>SKILLFlutterで一覧画面(ListView)を作って表示する2020年7月25日モバイルアプリの基礎、一覧画面の作り方ってどうやるの?このことを実践する形式で説明していきます。FlutterはUIツール大まかなデザインパーツはあるので、それを組み合わせてリストを作っていくそんなイメージで実装し画面に表示していきます。基本的には公式のチュートリアルのとおりですが、自分なりの理解を図にしながら説明したいと思います。worldを出していきます。worldという文字に意味はありません。触る言語やアプリケーション作成をする場合に良く使われる文言です。自分が選んだところに設定し、Nextデモアプリケーションがmain.dartに入った初期状態となります。Worldを表示するまずはmain.dartを編集します。Flutterではmain.dartが入り口になっており、基本的にはこのソースを最初に通ります。デモアプリケーションもカウントアップで面白いですが、編集には邪魔なので削除し、次のソースに変更します。Worldの表示までできました。worldを入れていきます。イメージ的には下のような図このように上位のボックスから下のボックスにデザインパーツを当てはめるイメージです。Worldを固定文字として表示するだけですが、これでは動きがありません。ランダムな文字列を生成するライブラリをインポートします。#追加english_wordsaというライブラリです。バージョンもそのままで大丈夫です。これによってライブラリがインターネットからダウンロードされて自動的に設定されます。upgradeをクリックします。pubspec.lockファイルに必要な記述が行われます。}}このような形でランダムな文字列が表示されるようになります。Studio上で保存するとホットリードによって画面の文言が変更されます。一覧画面(ListView)を作るここからゴールに向けて一覧画面作成のための作り込みをしていきます。widgetについては非常に奥が深く別の記事でまとめたいと思います。今は次のような理解で先に進めます。statefulはステータスを全て管理するという意味で状態を常に保存するようなイメージ。statelessはその逆でステータスを管理しないという意味で状態を持たないようなイメージです。動的に動かしたりする際にstatefulが必要になるという概念で大丈夫です。それを導入したのが下記。見た目は何も変わりません。}}はいこのような感じです。見た目に違いはありませんまた、ステートフルウィジェットを使っていますが特にステートを管理はせず単語をそのまま表示しているだけです。Viewを使って一覧作っていきます。全体のソースコードを示します。}}クラスごとにどのようなことをしているのか説明します。MyAppクラスmain()から呼ばれる最初のクラスです。画面の大枠を決める役割でchild:RandomWords()でRandomWordsクラスを呼び出します。クラスRandomWordsクラスではStatefulWidgetを継承します。役割としてはStateFulWidgetを機能に追加することです。StateFulWidgetは状態を保持するために継承します。@orverrideはStateFulWidgetのcreateState()メソッドをここで指定したロジックに置き換えるという意味です。クラス_RandomWordsStateクラスは最終的にMapAppクラスのStetelessWigetの上に被せるようにStatefulWidgetを乗せた時の画面全体を定義しているクラスです。buildメソッドを見るとMapAppクラスのbuildメソッドとほぼ同じような記述があります。その概念はMapAppの役割とほぼ同じです。_buildSuggestions()でプライベートメソッドの_buildSuggestions()を呼んでいます。_buildSuggestionsメソッドはListView.builderで一覧(ListView)を作っています。一覧全体の仕様を決めています。16pxで設定しています。i)はListView画面を下にスクロールした時にiがインクリメントされる仕様です。ロジック部分なので少しピックアップして説明します。_buildRow(_suggestions[index]);i.isOddはiの値が奇数の時だけTRUEになります。if文の中のDivider()は線を引くという機能があります。図の赤枠のところです。2は除算して整数を返すという意味です。iが3なら1となります。このロジックを入れる意味は1つ上の処理で奇数となった時はreturnされるので無駄にiの値をインクリメントしたくないという意図です。同じように動作はします。_suggestionsには今現在画面上に出ている英単語の一覧が入っているリストです。indexは画面を下にスクロールするとインクリメントする値です。この2つを比較してスクロールするした時、予め英単語が作られていた個数よりもさらに下にスクロールしようとした際に_suggestionsのリストにさらに英単語を追加しておくという処理です。設定上10個づつ作って追加しておくようです。_buildRowメソッドは英単語の入っている1行の中のフォント設定やタイトルの設定を行っています。最後に実行してみます。ListVIewでランダムに生成される英単語を一覧にした結果が得られます。良かったこと、悪かったこと書きますが、結論だけ書くと非常に実装しやすくどんどん動くものを作っていきたいと思いました。最高です!実装していて最初に驚いたのはホットリロード機能です。これはswiftなどのモバイル言語を開発していると差がわかるのですが、コードを改変してコンパイルしてからエミュレータに反映という手間があります。ホットリロード機能により、保存さえすればすぐに結果がわかるので、トライアンドエラーが非常に簡単でした。Dart言語についてはほぼjavaの感覚で使えるため元々javaを習得していたこともあり特に難はありませんでした。悪かったところは、ListView、statefulWiget、sttatelessWigetなど定義された型を使うので、自分のやりたいことを達成するために前提として覚えないといけない型の学習が必要かなと思いました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。こんな疑問をまつおが調べてまとめてみます。...SKILLFlutterで開発するためにDartを勉強するFlutterで開発するためいDart言語を勉強したい。このような疑問に答えていきます。...SKILLFlutterのListViewにお気に入り登録機能と画面遷移機能を導入してみるListViewで一覧は作れた。こんな課題に答えていきます。...SKILLFlutterを導入してMacとWindowsでサンプルアプリを起動してみるFlutterってどうやって導入するの。このような疑問を実際に導入手順を説明します。