フロント側をFlutter（スマホ）Thymeleaf（PC）、バックエンド側SpringBootの自動作成勉強中

10:34
①今日は、画像入力を調べている。

20:48
①画像入力がこんな感じになった。明日は、これをバックエンドSpringBootを使っての画像保存を調査しよう。

カメラをクリック

写真を撮ると、保存とキャンセルボタンが表示される

保存をクリックすると、画像が入力画面に表示される

フォルダをクリック

画像を選択しクリックすると、画像が入力画面に表示される

■プログラム

class _XXXXXXState extends State<XXXXXXAmend> {
・・・
  //--テスト画像選択　start----------------------------
  File? _image;
  final picker = ImagePicker();

  Future getImageFromCamera() async {
    final XFile? pickedFile = await picker.pickImage(source: ImageSource.camera);
    setState(() {
      _image = File(pickedFile!.path);
    });
  }
  Future getImageFromGallery() async {
    final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = File(pickedFile!.path);
    });
  }
  //--テスト画像選択　end----------------------------

  @override
  Widget build(BuildContext context) {
    return Scaffold(
・・・
    //--テスト画像選択　start----------------------------
    contentWidgets.add(
      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: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                margin: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 5),
                padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0),
                child: _image == null
                    ? const Text('画像を選んでください。')
                    : Row(children:[
                        const Text("画像 : ",
                          textAlign: TextAlign.left,
                          overflow: TextOverflow.clip,),
                        Image.file(_image!, fit: BoxFit.cover, width: 80.0, height: 80.0, alignment: Alignment.centerLeft,)
                      ]),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                FloatingActionButton(
                  onPressed: getImageFromCamera,
                  tooltip: 'Pick Image From Camera',
                  child: const Icon(Icons.add_a_photo),
                ),
                FloatingActionButton(
                  onPressed: getImageFromGallery,
                  tooltip: 'Pick Image From Gallery',
                  child: const Icon(Icons.photo_library),
                ),
              ],
            ),
            const SizedBox(
            height : 10.0,
            ),
          ],
        ),
      ),
    );
    //--テスト画像選択　end----------------------------

■2022/06/15に、勉強した成果：『Flutter_JavaSpringプログラム自動作成◎自動生成ツール』をVectorに載せました。Zenn本も書きました。使ってみての感想や間違いの指定や、こうやったほうがいいとかの情報があればメールください。
・Vector
www.vector.co.jp
・Zenn本(Flutter_JavaSpringプログラム自動作成)
zenn.dev