[Flutter] SizedBox Class

---

SizedBox Class

 

 

예제 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SizedBox',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SizedBox'),
          centerTitle: true,
        ),
        body: SizedBox(
          width: 300,
          height: 300,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.redAccent,
            ),
          ),
        ),
      ),
    );
  }
}

 

SizedBox는 자식 위젯을 한 개 포함할 수 있습니다.

그리고 이름대로 자신의 크기도 지정할 수 있는데요

 

만약, 크기를 지정하지 않으면 자식 위젯의 크기에 맞춰지고,

자식 위젯이 없다면 크기는 0으로 고정됩니다.

 

위 예제 코드는 너비 300, 높이 300인 SizedBox를 보여드리기 위해

해당 영역을 빨간색으로 표시해보았습니다.

 

 

 

 

child로 Text, Button, Column 등 다양한 위젯들을 넣어보시면 좋을 것 같습니다.

 

 

---

번외

(많은 플러터 개발자들의 SizedBox 사용법)

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SizedBox',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SizedBox'),
          centerTitle: true,
        ),
        body: Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.redAccent,
            ),
            SizedBox(height: 50),
            Container(
              width: 100,
              height: 100,
              color: Colors.greenAccent,
            )
          ],
        ),
      ),
    );
  }
}

 

 

 

SizedBox의 height와 width 값만큼 위젯 사이의 공간을 만들기 위해 사용합니다 :)

 

 

 

더 자세히 알고 싶으시다면?

https://api.flutter.dev/flutter/widgets/SizedBox-class.html

SizedBox class - widgets library - Dart API