🏄

Flutter & ChatGPT モバイルアプリ開発(4)

2024/02/18に公開

Android

開発再開

カテゴリ名のセルの高さを広げてください。
childAspectRatioで縦横比を調節するのではなく、セルの高さを直接指定する方法はありませんか？

どうやらGridViewではアスペクト比を指定できるのみで高さを直接指定することはできないようです。これを行うにはListViewで作り直さないといけないらしく、かなり大掛かりな作業になってしまうため断念しました。

カテゴリ名を左寄せにしてください。
セルの高さの変更は不要です。単純に左寄せにするだけの修正を行ってください。

--- a/lib/main.dart
+++ b/lib/main.dart
@@ -95,7 +95,10 @@ class JsonFetchPageState extends State<JsonFetchPage> {
           border: determineBorder(index, Common.categoryListColumn),
         ),
         alignment: Alignment.center,
-        child: Text(_categories[index].categoryName),
+        child: Text(
+          _categories[index].categoryName,
+          textAlign: TextAlign.left, // テキストを左寄せにする
+        ),
       ),
     );
   }

カテゴリ一覧画面でカテゴリ名を左寄せにしたら、板一覧画面の板名も左寄せになりました。気になるので聞いてみましょう。

カテゴリ一覧画面でカテゴリ名を左寄せにしたら、板一覧画面の板名も左寄せになりました。なぜでしょうか？
main.dartでのTextAlign.leftの指定は他のウィジェットに影響を及ぼすか検証してください。

いろいろと説明はあったものの、現在のコードには当てはまらず原因不明のままです。念のためと思ってリビルドして再実行してみたところ、左寄せにはならずセンタリングされています。

ホットリードでは左寄せになっていたものの、リビルドして再実行すると中央に表示されてしまいました。カテゴリ名を左寄せにする方法はありますか？

なるほど。すぐ親のContainerウィジェットのalignment: Alignment.centerが効いていてTextウィジェットのtextAlign: TextAlign.leftは無効だそうです。

このあたりがきちんとウィジェットの勉強をせずにお任せで作っている限界なのでしょう。Textウィジェットの親としてAlignウィジェットを置いてalignment: Alignment.centerLeftを指定するそうです。

ちなみにその中のTextウィジェットでtextAlign: TextAlign.leftを指定している意味はあるのかとコメントアウトしてみたところ、なくても左寄せになるので意味はなさそうです。

同様に板名を左寄せしてください。

ここまでのコードです。

続きはこちら。

React Native版はこちら。

開発再開

Discussion