今日は、自作アプリのイマイチなUIを向上させる作業をしていきます。
ChatGPTは禁止
今まではChatGPTに指示して
コードを修正してもらってコピペするだけでしたが
勉強の成果を試すため、自力で頑張ってみたいと思います。
お題は、かなり前にテキトーに作ってほったらかしていた
Flutter_UI_Catalogです。
新しい画面を追加する作業をしております。
このように
Widgetごとにカードが表示されているのですが
右上のアイコンが小さいし
上じゃなくて真ん中に表示したい。
ちなみにこのアイコンは、そのWidgetの詳細ページから
Touchモードに移行できることを示すためにつけようと思っているものです。
まず、現在のコード（一部）はこちら
@override
Widget build(BuildContext context) {
if (data == null) {
return const Scaffold(
body: Center(child: CircularProgressIndicator()),
);
}
final keys = data!.keys.toList();
return Scaffold(
appBar: AppBar(title: const Text('Learn')),
body: ListView.builder(
padding: const EdgeInsets.all(12),
itemCount: keys.length,
itemBuilder: (context, index) {
final key = keys[index];
// _meta を一覧から除外
if (key == '_meta') {
return const SizedBox.shrink();
}
final widgetData = data![key];
final category =
(widgetData['category'] ?? '').toString();
// Touch対応
final touch =
widgetData['touch'] ?? false;
// Param数
final paramCount =
(widgetData['params'] as List?)?.length ?? 0;
return Card(
margin: const EdgeInsets.symmetric(vertical: 6),
child: ListTile(
leading: Icon(
_getCategoryIcon(category),
color: Colors.black54,
),
title: Row(
children: [
Expanded(
child: Text(
key,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
// Touchアイコン
if (touch)
const Padding(
padding: EdgeInsets.only(right: 8),
child: Icon(
Icons.touch_app,
size: 20,
color: Colors.orange,
),
),
],
),
// Param数バッジ
subtitle: Padding(
padding: const EdgeInsets.only(top: 6),
child: Row(
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 4,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.7),
borderRadius:
BorderRadius.circular(999),
),
child: Text(
'$paramCount params',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
trailing: const Icon(
Icons.arrow_forward_ios,
size: 16,
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => WidgetDetailPage(
name: key,
data: widgetData,
),
),
);
},
),
);
},
),
);
}
修正箇所を特定する
さて、脱初心者を目指し日々勉強している私ですが
画面の見た目をいじりたかったら
Scaffold()の中を変更すれば良いのかな？
ということは分かってきました。
そんなわけでScaffold()で検索してみます。
なんと２か所該当してしまいました。８行目と15行目です。
どちらを直せばよいのだろう？
上のScaffold()はIf(){}で囲まれているし
中身を見るとCircularProgressIndicator()しか無い。
これって確か、読み込み中を示すぐるぐるを表示させるやつだったはず。
テストでこの画面を何回も起動しており
ここで読み込み中になったことはなかったので、一瞬戸惑いましたが
どうやら本丸はここではなく、その下のScaffold()のようです。
というわけで、2つ目のScaffold()の中を見ていきます。
私が今理解できる範囲で、Widgetと、名前付き引数を
整理してみました。
（本来のツリーの使い方とは違うかもしれません。間違っているところもあるかも）
Scaffold
├ appBar:AppBar
│ └ title:Text()
└ body:ListView.builder()
├ padding:EdgeInsets.all()
├ itemCount:keys.length
└ itemBuilder:(){}
一部省略しましたが
構造としては意外とシンプル。
そして、このitemBuilder:(){}がやっかいですね。
これはおそらく、Widgetを返す関数というやつではないでしょうか。
そしてどうやら、画面を作っている部品の大半はここに入っている模様。
頑張ってさらに中を読み解いてみます。
最初のIfやfinal群は、構造には関係なさそうなので無視。
すると、return Card()を発見！
修正箇所はここですね。
下までスクロールしてみても
この後のコードは全て、このCardの中身として書かれている様子。
このCardが、itemBuilder:(){}が返すWidgetに間違いなさそうです。
では、Cardの中身を見ていきましょう。
これは1つづつ辿っていては大変なので
Icon()を狙い撃ちします。
Icon()は全部で３か所。
child: ListTile(
leading: Icon(
_getCategoryIcon(category),
color: Colors.black54,
),
ここは、categoryを渡しているので
カード左端に表示されている、Widgetのカテゴリーを示すアイコンでしょう。
次はここ。
if (touch)
const Padding(
padding: EdgeInsets.only(right: 8),
child: Icon(
Icons.touch_app,
size: 20,
color: Colors.orange,
),
),
どう考えてもここですね。
念のためもう一つも見てみます。
trailing: const Icon(
Icons.arrow_forward_ios,
size: 16,
),
違いますね。これは右端の>のことでしょう。
こんな感じで、直すべき場所は絞れました。
あとはどう直すか。
サイズは簡単に直せそうだけど、上下真ん中に配置はどうするのかな。
調べて、考えて、やってみる。
普段なら即ChatGPTに聞いてコピペですが
今日は頑張って自力で調べてみます。
どうにかFlutterDocsのLayout widgetsのページにたどり着きました。
この中だと、Centerというのを使えば良さそう。
しかし説明を見てもさっぱりなので（英語は苦手です）
いろいろ実験してみました。
まずはconst Padding(
を、const Center(
に変更してみます。
すると、その下のpaddingのところがエラーになります。
FlutterDocsのCenterのページを見ると
Propertiesの中にpaddingというのはありません。
だからエラーになったのでしょう。
思い切ってこの行は削除してみます。
そしてRun。
なぜか全然変化無し。
そこでアイコンサイズを40に変えてみます。
すると
どうやら、このアイコンの下に見えない壁がある模様。
埒が明かないので元に戻して仕切り直しです。
もう一度コードを見直してみると
まずListTileがあって、その中に
- title:
- subtitle:
があって、今いじっているIconは
title:の中に、Row()で横並びに入っているみたいです。
ListTileのドキュメントを見ると
- leading:
- title:
- subtitle:
- trailing:
このあたりの引数で、表示位置が決まっているみたいです。
こんな感じですね。
titleやsubtitleの入っているブロックを
まとめて分割する方法は思いつきません。
では、trailingに
Row()でIcon()入れたら良いのでは？
こうしてみました。
trailing: Row(
children: [
if (touch)
const Padding(
padding: EdgeInsets.only(right: 8),
child: Icon(
Icons.touch_app,
size: 20,
color: Colors.orange,
),
),
const Icon(
Icons.arrow_forward_ios,
size: 16,
),
],
),
結果、
クラッシュしました
どうやらここまでのようです。
諦めてChatGPTに修正を頼みます。
問題点は2か所
① Expanded
title: Expanded(
child: Text(
key,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Expanded は
- Row
- Column
- Flex
の子としてしか使えません！
② trailing の Row
trailing: Row(
Row はデフォルトで「できるだけ横幅を広げよう」とします。
でも trailing は
「最小サイズで表示して」
という場所。
なので衝突します。
こうすればOK。
trailing: Row(
mainAxisSize: MainAxisSize.min,
無事、修正できました。
ちょっと勉強しただけで
分かったつもりになって背伸びしたら
あっさり撃沈しました。
まだまだ学ばなければならないことは多いみたいです。
それでも、直すべき箇所は合ってたみたいだから
前よりは成長しているはず。
懲りずにまた挑戦してみたいと思います。