いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- Flutterでの文字サイズ自動調整の基本的な使い方
FittedBoxウィジェットを使用した具体的な例
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
文字サイズ自動調整(FittedBox)の基本
概要
FittedBoxウィジェット内にTextウィジェットを入れ込むだけで画面幅に合わせて文字サイズが自動調整されるようになります。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('文字サイズ自動調整のデモ')),
body: Center(
child: FittedBox(
child: Text('画面幅に合わせてサイズが自動調整されるテキスト'),
),
),
),
);
}
}サンプルコードの解説
- 1行目: FlutterのMaterial Designライブラリをインポートし、
main関数でアプリケーションを起動します。 - 3行目:
MyAppクラスは、アプリケーションのルートウィジェットを定義します。 - 8-17行目:
MaterialAppウィジェットを使用して、アプリケーションの基本的な構造を設定します。Scaffoldウィジェットでアプリの基本骨格を提供し、中央にFittedBoxウィジェットを配置しています。 - 12-14行目:
FittedBoxウィジェット内でTextウィジェットを使用し、このテキストが画面幅に合わせて自動でサイズ調整されることを示します。
表示確認
いちのそれでは、表示を確認してみましょ〜
まとめ
いかがでしたでしょうか？今回は、文字サイズ自動調整(FittedBox)する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント