[flutter]Container, Column, Align 속성

각 공간을 차지하는 Container, Column, Align, ListView 이 갖고 있는 특징과 원하는 화면 구성을 하기 위한 설정을 알아본다.

HootJem

Oct 01, 2024

Contents

Align

각 공간을 차지하는

Container, Column, Align, ListView 이 갖고 있는 특징과 원하는 화면 구성을 하기 위한 설정을 알아본다.


body: ListView(
        children: [
          Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
            child: Container(
              
            ),
          ),
        ],
      ),


 body: ListView(
        children: [
          Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.red,
            ),
          ),
        ],
      ),


   body: Column(
        children: [
          Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.red,
            ),
          ),
        ],
      ),

ListView 는 부모의 크기만큼 늘어난다. (리스트뷰는 가로→ 부모의 크기, 세로→무한히 펼쳐진다)

Column은 부모 상관없이 자식의 크기만큼 잡힌다. (세로→ 자식의 넓이만큼, 세로→ 끝까지 펼쳐진다)

Column

컬럼의 기본정렬은 센터이다. 따라서 왼쪽에 두려면 스타트로 스타일을 바꿔야한다.


 body: Column(
        children: [
          Text('안녕'),
        ],
      ),


 body: Column(
        children: [
          Text('안녕'),
          Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
          ),
        ],
      ),


 body: Column(
        children: [
          Row(),
          Text('안녕'),
          Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
          ),
        ],
      ),


  body: Column(
        children: [
          Row(),
          Text('안녕'),
          Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
          ),
          Row(
            children: [
              Text("안녕"),
            ],
          ),
        ],
      ),


  body: Column(
        children: [
          Row(),
          Text('안녕'),
          Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Text("안녕"),
            ],
          ),
        ],
      ),

Align


     Align(
            alignment: Alignment.bottomLeft,
            child: Text("안녕"),
          )

이런 것을 제약조건이라고 하는데 바로 위 부모의 속성에 연관받는다.


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
            constraints: BoxConstraints(
              minWidth: 100,
              minHeight: 100,
              maxWidth: 200,
              maxHeight: 200,
            ),
            child: Container(
              color: Colors.red,
              width: 30,
              height: 30,
              child: Center(child: Text('Child')),
            ),
          ),
        ),
      ),
    );
  }
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
            constraints: BoxConstraints(
              minWidth: 100,
              minHeight: 100,
              maxWidth: 200,
              maxHeight: 200,
            ),
          ),
        ),
      ),
    );
  }
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
            height: 50,//추가
            constraints: BoxConstraints(
              minWidth: 100,
              minHeight: 100,
              maxWidth: 200,
              maxHeight: 200,
            ),
          ),
        ),
      ),
    );
  }
}

기본적으로 maxWidth 가 잡힌다


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
            height: 50,
            width: 50,// 추가
            constraints: BoxConstraints(
              minWidth: 100,
              minHeight: 100,
              maxWidth: 200,
              maxHeight: 200,
            ),
          ),
        ),
      ),
    );
  }
}

double.infinity


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
            height: 50,
            width: 50,// 추가
            constraints: BoxConstraints(
              minWidth: double.infinity,
              minHeight: 100,
              maxWidth: double.infinity,
              maxHeight: 200,
            ),
          ),
        ),
      ),
    );
  }
}

blue 의 컨테이너 크기가 (지금 50인 값)

자식이 없는 컨테이너는 최대한 크기를 크게 만들려 한다.


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

두번째, 자식이 있는 컨테이너는 자식의 크기에 맞춰진다.


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
            child: Text("안녕"),
          ),
        ),
      ),
    );
  }
}

세번째,

부모에 크기가 없을 때는 자식의 크기를 따라간다.

그러나 부모의 크기가 있다면 자식은 부모의 크기를 따라간다.

이부분이 안먹는다

이때 Align 을 사용해야함