flutter study - 02 scafold 및 가로세로 배치

MaterialApp

• main.dart 에서 입력하는 MaterialApp도 위젯이다.
• MaterialApp 을 이용하면 구글이 제공하는 Material 테마 등을 이용할 수 있다.
• 아이폰 기본 앱 스타일의 어플을 만들고 싶으면 cupertino관련 위젯을 써야한다.
• 커스터마이징 앱을 만들고 싶어도 MaterialApp이 유용한 설정들을 제공하기 때문에 MaterialApp 위젯으로 시작하면 된다.

return MaterialApp(  
    home: Center(  
      child: Container( width: 50, height: 50, color: Colors.blue )  
    )  
  );

Scaffold

화면 상중하로 나누기

• Scafoold는 앱을 상,중,하로 나눠준다.
• 아래에서 appBar는 상단, body는 화면의 중앙, bottomNavigationBar는 하단에 위치하는 위젯이다.
• 아래처럼 적용하면 화면 하단에 bottom이라는 글자가 출력된다

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(),  
      body: Container(),  
      bottomNavigationBar: BottomAppBar( child: Text('bottom')),
    )  
  );

• 아래 처럼 적용하면 왼쪽 상단에 별표를 출력한다.
• Scaffold 기본 정렬이 왼쪽 상단

return MaterialApp(  
    home: Scaffold(  
      body: Container(  
        child: Icon(Icons.star)  
      ),  
    )  
  );

한줄에 여러 위젯 등록하기 - Row

• Row 위젯을 사용하면 같은줄에 여러개의 child 위젯을 사용할수 있다.

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

const 선언 생략하기

• 위처럼 쓰면 아래처럼 'const'를 선언하라고 한다

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

* const 선언을 생략하고 싶으면 analysis_options.yaml 파일 rules에 아래 내용을 추가한다.

rules:  
    prefer_const_literals_to_create_immutables : false

위젯 세로로 배치하기 - Column()

• 세로로 배치하고 싶으면 Row대신 Column을 쓰면된다.

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

중앙정렬하기 - MainAxis

• center로 배치하고 싶으면 center라는 위젯을 써도 되지만 아래처럼 해도 된다.

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

• 가운데로 배치하면서 위젯간 간격을 똑같이 하고 싶으면 spaceEvenly 옵션을 쓴다.
• css의 flex와 유사하다

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

MainAxis vs CrossAxis

• Row()를 쓸때는 MainAxis가 가로이고 CrossAxis가 세로이다.
• Column()을 쓸때는 반대이다.
• Row에 그냥 crossAxisAlignment하려면 상하 폭 등의 정보가 없어서 안된다.
• 아래처럼 container 안에 넣으면 컨테이너 자체는 왼쪽 상단에 위치하고 컨테이너 내에서 star 아이콘들이 가운데로 정렬된다

return MaterialApp(  
    home: Scaffold(  
      body: Container(  
          width: 300,  
          height: 300,  
          color: Colors.blue,  
          child: Row(  
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
              crossAxisAlignment: CrossAxisAlignment.center,  
              children: [  
                Icon(Icons.star),  
                Icon(Icons.star),  
                Icon(Icons.star)  
              ]  
          )  
      ),  
    )  
  );

코드 생각안날때 자동완성 활용하기

• 파라미터 생각안나면 자동완성 불러오기 : Ctrl + Space
• 맥은 Ctrl + Space가 다른 단축키로 사용중임.
• 맥의 키보드 설정에서 이 키를 안쓰게 해제 하든지,
• android studio - preference - keymap - code completion 단축키를 Ctrl + Space가 아닌 다른 키로 설정하든지 해야한다

추가

아래 그림화면처럼 만들기

• Container 대신 Sizedbox를 써도된다.
• Children, width, height만 필요하면 Sizedbox가 더 가벼운 위젯이므로 더 좋다.

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(  
        title: Text('Hello')  
      ),  
      bottomNavigationBar: BottomAppBar(  
          child: Container(  
              height:100,  
              child: Row(  
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                      Icon(Icons.phone),
                      Icon(Icons.message),
                      Icon(Icons.contact_page)  
                  ]  
              )  
          )  
      ),  
    )  
  );