flutter & dart - Divider 와 Spacer

Overview.

Divider 와 Spacer 에 대해 알아보자

1. Spacer
2. Divider

 

0. 문서

https://api.flutter.dev/flutter/material/Divider-class.html

Divider class - material library - Dart API

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

Spacer class - widgets library - Dart API

 

1. Divider

Divider 는 단순하다 그냥 선을 긋는 위젯이다.

네..

 

height : 아래 위 높이 지정

color : 선의 색 선정

thickness : 굵기 설정

indent : 왼쪽에 공간이 생김

endIndent : 오른쪽에 공간이 생김

              Divider(
                height: 30,
                color: Colors.black,
                thickness: 5,
                indent: 10, // 왼쪽에 공간이 생김
                endIndent: 10, // 오른쪽에 공간이 생김
              ),

 

2. Spacer 

Spacer 또한 단순한데 SizedBox 에 Expanded 를 준 위젯이라고 보면 된다.

따라서 어떠한 위젯 위에 Spacer 를 두면 위젯 위의 남은 공간을 다 차지해버리고

어떤 위젯 아래에 Spacer 를 두면 위젯의 아래의 남은 공간을 다 차지하는 그런 녀석이다

 

코드로 보자

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(
      home: _Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          // 가운데 정렬을 위한 width infinity
          width: double.infinity,
          child: Column(
            // 가운데 정렬
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Spacer(), // SizedBox 에 Expanded를 준 위젯이다.
              Container(
                color: Colors.blue,
                height: 100,
                width: 300,
              ),
              Divider(
                height: 30,
                color: Colors.black,
                thickness: 5,
                indent: 10, // 왼쪽에 공간이 생김
                endIndent: 10, // 오른쪽에 공간이 생김
              ),
              Container(
                color: Colors.red,
                height: 100,
                width: 300,
              ),
              Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}