Zenn
🐈

Expandedで分割したとき、ウィジェットの大きさに応じてテキストのサイズを変える方法

2023/01/06に公開
Flutter
widget
ウィジェット
動的
tech

結論

親ウィジェットをIntrinsicWidthで包み、動的に大きさを変えたいウィジェットをFittedBoxで包む。

RowやColumnを使っている場合はcrossAxisAlignment: CrossAxisAlignment.stretch,を入れてウィジェットの大きさを変更しておくと便利です。

具体例

今回は横幅に合わせて横幅いっぱいに表示できるようにしました。

    return Scaffold(
      body: Container(
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: IntrinsicWidth(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      SizedBox(
                        width: 10,
                      ),
                      FittedBox(
                        fit: BoxFit.fitWidth,
                        child: Text(
                          _localeDate,
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      FittedBox(
                        fit: BoxFit.fitWidth,
                        child: Text(
                          _time,
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(
              width: 25,
            ),
            Expanded(
                flex: 2,
                child: Image(fit: BoxFit.cover, image: NetworkImage(url)))
          ],
        ),
      ),
    );

応用

FittedBoxのfit: BoxFit.fitWidth,の部分を変更したら、縦方向などにも変更できます。

おすすめ

Flutterでアプリ開発を始める上での個人的なオススメをまとめています。
書籍はkindle unlimitedで新しいものを無料で読むのが良いと思います。

オススメ書籍

これから始める場合、flutter 1.x の時に書かれた本を読むのは辞めておいた方がいいです。
理由は、flutter 2.x　以降、null-safetyという仕様が加わり、書き方がガラッと変わりました。
​
僕は2.xがリリースされたあたりでFlutterを初めて、情報がアテにならずかなり苦戦しました。
​

これから始める方向け　【kindle unlimitedなら無料】

スマホで動くアプリを作ろう！ゼロから始めるFlutter実践入門編 ①: シンプルなアプリを作ってみよう
https://amzn.to/3yxutNM
​
初心者による初心者のためのFlutter詳解
https://amzn.to/39YcpSK
​

脱初心者向け(課金の実装など、具体的な実装方法や技術が書いてあります)

現場で使える Flutter開発入門
https://amzn.to/3kUXuLv

Discussion