[Flutter] Column, Row, Expanded 위젯

Column, Row, Expanded 위젯

 

Cmd+P => 파라미터 인자 값 어떤것 넣을 수 있는지 확인가능

Alt+enter ,Option+enter => 코멘트 뜨고 영역 관련된 부분 삭제할때 유용하다

 

Column 같은 경우 별도의 축이 있어서 어디에 정렬할지에 대한 내용을 정할 수있다

Column 세로로 정렬하는 위젯

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('메인화면'),),
      body: Center(
        //child: Text('메인화면입니다.'),
        child: Column( //세로로 정렬하는 위젯 Column
          mainAxisAlignment: MainAxisAlignment.center, //중앙배치
          children: [
          Text('반갑습니다.'),
          Text('반갑습니다2'),
          Text('반갑습니다3'),
        ],),
      ),
    );

 

 

Row 의 경우에는 가로로 위젯을 쌓아서 정렬 해주는 기능

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('메인화면'),
      ),
      // body: Center(
      //   //child: Text('메인화면입니다.'),
      //   child: Column(
      //     mainAxisAlignment: MainAxisAlignment.center, //중앙배치
      //     crossAxisAlignment: CrossAxisAlignment.start,
      //     children: [
      //     Text('반갑습니다.'),
      //     Text('반갑습니다2'),
      //     Text('반갑습니다3'),
      //   ],),
      // ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center, //중앙배치
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('반갑습니다.'),
          Text('반갑습니다2'),
          Text('반갑습니다3'),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('반갑습니다1'),
              Text('반갑습니다2'),
              Text('반갑습니다3'),
            ],
          )
        ],
      ),
    );
  }
}

 

Expanded 위젯 : 간격을 일정 비율로 배치하고 싶을때 사용할 수 있다. 1:1:1 2:1:1 등의 비율

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('메인화면'),
    ),
    // body: Center(
    //   //child: Text('메인화면입니다.'),
    //   child: Column(
    //     mainAxisAlignment: MainAxisAlignment.center, //중앙배치
    //     crossAxisAlignment: CrossAxisAlignment.start,
    //     children: [
    //     Text('반갑습니다.'),
    //     Text('반갑습니다2'),
    //     Text('반갑습니다3'),
    //   ],),
    // ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center, //중앙배치
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('반갑습니다.'),
        Text('반갑습니다2'),
        Text('반갑습니다3'),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('반갑습니다1'),
            Text('반갑습니다2'),
            Text('반갑습니다3'),
          ],
        ),
        Row(
          children: [
            //일정한 가격을 두고 비율로 정렬된다.
            Expanded(flex:2,child: Text('홍1')),
            Expanded(child: Text('홍2')),
            Expanded(child: Text('홍3')),
          ],
        )
      ],
    ),
  );
}

 

child 위젯 한개만 입력가능 / children 위젯 여러개 배열형태로 입려가능한 상태