내가 보려고 쓰는 Flutter 일기

출처1 : https://api.flutter.dev/flutter/widgets/SizedBox-class.html
출처2 : https://api.flutter.dev/flutter/material/OutlinedButton-class.html
출처3 : https://api.flutter.dev/flutter/material/TextButton-class.html

SizedBox

오늘 배워본 위젯은 SizedBox

평소 플러터 관련 유튜브 영상을 시청하면, SizedBox는 대부분 위젯 간 거리를 띄울 떄 쓴다. 가로나 세로로 너무 딱붙어있어서 띄워놓고 싶을 때 쓰는 것이다.

그런데 공식페이지에서 설명하는 SizedBox의 주요 기능은 자식 요소가 특정한 너비나 높이를 가지도록 강제하는것이었다.

그럼 버튼을 다 때려넣어 보자

Container, Card, 3가지 Button 위젯을 너비, 높이가 같은 SizedBox로 감싸서 돌려보았다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: SizedBoxWidget(),
    );
  }
}

class SizedBoxWidget extends StatelessWidget {
  const SizedBoxWidget();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test SizedBox"),
      ),
      body: Container(
        color: Colors.red[100],
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: 200,
                height: 100,
                child: Container(
                  color: Colors.black.withOpacity(0.4),
                  child: Center(
                    child: Text(
                      "Container",
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                width: 200,
                height: 100,
                child: Card(
                  child: Center(
                    child: Text(
                      'Card',
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                width: 200,
                height: 100,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    textStyle: const TextStyle(fontSize: 20),
                  ),
                  onPressed: () {},
                  child: const Text('ElevatedButton'),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox.expand(
              //   width: 200,
              //   height: 100,
                child: TextButton(
                  style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 20),
                      backgroundColor: Color(0xFF42A5F5),
                    primary: Colors.white
                  ),
                  onPressed: () {},
                  child: const Text('TextButton'),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                width: 200,
                height: 100,
                child: OutlinedButton(
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(Colors.white),
                    backgroundColor: MaterialStateProperty.all(Colors.purpleAccent.withOpacity(0.3))
                  ),
                  onPressed: () {},
                  child: const Text(
                    'OutlinedButton',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

버튼별로 스타일 설정이 뭐 이렇게 다르담?
우선 실행 결과는 요렇다

요상하게 Card위젯만 좀 작게 나왔는데, SizedBox의 너비와 높이는 모두 동일하게 준 상태이다.

너비와 높이는 어디까지 확장할 수 있을까

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: SizedBoxWidget(),
    );
  }
}

class SizedBoxWidget extends StatelessWidget {
  const SizedBoxWidget();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test SizedBox"),
      ),
      body: Container(
        color: Colors.red[100],
        child: Center(
          child: SizedBox(
            width: 200,
            height: 100,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                textStyle: const TextStyle(fontSize: 20),
              ),
              onPressed: () {},
              child: const Text('ElevatedButton'),
            ),
          ),
        ),
      ),
    );
  }
}

여기서 width, height를 화면에 꽉 차도록 할 수 있다. double.infinity 값을 주는 것이다. 또는 width, height 속성을 빼고 SizedBox.expand로 바꾸는 방법도 있다.

width : 200 , height : 100	width : double.infinity, height : 100	width, height : double.infinity 또는 SizedBox.expand

근데 난 아마 위젯 간격 띄워주는 용도로 쓸 듯^^
오늘의 일기는 여기까지!