Width and Height

Part of the Your First App section of Coddy's Flutter journey. Lesson 16 of 32.

Give a Container a width: and a height: and it stops hugging its child. Sizes are in pixels:

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

The child sits in the top left corner of the box. Flutter's pixels are the same size on every phone, so a box 300 wide looks about the same on a small phone and a big one.

Challenge

Easy

Make the blue box 200 pixels wide and 100 pixels high.

Try it yourself

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'),
          ),
        ),
      ),
    );
  }
}