【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

【Flutter】横幅いっぱいに表示する方法から横幅を割合表示する方法まで解説!

【Flutter】横幅いっぱいに表示する方法から横幅を割合表示する方法まで解説!
いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • Flutterでウィジェットを画面いっぱいに広げる方法
  • ウィジェットの横幅を割合で指定する方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

横幅いっぱいに表示する方法

概要

Flutterでコンテンツを画面いっぱいに表示するには、Expanded ウィジェットや Container ウィジェットのプロパティを適切に設定する必要があります。

サンプルコード

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: Container(
          width: double.infinity, // 画面の横幅いっぱいに広がるように設定
          color: Colors.blue, // コンテナの背景色を設定
          child: Text(
            'こんにちは、Flutter!',
            textAlign: TextAlign.center, // テキストを中央揃えに設定
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 16行目: width: double.infinityを使用して、Containerの幅を画面いっぱいに広げています。
  • 17行目: color: Colors.blueを指定することで、コンテナの背景色を青に設定しています。
  • 20行目: TextウィジェットのtextAlignプロパティをTextAlign.centerに設定し、テキストを中央揃えにしています。

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】ウィジェットを横幅いっぱいに表示する方法

Containerを角丸にする方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

横幅を割合で表示する方法

概要

横幅を割合で指定するには、FractionallySizedBoxウィジェットを使用します。これにより、親ウィジェットに対する子ウィジェットの幅の割合を指定できます。

サンプルコード

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: FractionallySizedBox(
            widthFactor: 0.8, // 親の幅の80%の幅で表示
            child: Container(
              color: Colors.green, // コンテナの背景色を設定
              child: Text(
                'こんにちは、Flutter!',
                textAlign: TextAlign.center, // テキストを中央揃えに設定
              ),
            ),
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 17行目: widthFactor: 0.8を指定して、FractionallySizedBoxの幅を親の80%に設定しています。
  • 19行目: Containercolorプロパティを使用して背景色を緑に設定しています。
  • 22行目: TextウィジェットのtextAlignTextAlign.centerに設定し、テキストを中央揃えにしています。

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】ウィジェットの横幅を割合表示する方法

Containerを透明にする方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか?今回は、横幅いっぱいに表示する方法から横幅を割合表示する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (8件)

コメントする

目次