Flutter 강좌 - Basic widgets | 기본 위젯

 

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

 

이번 강좌에서는 Flutter의 Basic widgets을 이용해서 Material App을 작성해 봅니다.

역시 Android Studio에서 New Flutter Project를 선택하여 새로운 Flutter 프로젝트를 생성한 후 다음과 같이 작성합니다.

 

import 'package:flutter/material.dart';

// 메인 함수. 프로그램의 시작점
void main(){

  // MaterialApp을 실행. MaterialApp은 Flutter가 제공하는 material 디자인을 사용하는 앱을 의미함
  runApp(MaterialApp(
    title: "My app",
    home: MyScaffold(), // 앱의 기본 경로를 위한 위젯
  ));
}

class MyScaffold extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    // 매트리얼을 생성하여 반환. 매트리얼은 매트리얼앱을 구성하는 기본 단위
    return Material(

      // 매트리얼에 컬럼을 자식으로 추가. 컬럼은 수직적인 구성을 가짐
      child: Column(
        // 컬럼에 위젯(MyAppBar과 Expanded)를 자식들로 추가함
        children: <Widget>[

          // 첫번째 자식으로 MyAppBar를 추가
          MyAppBar(
            title: Text(
              "Example title",
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),

          // 두번째 자식으로 Expanded를 추가. MyAppBar를 제외한 영역을 차지
          Expanded(
            // Expanded의 자식으로 Center를 추가
            child: Center(
              // Center의 자식으로 Text를 추가
              child: Text("Hello, world!"),
            ),
          )
        ],
      ),
    );
  }
}

class MyAppBar extends StatelessWidget{

//  생성자. 생성시 전달받은 값을 타이틀로 할당당
  MyAppBar({this.title});

  // 타이틀 위젯을 선언
  final Widget title;

  @override
  Widget build(BuildContext context) {

    // 컨테이너를 구성하여 반환. 컨테이너는 사각형 모양의 앨리먼트들을 생성할 수 있음
    return Container(
      height: 70.0, // 컨테이너의 높이
      padding: const EdgeInsets.symmetric(horizontal: 8.0), // 컨테이너 내부의 패딩값
      decoration: BoxDecoration(color: Colors.blue), // 컨테이너를 파란색으로 꾸밈

      child: Row(   // 컨테이너의 열(row)을 자식(child)으로 추가함
        children: <Widget>[   // IconButton, Expended, IconButton을 열의 자식들로 추가함

          // 첫번째 자식으로 IconButton을 추가
          IconButton(
            icon: Icon(Icons.menu), // 메뉴 아이콘
            tooltip: "Navigation menu", // 메뉴 아이콘을 누르고 있으면 표시될 문구
            onPressed: null,  // 눌렀을 때 아무 기능 없음
          ),

          // 두번째 자식으로 Expanded를 추가
          // Expanded는 다른 자식들이 차지하고 있지 않은 모든 영역을 자신의 영역(너비)로 가짐
          Expanded(
            child: title, // 타이틀 위젯을 자식으로 등록
          ),

          // 세번째 자식으로 IconButton을 추가
          IconButton(
            icon: Icon(Icons.search), // 검색 아이콘
            tooltip: "Search",
            onPressed: null,
          )
        ],
      ),
    );
  }
}

 

main 함수

앱을 main함수에서 runApp함수를 통해 시작합니다. Flutter에서 제공하는 Material UI를 이용하는 Material 앱을 이용하기 위해서는 runApp함수에서 MaterialApp 함수를 호출합니다. title 속성으로 "My App"을 설정하였고, home 속성을 이용해서 MyScaffold 클래스를 생성하여 호출합니다.

 

MyScaffold 클래스

MyScaffold 클래스는 main함수의 MaterialApp함수의 home속성에서 호출되는 클래스입니다.

MyScaffold는 StatelessWidget을 상속하는 클래스로 build함수를 통해 매트리얼(Material)을 생성하여 반환합니다. 매트리얼은 매트리얼 앱을 구성하는 기본 단위입니다.

이 매트리얼은 단일 자식으로 칼럼(Column)을 가집니다. 칼럼은 수직으로 UI를 구성할 수 있습니다. 칼럼은 다시 두 개의 위젯을 자식들로 가집니다.

첫 번째 자식인 MyAppBar는 본 앱의 상단에 표시될 바를 구성하는 것으로 별도의 클래스로 구현되어 있습니다.

두 번째 자식인 Expanded는 Center를 자식으로 가지며, Center는 다시 Text를 자식으로 가지고 있기 때문에 앱의 중앙에 텍스트를 출력하는 역할을 합니다.

 

MyAppBar 클래스

MyAppBar 클래스는 MyScaffold 클래스의 Build 함수에 의해 호출되어 앱의 상단을 꾸며주는 클래스입니다.

MyAppBar 클래스도 StatelessWidget을 상속하는 클래스로 build함수를 통해 컨테이너(Container)를 생성하여 반환합니다. 컨테이너는 사각형  모양의 앨리먼트들을 구성할 수 있습니다.

MyAppBar 클래스는 MyScaffold 클래스의 Build 함수에서 생성/호출되는데 생성자 호출 시 넘겨받은 title을 내부 필드에 저장하게 됩니다.

height와 padding 그리고 decoration 항목을 통해 컨테이너의 높이와 내부 패딩, 컨테이너의 색상을 설정하고 있습니다.

단일 자식으로 로우(Row)를 가지고 있는데 로우를 이용하면 수평적으로 위젯들을 구성할 수 있습니다. 로우의 자식들로는 IconButton과 Expanded 그리고 IconButton을 구성하고 있습니다.

첫 번째와 세 번째 자식인 아이콘 버튼들을 메뉴 아이콘과 검색 아이콘을 설정하고 있으며 onPressed 항목에서 null로 설정하였기 때문에 아이콘을 클릭하더라도 실행되는 로직은 없습니다.

두 번째 자식은 Expanded로 설정되었기 때문에 첫 번째와 세 번째 아이콘 버튼이 차지하는 영역을 제외한 모든 영역이 Expanded의 영역으로 할당되며, MyAppBar 클래스가 생성될 때 넘겨받은 title 위젯으로 Expanded를 구성하게 됩니다.

 

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

 

우선 안드로이드의 기본 상태바와 이 앱에서 구현한 MyAppBar가 겹쳐져서 표시되고 있습니다. 이 문제는 저도 Flutter를 처음 접하고 있기 때문에 아직 해결방법을 모르겠습니다.

앱 상단의 MyAppBar를 보면 MyAppBar에서 로우에 등록한 메뉴 아이콘과 검색 아이콘이 양 끝에 표시되고 있으며, Expanded로 등록한 title이 표시되고 있으나 카메라에 가려서 제대로 표시되지는 않습니다.

다만 여기서 이해해야 하는 부분은 MyScaffold 클래스에서 MyAppBar를 설정할 때 타이틀 위젯을 텍스트(Text)로 구성했으며 이 위젯이 MyAppBar의 생성자로 전달되어 필드로 저장되고 다시 MyAppBar의 Expanded로 등록되었다는 점입니다.

마지막으로 화면 중앙에는 MyScaffold에서 Expanded의 Center로 구성한 텍스트가 표시되고 있습니다.

 

---

본 강좌는 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 앱