2023/6/1/Dart/Flutter/A case where you want to get each character from a string and use it with an index

const String sampleStr = 'abcde';

例えば上記のような文字列があったときに、一文字ずつ取り出して使いたい場合、下記のようにsplitメソッドを使って各文字を要素として持つList<String>を取得できます。

For example, if we have a string like the one above and want to extract and use each character, we can use the split method to get a List<String> that has each character as an element, as shown below.

List<String> sampleList = sampleStr.split('');
print(sampleList); //[a, b, c, d, e]

ということで各文字を使ってListTileを生成したい場合下記のようにすればできます。

So if we want to generate a ListTile using each character, we can do it as follows.

import 'package:flutter/material.dart';

const String sampleStr = 'abcde';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<String> sampleList = sampleStr.split('');
    print(sampleList);

    return Scaffold(
      body: Center(
        child: ListView(
          children: sampleList
              .map((item) => ListTile(
                    title: Text(item),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

時には各文字と一緒にその文字のインデックスも欲しいケースもあります。

Sometimes you want each character along with the index of that character.

final mapEntryList = sampleStr.split('').asMap().entries.toList();
print(mapEntryList); 
//[MapEntry(0: a), MapEntry(1: b), MapEntry(2: c), MapEntry(3: d), MapEntry(4: e)]

そういう場合、上記のようにすればList<MapEntry<int, String>>型のListを取得できます。

In that case, you can get a List of List<MapEntry<int, String>> type by doing the above.

ということで、ListTileの先頭にインデックス、titleに文字を表示させたい場合、下記のようにすればできます。

So, if you want to display the index at the beginning of ListTile and the characters in the title, you can do it as follows.

import 'package:flutter/material.dart';

const String sampleStr = 'abcde';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage2(),
    );
  }
}

class HomePage2 extends StatelessWidget {
  const HomePage2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mapEntryList = sampleStr.split('').asMap().entries.toList();
    print(mapEntryList);
    return Scaffold(
      body: Center(
        child: ListView(
          children: sampleStr
              .split('')
              .asMap()
              .entries
              .toList()
              .map(
                (e) => ListTile(
                  leading: Text(e.key.toString()),
                  title: Text(e.value),
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}

今回は以上です。

That’s all for this article. Happy code life.