【Flutter】テキストを中央寄せしたり左寄せしたいです

Question

前提

中央寄せとテキストと左寄せのテキストを作成しています。

実現したいこと

テキストを中央寄せにすることはできたのですが、左寄せのテキストが実装できません。
どなたかアドバイスいただけないでしょうか？

該当のソースコード

import 'package:flutter/material.dart';

class TermsOfUse extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double deviceHeight = MediaQuery.of(context).size.height; //デバイスの高さ
    final double devicewidth = MediaQuery.of(context).size.width; //デバイスの幅
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.black),
        leadingWidth: devicewidth * 0.2,
        backgroundColor: Colors.white,
        elevation: 0.0,
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              child: Text(
                '利用規約',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 20.0,
                ),
              ),
            ),
            SizedBox(
              height: deviceHeight * 0.02,
            ),
            Container(
              width: double.infinity,
              child: Text(
                '　この利用規約（以下，「本規約」といいます。）は，＿＿＿＿＿（以下，「当社」といいます。）がこのウェブサイト上で提供するサービス（以下，「本サービス」といいます。）の利用条件を定めるものです。登録ユーザーの皆さま（以下，「ユーザー」といいます。）には，本規約に従って，本サービスをご利用いただきます。',
                style: TextStyle(fontSize: 10.0),
              ),
            ),
            SizedBox(
              height: deviceHeight * 0.05,
            ),
            Text(
              '第1条（適用）',
              textAlign: TextAlign.left,
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0),
            ),
          ],
        ),
      ),
    );
  }
}

試したこと

・TextウィジェットをContainaerで包む
・Flutter Clean

補足情報（FW/ツールのバージョンなど）[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-arm, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)

Answer 1

Columnの子供のデフォルト配置・幅の決定方法がcenterになっているからだと思います。
以下の様にすることで、思ったような位置になるのでは。

        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,

これは、あくまでTextの配置位置をColumnのstart側(左)とするだけでtextAlign: TextAlign.left,の指定に従っているわけではないです。
Columnの子要素の幅を親の幅に合わせ、その幅の中でテキストの位置をtextAlign: TextAlign.XXX,で指定することができます。

こういった凝った文章を表示するにはRitchTextを使うのが一般的だと思うし、もっと楽をしたいのであればパッケージ等を探索し、htmlやmdなどのテキストを整形表示可能なパッケージを使用するのを使うのが一番いいと思う。

例えば https://pub.dev/packages/flutter_markdown なんてどうでしょうか。
テキストのセンタリングはひと手間必要ですが、文章をmarkdownなテキストファイルとして保存しておき、その表示にこのパッケージを使用する感じにすれば、いろいろな手間も減ると思うのですが。

Comments

[bbiiq]

回答ありがとうございます。
詳しくありがとうございます。勉強になります。

Answer 2

こういう場での回答としてどうなのかよくわかりませんが、ColumnをListViewにしたら左寄せになりました。

というのもColumnだとコンテンツが画面内に収まらないとオーバーフローのエラーになってしまいます。
ページの性質的に入りきらないような気がするので結局ListViewなりSingleChildScrollViewなりを使うことになるような気がします。

Comments

[bbiiq]

回答ありがとうございます。
そういう手もあるんですね！