Flutter 강좌 - Using Material Components | Scaffold 컴포넌트 사용법

 

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

이번 시간에는 Flutter의 매트리얼 앱의 레이아웃을 구성하기 위해 주요하게 사용되는 Scaffold 컴포넌트에 대해서 알아보겠습니다.

소스코드는 다음과 같습니다.

import 'package:flutter/material.dart';

void main(){
  // 매트리얼앱을 실행
  runApp(MaterialApp(
    title: "Flutter Tutorial",  // 타이틀 설정
    home: TutorialHome(), // 앱의 루트 경로 TutorialHome을 실행
  ));
}

class TutorialHome extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    // 스카폴드 위젯을 생성하여 반환. 스카폴드는 레이아웃을 위한 주요 매트리얼 컴포넌트임
    return Scaffold(

      // 앱바 구성성
      appBar: AppBar(
        // 리딩 위젯에 IconButton을 등록함. 리딩은 타이틀 위젯 앞에 출력되는 위젯임
        leading: IconButton(
            icon: Icon(Icons.menu), // 메뉴 아이콘 추가
            tooltip: "Navigation menu",
            onPressed: null // 선택되어도 별도의 액션은 없음
        ),

        // 타이틀 위젯에 텍스트를 등록함. 타이틀은 앱바에 출력되는 주요 위젯임임
        title: Text("Example Title"),

        // 액션즈 위젯에 아이콘버튼을 추가함. 액션즈 위젯은 타이틀 위젯 다음으로 출력되는 위젯임
        actions: <Widget>[
          // 아이콘 버튼 추가
          IconButton(
            icon: Icon(Icons.search),
            tooltip: "Search",
            onPressed: null,
          )
        ],
      ),

      // 바디 위젯에 Center 위젯을 등록함. 바디는 스크린의 대부분을 차지함
      body: Center(
        child: Text("Hello, world!"), // 센터의 자식으로 텍스트 추가
      ),

      // 플로팅액션버튼을 추가함함. 플로팅액션버튼은 컨텐츠 위에 떠있는 버튼으로 바디나 액션바에 속하지 않음
     floatingActionButton: FloatingActionButton(
          tooltip: "Add",
          child: Icon(Icons.add),
          onPressed: null
      ),
    );
  }
}

 

main 함수

runApp함수를 통해 MaterialApp을

생성하여 실행합니다. 매트리얼앱의 홈(home) 위젯으로 TutorialHome 클래스를 할당합니다.

 

TutorialHome 클래스

main 함수에서 생성하는 매트리얼앱의 홈 위젯에 해당하는 Scaffold 위젯을 생성하여 반환하는 클래스입니다. 본 앱에서 사용하는 Scaffold 위젯의 서브 항목들은 다음과 같습니다.

• appBar: 앱의 상단에 표시되는 바형태의 위젯
• body: 앱의 중앙에 출력되는 위젯
• floatingActionButton: 앱을 구성하는 컨텐츠 위에 떠있는 원형의 위젯

 

본 앱의 appBar는 AppBar 위젯을 이용해서 구성하며, 본 앱에서 사용한 AppBar 위젯의 서브 항목들은 다음과 같습니다.

leading: 타이틀 위젯 앞에 출력되는 위젯

title: 앱바에 출력되는 주요 위젯

actions: 타이틀 위젯 뒤에 출력되는 위젯

 

앱의 실행화면은 다음과 같습니다.

 

우선 앱의 실행화면은 직전 강좌의 앱의 화면 구성과 동일합니다. 차이점은 안드로이드의 기본 상태바와 겹쳐지지 않고 정상적으로 출력되고 있습니다.

앱바를 구성하기 위해 직전 강좌에서는 StatelessWidget을 상속하는 MyAppBar라는 클래스에서 컨테이너를 직접 구성했습니다. 하지만 본 앱에서는 AppBar 위젯을 이용해서 보다 간단하게 앱바를 구성할 수 있으며 디자인적으로도 자동으로 올바르게 조정되어 겹치는 현상이 사라졌습니다.

앱 화면을 구성하는 방식에도 차이가 있습니다. 직전 앱에서는 StatelessWidget을 상속하는 MyScaffold 클래스에 칼럼 컴포넌트를 자식으로 가지는 Material 컴포넌트를 통해 앱바와 앱 중앙의 콘텐츠를 구성하였지만, 본 앱에서는 Scaffold 위젯을 이용하여 appBar와 body 항목을 이용해서 보단 간결한 코드로 화면을 구성할 수 있었습니다.

 

---

본 강좌는 Flutter 공식 사이트의 문서를 참고하여 진행됨을 알려드립니다.

https://flutter.dev/docs

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱