[Flutter]ListViewに番号を自動で振りたい

Question

現在個人開発しているアプリのリストに番号を自動で振りたいと考えております。

現状ではデータのidを表示しているのですが、リストの一番上から順に1,2,3,4..と番号を付けていきたいと考えております。

手動でidを降順にすることもかんがえましたが、管理がしづらくなるので自動で番号を付ければとかんがえております。

行うこと自体はそんなに難しくないと思ったので、色々調べてみたのですが自分のプロジェクトにきっちりはまる情報がなかなか見つからないので質問させていただきました。

どなたかわかる方がいらっしゃいましたらおしえていただけないでしょうか？

  UnmodifiableListView<Course> favoriteList(List<String> ids) =>
      UnmodifiableListView(
          _listCourse.where((course) => ids.contains(course.id)));

  UnmodifiableListView<Course> get beginnerList => UnmodifiableListView(
      _listCourse.where((course) => course.type == "BEGINNER"));

  UnmodifiableListView<Course> get intermediateList => UnmodifiableListView(
      _listCourse.where((course) => course.type == "INTERMEDIATE"));

  UnmodifiableListView<Course> get advanceList => UnmodifiableListView(
      _listCourse.where((course) => course.type == "ADVANCED"));

  UnmodifiableListView<Course> get packsList =>
      UnmodifiableListView(_listCourse.where((course) => course.type == "PACKS"));

リストは4つにわかれておりましてここで番号をカウントできるようにするのかと考えているのですが、、
詳しくはGitに全体を上げておりますのでみていただければ幸いです。
↓
https://github.com/nannantown/flutter_lang

Answer 1

DartでList<Course>からindexとCourseを取り出すには、以下のようにasMap()で一旦にMapに変換した後、entriesでList<MapEntry<int,Course>>にしてから、map()するとうまくいくと思います

list
  .asMap()
  .entries
  .map((entry) => CourseCard(index: entry.key, name: entry.value))
  .toList();

※ 他にも方法はありますが、Listから直接indexを取得する方法はないみたいです。

---

動作確認したコード全体も載せておきます（GitHubのmasterブランチをベースにしています）

course_list.dart（メソッドのみ）
※ CourseCardにindexも渡すように修正

  List<Widget> getChildrenCourse() {
    return list
        .asMap()
        .entries
        .map((entry) => CourseCard(index: entry.key, name: entry.value))
        .toList();
  }

course_card.dart
※ 引数でindexをもらって、表示するように修正
※ このクラスのnameプロパティはcourseにした方が確かにわかりやすいと思います

class CourseCard extends StatelessWidget {
  final int index;
  final Course name;

  CourseCard({@required this.index, this.name});

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          gradient: LinearGradient(
            colors: [
              Colors.lightBlue,
              Colors.lightBlueAccent,
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: ListTile(
          contentPadding:
              EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
          onTap: () {
            Navigator.of(context).pushNamed(
              SentencesScreen.routeName,
              arguments: {
                'id': name.id.toString(),
                'title': name.title.toString(),
              },
            );
          },
          leading: Text(
            (index + 1).toString() + '.',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          title: Container(
            child: Text(
              name.title,
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          trailing: Material(
            color: Colors.transparent,
            child: Consumer<FavoriteList>(
              builder: (context, favoriteList, _) => IconButton(
                icon: Icon(favoriteList.isFavorite(name.id)
                    ? Icons.favorite
                    : Icons.favorite_border),
                iconSize: 40,
                autofocus: true,
                highlightColor: Colors.pinkAccent,
                hoverColor: Colors.pink,
                onPressed: () {
                  favoriteList.toggle(name.id);
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Comments

[namihana]

ご回答ありがとうございました！
asMapを使用する方法は今まで使ったことがなく、自力ではなかなか辿り着けなかったかと思います。。

favoriteリストの方も上の方法で実現することができました。
他の回答者様にもご指摘いただいていた、プロパティの名前の件も個人的にもわかりにくく感じていたので今回修正いたしました。

今回もわかりやすく書いていただいて大変感謝しております。m(__)m
ありがとうございます。

[popobot]

dart List index などのキーワードでググれば、asMapを使った例が結構出てくると思います。
indexを取得するのにasMapを使わないといけない時点でわかりにくいのはありますね...

Answer 2

Flutter はよく分からないのですが、ざっと見てみました。

まず気になったのがデータの持ち方ですね。

var BEGINNER = [
  Course(
    id: 'b1',
    title: '自己紹介をしよう',
  ),
  Course(
    id: 'b2',
    title: '宿にチェックインしよう',
  ),

// 略

const SENTENCES = const [
  Contents(
      course: 'b1',
      speakerJA: "b1やぁ！ 元気かい？",
      speakerJB: "やぁ！ 元気だよ。そっちは？",
      speakerEA: "Hi! How are you?",
      speakerEB: "Hi! I'm good thanks, and you?",
      soundNameA: "01_0",
      soundNameB: "01_1"),
  Contents(
      course: 'b1',
      speakerJA: "bいいよ。ありがと。しばらく合ってなかったね。",
      speakerJB: "そうだね。ロンドンの外に引っ越したよ。",
      speakerEA: "Fine, thanks. I haven't seen you in a while.",
      speakerEB: "I know. I moved out of London.",
      soundNameA: "01_2",
      soundNameB: "01_3"),

// 略

Course と Contents が分かれていて、id で対応させてますよね。これだと Course を変更した時に Contents の修正を忘れるとかありそうなので、Course と Contents は一体化させたほうがいいんじゃないかと思います。
また、id を連番にすると途中に追加した時の変更が面倒というのはその通りで、id そのものはおそらく必要だと思いますが、表示用の番号とは切り分けて考える（'b-hello' のような内容を表すものにする）のがいいと思います。

次に、変数名のつけ方ですが、

class CourseList extends StatelessWidget {
//  final courseData = Provider.of<Course>(context);
  var name;
  CourseList({@required this.name});

  // 略

      itemCount: name.length,
      itemBuilder: (context, index) {
        return ChangeNotifierProvider<Course>.value(
          value: name[index],
          child: ListCards(name: name[index]),

class ListCards extends StatelessWidget {
  var name;
  ListCards({@required this.name});

  // 略

              arguments: {
                'id': name.id.toString(),
                'title': name.title.toString(),
              },

どちらも name というプロパティ（Dart の用語は知りませんが）を持ってるようですが、CourseList では Course のリスト、ListCards では Course ですよね。普通、name という名前を見たら単純な文字列だと思うのでちょっと混乱しました。それぞれ courseList および course というように、内容を表す変数名にしたほうがいいと思います。また、CourseList もデータなのかそれを表示するもの（Flutter の用語を知りませんが、View とか Widget とか）なのか混乱する可能性があるので、CourseListView または CourseListWidget とするのがよいのでは。

で、本題の id を使わずに連番を表示する方法ですが、'b', 'i', 'a', 'p' の部分は CourseList のプロパティにして、番号は index を使えばいいんじゃないでしょうか。

Comments

[namihana]

回答ありがとうございました！
データの作り方、名前の付け方のなど大変参考になりました！
プログラミングを初めてまだ日が浅いのでまだまだ良い書き方をできていないかと思います。。

質問の回答としては
>番号は index を使えばいいんじゃないでしょうか。
ということでしたが、僕もそう考えているのですが、flutter上での具体的なやり方がわからないので質問をあげさせてもらいました。

引き続きアンサーを募集しようと思います。
ご回答いただきありがとうございました！