フロント側をFlutter（スマホ）Thymeleaf（PC）、バックエンド側SpringBootの自動作成勉強中
08:33
今日から、検索画面をつくろう。
①まず、メニュー画面の「ユーザー情報登録」ボタンの下に「ユーザー情報一覧（更新削除）」ボタンをつくる。
現在：
・home.dart（flutter）
class Home extends StatefulWidget { ・・・ class _HomeState extends State<Home> { ・・・ Widget build(BuildContext context) { ・・・ body:ListView( children: <Widget>[ // ログアウト失敗時のエラーメッセージ Container( padding: const EdgeInsets.fromLTRB(20.0, 10, 20.0, 5.0), child:Text(_errorSuccessMsg, textAlign: TextAlign.center, overflow: TextOverflow.clip, style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.red),), ), Container( margin: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 5), padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0), child:ElevatedButton( onPressed: () async { try { UserForm _userForm = UserForm.initData(); String _userFormJson = _userForm.toJson("ins", "${widget.cookies['XSRF-TOKEN']}"); widget.headers["content-type"]= "application/json; charset=UTF-8"; widget.headers["X-XSRF-TOKEN"]= "${widget.cookies['XSRF-TOKEN']}"; final url = Uri.parse("http://192.168.1.13:8080/members/admin/user/userA/ins"); http.Response response = await http.post(url,headers: widget.headers, body: _userFormJson); if (response.statusCode != 200) { setState(() { int statusCode = response.statusCode; _errorSuccessMsg = "エラーが発生しました $statusCode"; }); return; } CommUtils.updateCookie(response, widget.cookies, widget.headers); // response.bodyをutf8でdecodeする。 String _resData = utf8.decode(response.body.runes.toList()); if (kDebugMode) { print(_resData); } //ユーザー情報登録 Navigator.of(context).push( MaterialPageRoute( builder: (context) => UserRegister(title: widget.title, username: widget.username, headers: widget.headers, cookies: widget.cookies, resData: _resData), ), ); setState(() { _errorSuccessMsg = ""; }); } on Exception catch (e) { setState(() { _errorSuccessMsg = "エラーが発生しました" + e.toString(); }); } }, child: const Text("ユーザー情報登録"), ), ), ], ),
13:13
修正中：
①Listがちょっと難しかった。
ネットから拾った、
var contentWidgets = List
をコーディングしたらコーディングエラーが出たので、またネットから拾って、
var contentWidgets = List
としたらコーディングOKになった。が、実行時例外発生
”unsupported operation cannot add to a fixed-length list”したので、またネットから拾って、
（固定長のリストなのでaddできないよって言ってるらしい）
var contentWidgets = List
にした。ら、動いた。
と思ってたら、自分で気づいた（なんと最初のコーディングエラーで左端のヒントマークで以下が出てきた）のだけど、
var contentWidgets =
としても、全然OKで動くじゃないか。・・・・
②ネットから「Flutterで動的にWidgetを作成する時の方法」を見つけて、メニュー表示の共通部分を１つのメソッド「List
14：25
修正後：
・home.dart（flutter）
class Home extends StatefulWidget { ・・・ class _HomeState extends State<Home> { static final Map<String, List<List<String>>> menus = { // メニュー "ユーザー情報管理": [ ["ユーザー情報登録", "http://192.168.1.13:8080/members/admin/user/userA/ins","ins"], ["ユーザー情報一覧（更新削除）", "http://192.168.1.13:8080/members/admin/user/userA/list","list"], ], }; ・・・ Widget build(BuildContext context) { var userMenuWidgets = _makeMenuWidgets("ユーザー情報管理"); ・・・ body:ListView( children: <Widget>[ // ログアウト失敗時のエラーメッセージ Container( padding: const EdgeInsets.fromLTRB(20.0, 10, 20.0, 5.0), child:Text(_errorSuccessMsg, textAlign: TextAlign.center, overflow: TextOverflow.clip, style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.red),), ), // ユーザー情報登録 Container( margin: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 5), padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0), decoration: CommUtils.commBoxDecoration(), child:Column( children: userMenuWidgets, ), ), ], ), ); } // メニューを表示するWidgets List<Widget> _makeMenuWidgets(String affairsName) { var contentWidgets = List<Widget>.empty(growable: true); //var contentWidgets = <Widget>[]; contentWidgets.add(const SizedBox( height : 10.0, )); contentWidgets.add(Text(affairsName, textAlign: TextAlign.center, overflow: TextOverflow.clip, style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),)); contentWidgets.add(Column( children: menus[affairsName]!.map((e) =>SizedBox( width: 400, //横幅 child:ElevatedButton( onPressed: () async { try { UserForm _userForm = UserForm.initData(); String _userFormJson = _userForm.toJson(e[2], "${widget.cookies['XSRF-TOKEN']}"); widget.headers["content-type"]= "application/json; charset=UTF-8"; widget.headers["X-XSRF-TOKEN"]= "${widget.cookies['XSRF-TOKEN']}"; final url = Uri.parse(e[1]); http.Response response = await http.post(url,headers: widget.headers, body: _userFormJson); if (response.statusCode != 200) { setState(() { int statusCode = response.statusCode; _errorSuccessMsg = "エラーが発生しました $statusCode"; }); return; } CommUtils.updateCookie(response, widget.cookies, widget.headers); // response.bodyをutf8でdecodeする。 String _resData = utf8.decode(response.body.runes.toList()); if (kDebugMode) { print(_resData); } if (e[0] == "ユーザー情報登録") { //情報登録 Navigator.of(context).push( MaterialPageRoute( builder: (context) => UserRegister(title: widget.title, username: widget.username, headers: widget.headers, cookies: widget.cookies, resData: _resData), ), ); } else if (e[0] == "ユーザー情報一覧（更新削除）") { //情報一覧 Navigator.of(context).push( MaterialPageRoute( builder: (context) => UserList(title: widget.title, username: widget.username, headers: widget.headers, cookies: widget.cookies, resData: _resData), ), ); } setState(() { _errorSuccessMsg = ""; }); } on Exception catch (ex) { setState(() { _errorSuccessMsg = "エラーが発生しました" + ex.toString(); }); } }, child: Text(e[0]), ), ),).toList())); return contentWidgets; }
■2022/06/15に、Flutter_JavaSpringプログラム自動作成◎自動生成ツールをVectorに載せました。Zenn本も書きました。使ってみての感想や間違いの指定や、こうやったほうがいいとかの情報があればメールください。
・Vector
www.vector.co.jp
・Zenn本(Flutter_JavaSpringプログラム自動作成)
zenn.dev
