본문 바로가기
프로젝트 기록/Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발

4.Hello World 코드 분석_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발

by jeong11 2024. 9. 11.
반응형

Hello World 프로젝트 코드 분석하기

1. 해당 코드

https://tiny-immj.tistory.com/75

 

Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_3. 기초 프로젝트 생성

Flutter 프로젝트 실습 : Hello World 프로젝트 만들기 cmd에서 Flutter 프로젝트를 생성해보자 $ flutter create [프로젝트명]$ flutter create hello_world ※ 프로젝트명은 소문자로만 작성이 가능하다 숫자가

tiny-immj.tistory.com

 

지난 포스팅때 cmd에서 신규 프로젝트를 생성하였고 lib 폴더 아래의 main.dart 파일을 수정하였다

main.dart 수정 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

 

첫번째 라인에서 package:flutter/material.dart를 임포트 하고 있는데 

이 패키지는 Google이 개발한 디자인 언어인 머티리얼 디자인을 구현하는 위젯이 포함되어 있는 패키지이다

 

 

2. 위젯

위젯은 플러터에서 매우 중요한 개념으로 찾아본 정의는 아래와 같다

Flutter 애플리케이션은 위젯으로 구성됩니다. 위젯은 사용자 인터페이스의 일부에 대한 기술(description)입니다. 
사용자가 앱과 상호작용할 때 보이는 것이 위젯이고, 앱 자체가 위젯이기도 합니다.
다시 말하면 위젯은 화면에 표시하는 모든 것을 말합니다. (텍스트, 이미지, 버튼 등등)

 

3. 다시 코드 분석

세번째 줄의 main() 메소드는 Flutter 앱의 진입점이다

main에서는 runApp()을 호출하고 있는데 runApp메소드는 위젯을 화면에 연결해주는 역할을 한다 

runApp 메소드에 넣은 위젯이 화면에 표시되는데 이 코드에서는 MyApp을 시작 위젯으로 호출하고 있다

 

일곱번째 줄에서는 StatelessWidget을 확장(extend)하고 있는 MyAPP 클래스를 새로 만들었다 

 

MyApp의 build 메소드에서는 MaterialApp을 반환하고 해당 홈을 Center 위젯으로 설정해놓았다 

Center 위젯은 자식으로 Hello, World 문자열이 있는 Text 위젯을 가지도록 설정하였다

 

 

몇개의 중요한 코드를 살펴보면 다음과 같다 

1) extends 

 Dart 언어에서는 상속을 위해 extends 키워드를 사용한다 

extend를 사용해 확장하는 클래스의 하위 클래스를 만드는데 

즉, MyApp은 StatelessWidget에서 사용할 수 있는 모든 속성, 변수, 기능을 사용할 수 있다 

VsCode에서 모든 객체의 속성과 메소드를 보고 싶다면 ctrl 키를 누르고 클래스 이름을 클릭하면 볼 수 있다 

StatelessWidget은 이름에서도 알 수 있듯이 상태를 유지하지 않는 위젯이다 

 

2) new 사용 X

클래스의 객체를 만들 때 new 키워드를 사용하지 않는다는 특징이 있다 

return MaterialApp을 작성하면 MaterialApp의 뉴 인스턴스를 반환한다는 의미이다 

 

3) StatelessWidget

StatelessWidget을 extends하는 모든 위젯은 BuildContext를 매개변수로 하는 build 메소드를 재정의해야한다

BuildContext는 특정 위젯이 빌드되는 컨텍스트이며 상위 위젯과 상호 작용하거나 화면에서 위젯의 크기와 위치를 가져오는데 유용하다 

위젯이 화면에 그려질 때 build 메소드는 자동으로 호출되고 그 후 MaterialApp을 반환하게 된다 

 

4) 위젯 중첩

MaterialApp의 Home은 Center 위젯(콘텐츠를 화면 중앙에 배치하는 컨테이너 역할의 위젯)이다

Center 위젯 안에 어떤 내용을 넣어도 중앙에 배치가 된다

이 코드에서는 Center 위젯의 자식 매개 변수로 Hello, World가 포함된 텍스트를 넣어주었다

child 자식 매개변수를 사용하면 다른 위젯 안에 위젯을 중첩시킬 수 있어 편리하다 

 

Hello, World 출력 화면

 

 


시리즈

1. Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_1.설정

https://tiny-immj.tistory.com/73

 

Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_1. 설정

'Docker 설치 및 기본 실습'과 'Flutter 환경 설정'으로 진행된다 Docker 설치 및 기본 실습 1. Docker 설치(for window)> Docker 공식 웹사이트에서 Docker Desktop for Windows 설치파일을 다운로드하기 https://docs.doc

tiny-immj.tistory.com

 

 

2. Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_2.Flutter 개발환경 설정

https://tiny-immj.tistory.com/74

 

Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_2.Flutter 개발 환경 설정

개발환경 선택플러터 개발을 할 때는 대상 웹과 동일한 플랫폼에서 해야 합니다즉 Mac OS용으로 개발하기 위해선 Mac이 필요하고 Windows 타깃으로 개발을 하기 위해선 Windows PC가 필요합니다 저는

tiny-immj.tistory.com

 

 

3. Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_3.기초 프로젝트 생성, AVD(안드로이드) 실행

https://tiny-immj.tistory.com/75

 

Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_3. 기초 프로젝트 생성

Flutter 프로젝트 실습 : Hello World 프로젝트 만들기 cmd에서 Flutter 프로젝트를 생성해보자 $ flutter create [프로젝트명]$ flutter create hello_world ※ 프로젝트명은 소문자로만 작성이 가능하다 숫자가

tiny-immj.tistory.com

 

 

 

반응형