【FlutterFlow】知らないでは済まされないカラムとリストビューの違い：レイアウト絶賛練習中
どうも！前回記事からの続きです。FlutterFlowの公式資料で、レイアウトの練習に取り組んでおります。
前回は、Rowの中に配置する３つのカラムを完成させました！一見複雑そうにも見えますが、設計書にそって作業することで、安心して進められました！
今回は、いよいよ最後のウィジェット、テキストウィジェットを追加して、目標のページを完成させます！
子要素の設定がいらないウィジェットですから、そんなに難しくないでしょう！
加えて、最後にある問題が発生します。これを知らずにこの記事から離脱することはできませんよｗ。最後まで読んでね！
それでは、レッツゴー♪
テキストウィジェットの追加
では、テキストウィジェットを追加しましょう。
キャンバスには、テキストウィジェットが表示されますが、Rowとのスキマが全くなくて息苦しいです。
う～ん、パッディングの設定が必要ですな。
パッディングを設定
ということで、パッディングを設定します。パッディングの設定は、ウィジェットを置いたら早めにやるのでしたね～。
上が16px、左右が12pxです。
キャンバスは、こうなります。きちんとウィジェット間のスキマが確保できました。
とりあえずこれでよし！
テキストが入りきらない？
このテキストウィジェットには、1段落相当の文章が入ることを想定しています。テキストを入れ替えておきます。
ネットから見つけたダミーテキスト（Lorem Ipsum）を表示させることにします。
はい、こうなりました～♪、、、て見切れてますがな…。
テキストの最後までスクロールして読めるかな、、、プレビューしてみます。
あれ、スクロールしませんね。続きが読めないじゃん。
これはいかん。どう調整すればいいのやら。
カラムをListViewに置き換える
どうやら、公式資料によれば、
「カラムは、スクロールに対応していない。」
とのことです。そ、そ、そうだったのか～。一方、スクロールに対応しているのは、ListViewなのだそうです。知らんかった！
かくなる上は、カラムをListViewにおきかえます。
どのウィジェットで置き換えるか、聞いてきます。ListViewを選びます。しれっと、「レイアウトによっては、エラーが起こることがあります」と注意書きがありますね。おっかないな～。
恐る恐るクリックすると、、、特にエラーなくカラムがListViewに置き換わりました。こういうの、いちいち焦るんですよね～。
もう一回プレビューします。
おお！きちんとスクロールしますね！やった！
これ、知らなかったら？「なぜどうして、スクロールしてくれないの～」と嘆くところでした。
カラム ＝ スクロールしない
リストビュー ＝ スクロールする
これはぜひ覚えておきましょう！
これで、目標としていたページは完成しました！
はい、本日は以上です。今回は、テキストウィジェットを追加・設定の上、ページがスクロールするように、カラムをリストビューに置き換えました。意外と大事な情報が得られてよかったです。
次回は、レイアウト練習のシリーズを総まとめしましょう！
この記事が気に入ったらサポートをしてみませんか？