플러터 기본 앱 레이아웃 만드는 법 (Scaffold) 머리가슴배로 나눠주는 Scaffold() 위젯

유용한 MaterialApp() 위젯

 

 

구글이 제공하는 기본 플러터 테마는 크게 2개가 있는데 

 

 

위쪽은 Material Design, 아래쪽은 Cupertino 입니다.

왼쪽 같은 디자인을 사용하고 싶으면 일단 MaterialApp() 이라는 위젯으로 여러분 앱을 감싸면 됩니다.

 

(참고) Material Design 쓰려면 일단 pubspec.yaml 파일에 이런 항목이 켜져있어야합니다.

flutter:
  uses-material-design: true 

 

쿠퍼티노 위젯 맛보기 참고 글 

https://eunjin3786.tistory.com/239

[Flutter] CupertinoTabBar 만들기

 

머리가슴배로 나눠주는 Scaffold() 위젯

 

우리가 쓰는 앱의 디자인을 잘 보면 대부분 상단 중단 하단으로 되어있습니다.

 

 

 

인스타 유튜브 카톡 이런 앱들 보면

거의 다 상단/중단/하단으로 나눠져있습니다. 

이걸 쉽게 구성하고 싶으면 Scaffold() 위젯을 쓰면 됩니다.

그럼 알아서 상중하로 나눠줍니다. 

 

 

 

MaterialApp(
  home: Scaffold(
    appBar: 상단에 넣을 위젯,
    body: 중단에 넣을 위젯,
    bottomNavigationBar: 하단에 넣을 위젯,
  )
); 

Scaffold() 위젯은 appBar, body, bottomNavigationBar 이렇게 3개의 파라미터를 넣으면 상/중/하로 쪼개줍니다.

상단바 하단바는 필수는 아니고 body는 필수입니다. 

이제 상단 중단 하단에 글이든 그림이든 원하는 위젯 넣으시면 앱디자인 끝입니다.

 

 

 

MaterialApp(
  home: Scaffold(
    appBar: AppBar( title: Text('앱제목') ), 
    body: Text('안녕'), 
    bottomNavigationBar: BottomAppBar( child: Text('하단바임 ㅅㄱ') ),
  )
); 

그래서 맘대로 넣어봤습니다.

AppBar() 는 상단바 간단히 넣고싶을 때 쓰는 기본 위젯이며 title 파라미터를 가질 수 있습니다. 

BottomAppBar() 는 하단바 넣고싶을 때 쓰는 기본 위젯이며 child 파라미터를 가질 수 있습니다. 

 

Q. 무슨 파라미터 가질 수 있는지 어케 다 외우냐고요?

A. 언제나 소괄호 안에서 ctrl + space 누르면 확인가능합니다. 

 

 

 

 

 

한 곳에 가로로 혹은 세로로 위젯을 여러개 넣고 싶으면

그럴 땐 Row() 또는 Column() 위젯과 children: 파라미터를 이용하면 됩니다.

 

 

가로/세로로 쪼개주는 Row/Column 위젯

 

가로로 균일하게 위젯을 배치하고 싶으면 Row() 위젯과 children: 파라미터를 쓰면 됩니다.

MaterialApp(
  home: Scaffold(
    body: Row( 
      children: [ Icon(Icons.star), Icon(Icons.star), Icon(Icons.star) ] 
    ), 
  )
); 

MaterialApp(
  home: Scaffold(
    body: Column( 
      children: [ Icon(Icons.star), Icon(Icons.star), Icon(Icons.star) ] 
    ), 
  )
); 

Column() 위젯은 아무데나 쓰면 자식 위젯들을 세로로 배치해줍니다.

 

 

가로로 배치하는 간격 조절하기

 

MaterialApp(
  home: Scaffold(
    body: Column( 
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [ Icon(Icons.star), Icon(Icons.star), Icon(Icons.star) ] 
    ), 
  )
); 

Row() 혹은 Column() 위젯은 mainAxisAlignment: 파라미터를 입력가능한데

그 파라미터로 위젯들이 배치되는 간격을 조절할 수 있습니다. 

 

.spaceEvenly 는 모든 여백 동일

.spaceBetween 은 좌우 끝에 우선 배치

.spaceAround는 모든 여백 동일인데 좌우 마지막 여백은 절반만큼

.start는 시작 부분에 다 모여

.end는 끝 부분에 다 모여

.center는 중간에 다 모여 

입니다. 외울 필요는 없고 점찍고 자동완성기능 활용하면 됩니다.

 

 

 

Row() 말고 Column() 위젯을 사용해도 마찬가지로 정렬이 가능합니다. 

다만 Column() 은 mainAxisAlignment: 사용시 세로로 정렬해줍니다. 

왜냐면 Row() 쓰면 mainAxis가 가로가 되고

Column() 쓰면 mainAxis가 세로가 됩니다.

 

세로로 배치하는 간격 조절하기

 

body: Container (
  color: Colors.grey,
  height : 400,  //높이 넣어야 세로정렬 가능할듯 
  child : Row (
    crossAxisAlignment: CrossAxisAlignment.start,
    children: const [
      Icon(Icons.star),
      Icon(Icons.star),
      Icon(Icons.star),
    ],
  ),
),

mainAxis의 반대가 crossAxis 입니다.

그래서 Row() 안에서는 mainAxis가 가로, crossAxis는 세로입니다.

crossAxisAlignment 쓰면 세로정렬이 가능합니다.

 

CrossAxisAlignment: 파라미터에 입력가능한 것들은 .start .center .end 이런게 있는데 

자동완성으로 한번 실험해보시길 바랍니다.

 

 

--------------------------추가적으로 전체소스및 

아래와 같은거 레이아웃 만들기

 

 

 

 

 

 

아이콘 이름은 phone, message, contact_page 입니다. 

 

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home:Scaffold(
        appBar: AppBar(
          title: Text("앱제목"),
        ),
          body: Text("안녕"),
          bottomNavigationBar:
          BottomAppBar(
            child: Container(
              height : 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
              children: const [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
              ],
              ),
            ),
          ),
/*
    Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,    // row 일때 가로 정렬 Column 일때는 세로 정렬임
    //crossAxisAlignment: CrossAxisAlignment.center,   세로축 정렬
    children: const [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
    ],
    */
        ),

        );
  }
}

 

 

https://github.com/jeonguk29/flutter_study/commit/2047cef7c8161039f91213dd45b650ad6e53b54b?diff=split 

코딩애플 플러터 하단바 꾸미기 과제 수행 · jeonguk29/flutter_study@2047cef

 

깃허브 참고