[Flutter] SizedBox, Spacer

SizedBox

자식의 크기를 지정할 수 있다

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: [
          BlueBox(),
          SizedBox(
            width: 200,
            height: 150,
            child: BlueBox(),
          ),
          BlueBox()
        ],
      ),
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

 

 

빈 여유 공간을 만드는데 유용하다고 한다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: [
          BlueBox(),
          SizedBox(
            width: 200,
          ),
          BlueBox()
        ],
      ),
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

 

 

---

Spacer

spacer는 flex 속성을 사용하여 공간을 생성하고, SizedBox는 특정 픽셀을 지정하여 공간을 생성할 수 있다

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: [
          BlueBox(),
          Spacer(
            flex: 1,
          ),
          BlueBox()
        ],
      ),
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}