質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

解決済

Flutter 無限リスト作成についてサンプルコードの意味が分からないため理解したい

KentarouHayashi
KentarouHayashi

総合スコア16

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

1回答

0リアクション

0クリップ

203閲覧

投稿2022/07/30 23:05

編集2022/07/30 23:08

前提

Flutterのサンプルコードを使用してFlutterの勉強をしているFlutter初心者です。
無限リスト作成にて動作がよくわからない箇所があります。

実現したいこと

Flutterの無限リストのサンプルコードを理解したい

発生している問題・エラーメッセージ

描画のタイミングが12個の英単語をリストに登録後に10個の英単語を一気に画面に描画しているようでした。
ListView.builderにてitemCountをしていない場合、12個のデータでリストを作成するという仕様なのでしょうか。
また、itemCountで「5」を指定してみたのですが、画面に描画されたのは3個でした。
画面上に表示されるのがリストの数より2個足らないのですがこの辺の制御がどこで行われているのかわからない状態です。
この辺の挙動についてご教示いただけますと幸いです。

また以下の書き方についても教えてください。
これはreturn _buildRow(_suggestions[index]);で呼び出されpairに代入。
WordPairはasPascalCaseを使用するために必要という感じでしょうか。
(プログラミング自体あまりやってなく、構文等わからず、調べてもこの辺の記載方法が何を指しているのかなどわからず。。。)

Dart

Widget _buildRow(WordPair pair)

該当のソースコード

Dart

import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( title: 'Startup Name Generator', home: RandomWords() ); } } class RandomWordsState extends State<RandomWords> { final _suggestions = <WordPair>[]; final _biggerFont = const TextStyle(fontSize: 18.0); Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Startup Name Generator'), ), body: _buildSuggestions(), //Widget _buildSuggestions()で作成したウィジェット ); } Widget _buildSuggestions() { //_buildSuggestionsというウィジェットを作成する return ListView.builder( //itemBuilderプロパティで返すWidgetを複数作成するWidget padding: const EdgeInsets.all(15.0),//余白の設定。all以外はonly(top,right,bottom,left),symmetry(horizontal,vertical) itemBuilder: (context, i) {//contextは画面表示内容を生成するために必要なもの。iは0から始まり、呼び出されるたびに加算。 if (i.isOdd) return Divider();//iが奇数だった場合に罫線を入れる final index = i ~/ 2; //~を入れることで整数を返す if (index >= _suggestions.length) { _suggestions.addAll(generateWordPairs().take(10)); } return _buildRow(_suggestions[index]); }); } Widget _buildRow(WordPair pair) { return ListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), ); } } class RandomWords extends StatefulWidget { RandomWordsState createState() => new RandomWordsState(); }

試したこと

ブレイクポイントにてリスト登録事に動作を止めてどのタイミングで画面に描画されるのかを確認しました。

補足情報(FW/ツールのバージョンなど)

OS:Windows11
IDE:Android Studio
Flutter 3.0.4
english_words-4.0.0

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。