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

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, // テキストを中央揃えに設定
          ),
        ),
      ),
    );
  }
}

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, // テキストを中央揃えに設定
              ),
            ),
          ),
        ),
      ),
    );
  }
}