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

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

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

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

Dart

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

Q&A

解決済

1回答

2380閲覧

Flutter/Dart: 画面いっぱいにテキストを表示したい

tmsah

総合スコア101

Flutter

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

Dart

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

0グッド

0クリップ

投稿2021/03/07 02:20

Flutter/Dart初心者です。

現在、Flutterチュートリアルを終了し自分の実装を色々と試しているところです。
その中で、テキストウィジェットの内容(数字)を画面いっぱいに表示するアプリを作成したいと考えています。
qiitaの記事を参考に次のように記述しました。

dart

1// (略) // 2 3 4 Widget build(BuildContext context) { 5 final Size size = MediaQuery.of(context).size; 6 7 return Container( 8 width: size.width, 9 height: size.height, 10 decoration: BoxDecoration( 11 border: Border.all( 12 color: Colors.red, 13 width: 5, 14 ), 15 ), 16 child: FittedBox( 17 fit: BoxFit.fitHeight, 18 child: Text( 19 "25", 20 style: TextStyle( 21 fontSize: 5000, 22 ), 23 ), 24 ), 25 ); 26 }

このアプリは画面を横向きにして使用したいと考えているため、BoxFit.fitHeightでコンテナの高さに収まるような文字サイズを設定しています。
実行結果は次のようになります。
screen
この時、数字の表示領域にまだ余裕があるように見えます。
テキストウィジェットにアルファベットも表示される可能性があると考えるとこのサイズで最大なのは理解できる(例えば「g」などが表示されたときのために下に余白がある)のですが、
このアプリでは数字しか表示する予定がないため、画面ギリギリまで大きく表示したいと考えています。
赤枠いっぱいの大きさに文字サイズを設定するにはどうすれば良いでしょうか。
コンテナのサイズ自体を大きくしようと試みましたが、画面サイズ以上には大きくできませんでした。
(height: size.height*2,のように記述しても変化はありませんでした。)

どのように記述すれば上記問題が解決するのでしょうか。
具体的なコード例や、機能実現の別のアイディア等を教えていただきたいです。
よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Transformで大きくする方法はどうでしょうか。

dart

1 child: Transform.scale( 2 alignment: Alignment.center, 3 scale: 1.55, 4 child: FittedBox( 5 fit: BoxFit.fitHeight, 6 child: Text('25'), 7 ), 8 ), 9

https://api.flutter.dev/flutter/widgets/Transform-class.html

投稿2021/04/09 14:03

satokei

総合スコア1217

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tmsah

2021/04/10 03:57

Transformというクラスがあるのですね、存じ上げませんでした。 これなら実装できそうです。 半ば諦めかけていましたが試してみます、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問