Flutter - Layout a widget & Row, Column 정렬하기

1.layout widget을 선택한다.
2.위젯을 생성한다.

Text('hello world'),
Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
),
Icon(
  Icons.start,
  color: Colors.red[500],
),

3.위젯에 layout위젯을 추가한다.
모든 레이아웃은 다음중 하나가 있다.
-child: 하나의 자식을 받는 것(Container, Center)
-children: 위젯 목록을 받는 것(Row, Column, ListView, Stack)

Center(
  child: Text('hello world'),
),

4.페이지에 layout 위젯 추가하기
Flutter 앱 자체는 위젯이고 대부분의 위젯에는 build 메서드가 존재한다.
build 메서드에 위젯을 인스턴스화 하고 반환하면 위젯이 보여지게 된다.

Material apps
Material앱의 경우 Scaffold위젯을 사용할 수 있다.
기본 배너, 배경 색을 제공하며 Drawers, Snack bars, Bottom Sheet을 추가할 수 있는 API제공
그런 다음 home의 body속성에 Center 위젯을 직접 전달한다.

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter layout demo'),
        ),
        body: Center(
          child: Text('hello world'),
        )
      )
    )
  }
}

Non-Material apps
Material앱이 아닌 경우 build메서드에 Center을 바로 배치한다.

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Container(
    ...
    );
  }
}

기본적으로 non-Material앱에는 AppBar, 제목, 배경색이 포함되지 않는다.
Non-Material앱에서는 이러한 기능을 사용하려면 직접 작성해야한다.


Row위젯 : 수평배치
Column위젯 : 수직배치
-Row와 Column은 여러 위젯을 자식으로 갖는다.
-자식 위젯은 Row, Column 혹은 복잡한 위젯을 가질 수 있다.
-Row와 Column이 정렬 방법을 지정할 수 있다.
-하위 위젯의 크기를 늘리거나 조절할 수 있다.
-하위 위젯이 행 또는 열의 사용 가능한 공간을 사용하는 방법을 지정할 수 있다.

 

Flutter - Row, Column 정렬하기

https://beomseok95.tistory.com/310

 

참조 :

https://velog.io/@ashe/Layouts-in-Flutter