質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

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

bbiiq
bbiiq

総合スコア33

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

2回答

0グッド

0クリップ

294閲覧

投稿2022/11/19 11:51

編集2022/11/19 11:53

前提

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

実現したいこと

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

該当のソースコード

Dart

1import 'package:flutter/material.dart'; 2 3class TermsOfUse extends StatelessWidget { 4 5 Widget build(BuildContext context) { 6 final double deviceHeight = MediaQuery.of(context).size.height; //デバイスの高さ 7 final double devicewidth = MediaQuery.of(context).size.width; //デバイスの幅 8 return Scaffold( 9 backgroundColor: Colors.white, 10 appBar: AppBar( 11 iconTheme: IconThemeData(color: Colors.black), 12 leadingWidth: devicewidth * 0.2, 13 backgroundColor: Colors.white, 14 elevation: 0.0, 15 ), 16 body: Container( 17 child: Column( 18 children: <Widget>[ 19 Container( 20 width: double.infinity, 21 child: Text( 22 '利用規約', 23 textAlign: TextAlign.center, 24 style: TextStyle( 25 fontWeight: FontWeight.bold, 26 fontSize: 20.0, 27 ), 28 ), 29 ), 30 SizedBox( 31 height: deviceHeight * 0.02, 32 ), 33 Container( 34 width: double.infinity, 35 child: Text( 36 ' この利用規約(以下,「本規約」といいます。)は,_____(以下,「当社」といいます。)がこのウェブサイト上で提供するサービス(以下,「本サービス」といいます。)の利用条件を定めるものです。登録ユーザーの皆さま(以下,「ユーザー」といいます。)には,本規約に従って,本サービスをご利用いただきます。', 37 style: TextStyle(fontSize: 10.0), 38 ), 39 ), 40 SizedBox( 41 height: deviceHeight * 0.05, 42 ), 43 Text( 44 '第1条(適用)', 45 textAlign: TextAlign.left, 46 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0), 47 ), 48 ], 49 ), 50 ), 51 ); 52 } 53} 54

試したこと

・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)

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

ベストアンサー

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

dart

1 child: Column( 2 crossAxisAlignment: CrossAxisAlignment.stretch,

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

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

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

投稿2022/11/20 02:08

編集2022/11/21 06:04
ta.fu

総合スコア1268

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

bbiiq

2022/11/23 09:16

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

0

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

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

投稿2022/11/19 14:44

moriman

総合スコア516

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

bbiiq

2022/11/23 09:17

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。