幅と高さ

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 16/32。

Containerにwidth:とheight:を指定すると、子ウィジェットに合わせたサイズではなくなります。サイズの単位はピクセルです。

Container(
  width: 300,
  height: 50,
  color: Colors.orange,
  child: Text('Banner'),
)

子ウィジェットはボックスの左上隅に配置されます。Flutterでは、どのスマートフォンでもピクセルの大きさは同じなので、幅が300のボックスは小さなスマートフォンでも大きなスマートフォンでもほぼ同じ大きさに見えます。

チャレンジ

簡単

青いボックスの幅を200ピクセル、高さを100ピクセルにしてください。

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.lightBlue,
            child: Text('Box'),
          ),
        ),
      ),
    );
  }
}