Flutterでライセンスページを独自に作る際のハマりポイント

LicenseEntryの扱い方について

Transcript

1. ライセンスページを独自に作る際のハマりポイント ~　LisenceEntryの扱い方　~ 1
2. 自己紹介 そた Flutter&KMPエンジニアやってます 東京高専出身で高専プロコンやってまし た 最近はTRPGやってます！ 2
3. Flutterでライセンス表示を実装するといえば...? 3
4. Flutter標準のLicensePageを使う 4
5. Widget一つで実装できてめっちゃ簡単！！ @override Widget build (BuildContext context) { return LicensePage( applicationName: 'Flutter', applicationVersion: '1.0.0', ); } なのですが... 5
6. アプリによってはデザインが合わないことがある -> カスタムライセンスページを作る 6
7. 依存しているライブラリは以下のコードで取得できる final List<LicenseEntry> licenses = await LicenseRegistry.licenses.toList(); 7
8. よし、 じゃあこの内容をWidgetに渡して表示するだけだな 8
9. List<LicenseEntry>どう扱えばいいんだ　 9
10. 最初はLicenseEntryこんな感じか なって思ってた class LicenseEntry { final String packageName; final List<String> licenses; } 10
11. 全然違った abstract class LicenseEntry { Iterable<String> get packages; Iterable<LicenseParagraph> get paragraphs; } なぜ抽象クラス...? どうしてpackagesがIterableなんだ? LicenseParagraphってなんぞや？ この謎のクラスが配列で返ってくるとかどうすればいいんだ...? 11
12. とりあえず取得したLicenseEntryの中身を見てみよう 12
14. LicenseEntryは、パッケージに紐づくライセンスの　リ ストを持っているのではなく、ライセンスに紐づくパッケ ージのリストを持っている 14
15. パッケージにライセンスが紐づく形に変換してあげる Future<Map<String, List<String>>> getLicenseInfo() async { final licenseEntries = await LicenseRegistry.licenses.toList(); Map<String, List<String>> licenseInfo = {}; for (var entry in licenseEntries) { final entryWithLineBreaks = entry as LicenseEntryWithLineBreaks; for (var element in entryWithLineBreaks.packages) { if (licenseInfo.containsKey(element)) { licenseInfo[element]!.add(entryWithLineBreaks.text); } else { licenseInfo[element] = [entryWithLineBreaks.text]; } } } 15
16. FutureBuilder( future: getLicenseInfo(), builder: (context, AsyncSnapshot<Map<String, List<String>>> snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return const CircularProgressIndicator(); } if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } return ListView.builder( itemCount: snapshot.data!.length, itemBuilder: (context, index) { final key = snapshot.data!.keys.elementAt(index); final value = snapshot.data![key]!; return ExpansionTile( title: Text('$key ${value.length} 件'), children: [ for (var license in value) ListTile( title: Text(license), ), ], ); }, ); }), 16
17. これだと段落がない 17
18. ここでLicenseParagraphが登場 18
19. class LicenseParagraph { const LicenseParagraph(this.text, this.indent); /// 先頭、末尾の空白を除いた段落のテキスト final String text; /// 段落のインデントのステップ数。 /// /// * 0 は段落がインデントされていないことを意味します。 /// * 1 は段落が1 単位のインデントがあることを意味します。 /// * 2 は段落が2 単位のインデントがあることを意味します。 /// /// ... などです。 /// /// さらに、特別な値[centeredIndent] は、段落がインデントされるのではなく、 /// 中央に配置されることを示すために使用できます。 final int indent; 19
20. LicenseEntryにおいてライセンスは段落ごとの　　　　 インデント情報を持っているLicenseParagraphで表現さ れる 20
21. Map<String, List<List<LicenseParagraph>>>に変換す るといい感じに表示できそう 21
22. Future<Map<String, List<List<LicenseParagraph>>>> getLicenseInfo() async { final licenseEntries = await LicenseRegistry.licenses.toList(); Map<String, List<List<LicenseParagraph>>> licenseInfo = {}; for (var entry in licenseEntries) { for (var element in entry.packages) { if (licenseInfo.containsKey(element)) { licenseInfo[element]!.add(entry.paragraphs.toList()); } else { licenseInfo[element] = [entry.paragraphs.toList()]; } } } } 22
23. ListView.builder( itemCount: snapshot.data!.length, itemBuilder: (context, index) { final key = snapshot.data!.keys.elementAt(index); final value = snapshot.data![key]!; return ExpansionTile( title: Text('$key ${value.length} 件'), children: [ for (var license in value) Column( children: [ for (var paragraph in license) Padding( padding: EdgeInsets.only( left: 16.0 * paragraph.indent), child: ListTile( title: Text(paragraph.text), ), ), ], ), ], ); }, ); 23
24. 段落付きで表示できた！　 24
25. ご清聴ありがとうございました 25