Scaffold 클래스

이번시간에는 Scaffold 클래스에 대해서 알아보겠습니다.

Scaffold클래스는 머티리얼 디자인을 돕는 클래스입니다.

머티리얼은 구글에서 제작한 Flat디자인 지침입니다.

꼭 이 디자인을 따라야 하는건 아니지만 깔끔하고 명료한 간결한 디자인 구성이 가능합니다.

괜히 뭐 한다고 아이콘 하나 하나 다 그려서 뭐하는 저같은 사람들은 이런걸 사용해서 빠르게 빠르게 개발하는게 좋습니다.

지금 보고 계시는 제 사이트의 디자인이 거지같은 이유기도하지요.

디자인 수정해야하긴 하는데 답답하네요. ㅜㅜ

아무튼 머티리얼 디자인에 관해서는 아래의 링크를 통해서 봐주세요.

머티리얼 디자인을 사용하기 위해서는 Scaffold클래스를 사용한다고했는데요.

Scaffold 클래스는 MaterialApp()안에서 작동합니다.

그러므로 먼저 MaterialApp()을 만드는 함수

현재의 my_second_app은 StatefulWidget를 설명하기위해 최소한의 코드를 사용한 예입니다.

MaterialApp()을 사용하기 위해 우선 StatelessWidget를 상속한 클래스를 추가하겠습니다.

main.dart파일의 MyApp 클래스 명을 MyAppState로 변경합니다. _MyApp 클래스명은 _MyAppState로 변경합니다.

코드 변경 전

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyApp();
  }
}

class _MyApp extends State<MyApp> {

  @override
  Widget build(BuildContext context) {

  }
}

코드 변경 후

class MyAppState extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyAppState> {

  @override
  Widget build(BuildContext context) {

  }
}

이제 MyApp클래스를 생성하겠습니다.

이 클래스는 StatelessWidget 클래스를 상속받습니다.

우리가 my_first_app프로젝트에서 작성했던 MyApp 클래스를 작성한다고 보시면 됩니다.

build와 MaterialApp()까지 작성합니다.

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'pinkcoding',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
    );
  }
}

위의 코드를 void main 함수 아래에 작성합니다.

현재까지의 최종코드는 다음과 같습니다.

import "package:flutter/material.dart";

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'pinkcoding',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
    );
  }
}

class MyAppState extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyAppState> {

  @override
  Widget build(BuildContext context) {

  }
}

MaterialApp()을 MyApp클래스에서 생성했습니다.

my_first_app 프로젝트에서는 MaterialApp()의 home에 이런 저런 위젯을 추가했었습니다.

앞에서 했던 것처럼 home에 직접 여러 위젯을 작성할 수 있지만 간단히 해보기 위해서 앞에서 그렇게 했고

원래는 앞에서는 했던것처럼 사용하지 않습니다.

정말 상태 변화가 없는 앱이라면 Scaffold()를 home:에 바로 사용할 수 있지만 보통 앱은 상태 변화가 있는 앱을 만들기 때문입니다.

아래의 코드는 my_second_app 프로젝트에 적용하지 마세요. 바로 Scaffold()를 StatelessWidget에 사용하는 예입니다.

return MaterialApp(
    title: 'pinkcoding',
    theme: ThemeData(
        primarySwatch: Colors.red,
    ),
    home: Scaffold(),
);

그럼 다시 본론으로 돌아와서........

home()에는 StatefulWidget 클래스를 상속받는 클래스를 입력합니다.

그럼 MyApp 클래스의 MaterialApp()안의 theme 이후에 다음의 코드를 추가합니다.

home: MyAppState(),

그럼 MyApp의 코드는 최종적으로 다음과 같죠.

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'pinkcoding',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyAppState(),
    );
  }
}

그럼 _MyAppState 클래스에 선언해 둔 build에 Scaffold 클래스 반환하겠습니다.

_MyAppState 클래스의 build()에 다음의 코드를 추가합니다.

return Scaffold(

);

현재까지의 _MyAppState 클래스의 코드는 다음과 같습니다.

class _MyAppState extends State<MyAppState> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(

    );
  }
}

와우 여기까지 했네요. 이제 머티리얼 디자인을 사용할 준비가 끝났습니다.

그럼 다음 시간에는 앱바를 만들어 볼게요.

앱바란 다음 이미지의 상단 빨간색 박스 부분을 말합니다.