フロント側をFlutter（スマホ）Thymeleaf（PC）、バックエンド側SpringBootの自動作成＠自動生成ツール作成中
19:10
①「ファイを開く」ボタンをやった。HTTP（これならSpringSecurity認証通る）でファイルをスマホに取り込んでから表示するようにした。頑張って、PDFの表示はOKレベルまでいった。しかし、拡張子txtは、表示されるけど、文字化けする。どうにもこうにも解決できない。ので、とりあえずこのまま先に進むことにする。
■「ファイルを開く」ボタンがある画面
■画面にある「ファイルを開く」ボタンと、押下後。拡張子PDFの場合。これはOK
■画面にある「ファイルを開く」ボタンと、押下後。拡張子TXTの場合。これはNG。だけど、とりあえずこのまま先に進む。ファイルがSJISやUTF8だったりするのはどうなるのかな。とりあえずどちらも漢字は文字化けする。UTF8の漢字は豆腐の絵（以下はUTF8を表示）になるけど、SJISはちょっと違う感じ。ほんとわからない。
「ファイルを開く」ボタンのための、flutter・スマホ側及びSpring・PC側。チェックして直した内容は以下
■使用できる項目情報一覧画面で「ファイルを開く」を押下したが、WEB側のログイン失敗画面が出る。
理由：WebViewConfigurationを使ってみたが、Headersにある認証情報が、何らかの理由で。Spring側にわたっていないと思われる。
かつ、Spring側で認証エラーの時Flatter側に戻ってこないで、WEB側のログイン失敗画面になっている。
★１．修正対象：Flutter側ひな形。
・3_00_hinagata_List.txt及び、
2_00_hinagata_Detail.txt 修正
＜＜追加 start＞＞
import '../../utils/pdf_txt_dsp_comm.dart';
＜＜追加 end＞＞
★２．修正対象：Flutter側ひな形。
・hinagata_ListlView_ファイル.txt 修正
＜＜修正前 start＞＞
onPressed: (){CommUtils.launchInWebViewOrVC(context,
Consts.myHttpUrl + '/upload/■{PRG_NAME}■/' + ■{PKEY_ITEM_NAME_VALUES_LISTVIEW}■ '/' + element["■{ITEM_NAME}■"] + '?' + DateFormat('yyyyMMddHHmmss').format(DateTime.now()),
widget.headers);},
＜＜修正前 end＞＞
＜＜修正後 start＞＞
onPressed: () async {
var _httpClient = http.Client();
final http.Response res = await _httpClient.get(Uri.parse(Consts.myHttpUrl + '/upload/■{PRG_NAME}■/' + ■{PKEY_ITEM_NAME_VALUES_LISTVIEW}■ '/' + element["■{ITEM_NAME}■"] + '?' + DateFormat('yyyyMMddHHmmss').format(DateTime.now()),
headers: widget.headers);
if (res.statusCode != 200) {
String? _str = await CommUtils.openDialogOkComm(context, 'ファイルを読み込めませんでした。') ;
} else {
String _extension = (element["■{ITEM_NAME}■"] as String).toLowerCase().substring((element["■{ITEM_NAME}■"] as String).length - 3);
if (_extension=="txt" || _extension=="pdf") { // Spring側で、txt、pdfしか入力OKにしていないので、これ以外はありえないのだけどチェックする。
Uint8List? _pdfData;
String _data = "";
if (_extension=="txt") {
_data = String.fromCharCodes(res.bodyBytes);
} else {
_pdfData = res.bodyBytes;
}
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
PdfTxtDspComm(extension: _extension,
pdfData: _pdfData,
txtData: _data),
),
);
}
}
},
＜＜修正後 end＞＞
★３．修正対象：Flutter側ひな形。
・hinagata_DetailView_ファイル.txt 修正
＜＜修正前 start＞＞
onPressed: (){CommUtils.launchInWebViewOrVC(context,
Consts.myHttpUrl + '/upload/■{PRG_NAME}■/' + ■{PKEY_ITEM_NAME_VALUES}■ '/' + _■{PRG_NAME}■Form.resDetailMapForm["■{ITEM_NAME}■"] + '?' + DateFormat('yyyyMMddHHmmss').format(DateTime.now()),
widget.headers);},
＜＜修正前 end＞＞
＜＜修正後 start＞＞
onPressed: () async {
var _httpClient = http.Client();
final http.Response res = await _httpClient.get(Uri.parse(Consts.myHttpUrl + '/upload/■{PRG_NAME}■/' + ■{PKEY_ITEM_NAME_VALUES_DETAILVIEW}■ '/' + _■{PRG_NAME}■Form.resDetailMapForm["■{ITEM_NAME}■"] + '?' + DateFormat('yyyyMMddHHmmss').format(DateTime.now())),
headers: widget.headers);
if (res.statusCode != 200) {
String? _str = await CommUtils.openDialogOkComm(context, 'ファイルを読み込めませんでした。') ;
} else {
String _extension = (_■{PRG_NAME}■Form.resDetailMapForm["■{ITEM_NAME}■"] as String).toLowerCase().substring((_■{PRG_NAME}■Form.resDetailMapForm["■{ITEM_NAME}■"] as String).length - 3);
if (_extension=="txt" || _extension=="pdf") { // Spring側で、txt、pdfしか入力OKにしていないので、これ以外はありえないのだけどチェックする。
Uint8List? _pdfData;
String _data = "";
if (_extension=="txt") {
_data = String.fromCharCodes(res.bodyBytes);
} else {
_pdfData = res.bodyBytes;
}
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
PdfTxtDspComm(extension: _extension,
pdfData: _pdfData,
txtData: _data),
),
);
}
}
},
＜＜修正後 end＞＞
★４．PDF及びTXTの内容表示画面新規作成。pdf_txt_dsp_comm.dart 新規作成
＜＜追加 start＞＞
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
/// PdfTxt画面
class PdfTxtDspComm extends StatefulWidget {
final String? extension;
final Uint8List? pdfData;
final String txtData;
const PdfTxtDspComm({Key? key, required this.extension, required this.pdfData,
required this.txtData}) : super(key: key);
@override
State<PdfTxtDspComm> createState() => _PdfTxtDspCommState();
}
class _PdfTxtDspCommState extends State<PdfTxtDspComm> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('内容表示',
overflow: TextOverflow.clip,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
centerTitle:true,
backgroundColor: Colors.green,
),
body: _makeWidget()
);
}
// 表示するWidgets
Widget _makeWidget() {
Widget contentWidget;
if (widget.extension=="pdf") {
contentWidget = (
SizedBox(
height: MediaQuery
.of(context)
.size
.height,
child: PDFView(
pdfData: widget.pdfData,
),
)
);
} else {
contentWidget = (
SingleChildScrollView(
child:Padding(
padding: const EdgeInsets.all(8),
child:Text(widget.txtData,
),
),
)
);
}
return contentWidget;
}
}
＜＜追加 end＞＞
★５．pubspec.yaml
flutter_pdfview: ^1.2.2
★６．webview_flutterのための設定
android/app/build.gradle 修正
buildscript {
ext.kotlin_version = '1.6.10'
repositories {
google()
mavenCentral()
＜＜追加 start＞＞
jcenter()
＜＜追加 end＞＞
}
・・・
allprojects {
repositories {
google()
mavenCentral()
＜＜追加 start＞＞
jcenter()
＜＜追加 end＞＞
}
★７．Android 12 SDK をインストールする。webview_flutterはAndroid 12 SDKが必要らしい。
Android Studio で次の手順を実施することにより、Android 12 SDK をインストールできます。
[Tools] > [SDK Manager] をクリックします。
[SDK Platforms] タブで、[Android 12] を選択します。
[SDK Tools] タブで、[Android SDK Build-Tools 31] を選択します。
[OK] をクリックすると、SDK がインストールされます。
これはやらないほうがいいかもその後、ターミナルで「flutter upgrade」する。■2022/06/15に、勉強した成果：『Flutter_JavaSpringプログラム自動作成◎自動生成ツール』をVectorに載せました。Zenn本も書きました。使ってみての感想や間違いの指定や、こうやったほうがいいとかの情報があればメールください。
・Vector
www.vector.co.jp
・Zenn本(Flutter_JavaSpringプログラム自動作成)
zenn.dev
