! 두 번째 챕터 핵심 기능 배우는 것으로 넘어갔다. 두둥 저번 챕터에서는 간단하게 플루터에 대해서 알아봤고, 위젯의 생명주기에 대해서도 알아봤다. 이번에는 스캐폴드를 활용해서 머터리얼 디자인을 적용하는 것에 대해 정리해볼 예정이다.

1. 머티리얼 디자인 적용하기

구글에서 2014년부터 사용한 플랫 디자인 지침이다. 머터리얼 디자인을 적용하면 평면, 단색 위주의 간결한 디자인을 바탕으로 앱의 용량을 줄이고 속도를 개선할 수 있다.

• 스캐폴드(Scaffold) 클래스
  
  각종 위젯을 머티리얼 디자인 레이아웃으로 설계하는 것을 돕는 역할

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override

  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch:  Colors.blue,
      ),
      home: MaterialFlutterApp(),
    );
  }
}

class MaterialFlutterApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MaterialFlutterApp();
  }
}

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
     
    );
  }
}

StatefulWidget 클래스를 상속받는 MaterialFlutterApp 클래스를 만들었다.

이때 스테이트풀 위젯을 화면에 출력하기 위해 State 클래스를 활용했다.

그래서 State 클래스를 상속받는 _MaterialFlutterApp 클래스를 만들었다.

그 뒤에 build()함수 안에 scaffold() 함수를 호출에 위젯의 골격을 만들었다.

위의 사진과 같이 빈 화면을 만들었다.

그 다음에 Scaffold() 골격 안에

appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
      onPressed: (){

를 넣어줬다.

Floating 버튼을 넣어줬는데 진짜 뿌듯하게 다음과 같이 나왔다!!

• 위젯 여러개 넣기!

다음으로 위젯을 여러개 넣는 코드를 적어보려고 한다.

위젯을 여러 개 만들 때 Row와 Column 위젯을 활용한다. 여기서 Row는 가로, Column은 세로로 위젯을 배치한다.

이때 Row와 Column 옵션 안에 child가 아닌 children을 이용해 배열 형태로 선언한다.

Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
      onPressed: (){
      }),
      body: Container(
        child: Center(
        child: Column(
          children: <Widget>[ Icon(Icons.android), Text('android') ],
          mainAxisAlignment: MainAxisAlignment.center,
        ),
      ),
      ),
    );

Scaffold() 안에 body를 선언하고, 그 안에 Container의 child로 Column을 지정한다.

그 뒤 Column 안에 children을 이용해 위젯 목록을 배열 형태로 나열할 기본 골격을 만든다.

그리고 child로 Center를 지정한 뒤 mainAxisAlignment: MainAxisAlignment.center라는 세로로 정렬해주는 코드를 통해 가운대로 옮겼다.

여기까지 한 내용이 머터리얼 디자인의 기본 골격을 만들어 주는 Scaffold()를 사용했다!