「Text」を「Container」の枠内で横幅いっぱいに表示する方法を紹介します。
親Widgetの横幅いっぱいに子Widgetを広げるには「FittedBox」を使用します。
目次
親Widgetの横幅いっぱいに子Widgetを広げる方法
「Text」を親Widgetの枠内で横幅いっぱいに表示するには「Text」を「FittedBox」でラップします。
「FittedBox」の「fit」プロパティのデフォルト値は「BoxFit.contain」になっており、子Widgetが親Widgetの領域内ピッタリ収まるようにスケールを調整します。
Container(
width: 200,
height: 100,
color: Colors.blue,
child: FittedBox(
child: Text(
'Hello World',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: Center(
child: Container(
width: 200,
height: 100,
color: Colors.blue,
child: FittedBox(
child: Text(
'Hello World',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
),
),
);
}
}以上です。
合わせて読みたい
あわせて読みたい
【Flutter】Padding｜余白を外側に作る
こんにちは、フラメルです。 今回はPaddingを使用して余白を作る方法を紹介します。 余白を外側に作る方法 Paddingあり Paddingなし ウィジェットの外側に余白を作るに…
あわせて読みたい
【Flutter】EdgeInsets｜上下左右の余白を調整
こんにちは、フラメルです。 今回はPaddingなど余白調整をする際に使用されるEdgeInsetsの使い方について紹介します。 EdgeInsets.all｜全サイドに同幅の余白を作る Edg…