1. Widget을 상하-좌우 배치하기

상하로 배치하기

• Placeholder() → 해당 위치에 어떤 위젯이 올거니 사이즈만큼 차지하는 위젯

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

  @override
  Widget build(BuildContext context) {
    return Placeholder(
      child: Text('Place Holder'),
    );
  }
}

• Widget을 위아래로 쌓을때는 Column이라는 위젯을 사용함

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 100,
          height: 80,
          color: Colors.green,
          child: Text('Container 1'),
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.red,
          child: Text('Container 2'),
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.yellow,
          child: Text('Container 3'),
        )
      ]
    );
  }
}

좌우로 배치하기

• Row라는 위젯을 사용하면 좌우로 배치를 할 수 있음.

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

  @override
  Widget build(BuildContext context) {
    return  Container(
      height: double.infinity,
      child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 80,
              color: Colors.green,
              child: Text('Container 1'),
            ),
            Container(
              width: 100,
              height: 80,
              color: Colors.red,
              child: Text('Container 2'),
            ),
            Container(
              width: 100,
              height: 80,
              color: Colors.yellow,
              child: Text('Container 3'),
            )
          ]
      ),
    );
  }
}

상하 좌우로 배치하기

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

  @override
  Widget build(BuildContext context) {
    return  Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 100,
                  height: 80,
                  color: Colors.green,
                  child: Text('Container 1'),
                ),
                Container(
                  width: 100,
                  height: 80,
                  color: Colors.red,
                  child: Text('Container 2'),
                ),
                Container(
                  width: 100,
                  height: 80,
                  color: Colors.yellow,
                  child: Text('Container 3'),
                )
              ]
          ),
        Container(
          width: 300,
          height: 120,
          color: Colors.grey,
          child: Text('Container 4'),
        )
      ],
    );
  }
}

영역이 넘쳤을때 스크롤하기

• SingleChildScrollView 위젯을 사용하면 스크롤이 가능하다

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
      
        ],
      ),
    );
  }
}

• SingleChildScrollView 위젯을 통해 스크롤을 하지만 기본적으로 vertical이기 때문에 scrollDirection: Axis.horizontal, 를 사용해주면 horizontal로 가능해진다.

2. Widget을 비율로 배치하기

• 반응형을 위해서 Flexible 을 사용하게 된다. Flexible 을 사용하게 되면 차지할 수 있는 영역의 최대한도에 맞춰준다.
• flex 라는 옵션을 사용해주면 비율로 조정할 수 있다.

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(
          flex: 1,
          child: Container(
            color: Colors.red,
          ),
        ),
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.blue,
          ),
        ),
        Flexible(
          flex: 3,
          child: Container(
            color: Colors.green,
          ),
        ),
        Flexible(
          flex: 4,
          child: Container(
            color: Colors.yellow,
          ),
        )

      ],
    );
  }
}