Hello World 출력하는 웹사이트 만들기, Entrypoint, 위젯트리_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

Flutter 프로젝트 실습 : Hello World 출력하는 웹사이트 

이전에도 한 것 같지만 그것은 모바일 앱 에뮬레이터로 띄우기 였습니다

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

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

 

Hello World 프로젝트를 만들어 웹사이트에서 띄우는 방법을 실습해보려 한다 

 

1. Flutter 개발환경 설정

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

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

▷ Flutter SDK 다운로드 및 환경 변수 설정 ↑

▷ flutter doctor 명령어 실행하여 설치 상태 확인하고 필요한 요소  설치하기

flutter doctor

 

▷ VS Code 설치 및 Flutter 플러그인 설치 

1) 공식 웹사이트에서 파일을 받아 설치 진행

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

2) 플러그인 설치

extension에서 flutter 플러그인

Extension이 보이지 않는다면 Ctrl + shift + X 을 눌러 열어본다 

 

 

2. 새로운 Flutter 프로젝트 생성

VSCode를 실행한다 

Ctrl+Shift+P

Ctrl+Shift+P 명령어 실행

 

Flutter:New Project 선택 

대충 적어도 뜹니다

 

Flutter Project template을 선택하래요 ☞ Application

Application 선택

 

저장할 폴더 선택 후 Select a folder to create the project in

 

프로젝트 이름 입력 ☞ flutter_web_application

이름 그대로 만들어도 되지만...

 

짜잔 새로운 프로젝트가 열렸습니다

new Project

 

3. 웹 개발 활성화 확인

생성한 Flutter 웹개발을 지원하는지 확인해보자

 

1) VS Code에서 터미널을 오픈

맨 위 메뉴바에서 Terminal > New Terminal 선택

 

2) Flutter 웹 타겟 활성화 명령어 입력

flutter config --enable-web

 

enable-web value to true 확인

3) flutter devices 

해당 명령어를 실행해 web이 연결되어 있는지 확인해볼 수 있다 

flutter devices

Chrome, Edge Web devices를 확인 가능하다

 

4. Hello World 출력하기

1) 메인 파일 열기 ☞ lib/main.dart 파일 

main.dart 파일이 해당 프로젝트의 진입점이라 할 수 있다

 

2) Hello World 출력을 위한 코드 수정

lib/main.dart 수정

Hello World 출력 코드

import 'package:flutter/material/dart';

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

class MyApp extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return MaterialApp(
        	home: Scaffold(
            	appBar: AppBar(
                	title: Text('Flutter Web'),
                ), // AppBar
                body: Center(
                	child: Text('Hello World!')
                ), //Center
            ), //Scaffold
        ); //MaterialApp
    }
}

 

3) chrome으로 실행

flutter run -d chrome

Hello World 출력

 

 

Entry Point 

1. Entry Point란 

어플리케이션이 시작되는 진입점을 의미, 
기본적으로 어플리케이션의 실행이 시작되는 main 함수가 포함된 파일이다
이 진입점에서 Flutter 프레임워크는 어플리케이션을 초기화하고 렌더링을 시작한다 

 

2. Flutter에서의 Entry Point과 위젯 트리

▷ Flutter에서는 일반적으로 프로젝트의 lib 폴더 안에 main.dart 파일이 기본 엔트리 포인트로 설정되어 있다 

main.dart 파일 안에서 main() 함수를 정의하고 이 함수가 Flutter 어플리케이션의 진입점이 된다 

 

▷ 웹서버가 요청(request)를 처리할 때 웹 어플리케이션의 진입점 : main() 함수

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

☞ runApp() 함수 : Flutter 프레임워크에 앱/웹 어플리케이션을 시작하고 위젯 트리 렌더링을 지시함 

 

☞ 위젯 트리 : Flutter에서 앱의 UI를 구성하는 위젯들 간의 계층 구조

Flutter에서는 모든 것이 위젯으로 이루어져 있으며 화면에 표시되는 요소들이 각기 다른 위젯들로 구성되어 있다
위젯트리는 이러한 위젯들이 부모 - 자식 간의 관계로 구성되어 UI를 정의하는 구조

 

① 루트 위젯(Root Widget) : 앱의 최상위 위젯으로, 보통 MaterialApp 또는 CupertionoApp 같은 앱의 전반적인 스타일과 네비게이션을 설정하는 위젯이 사용됨 

 

② 부모와 자식 위젯 : 위젯 트리에서 위젯들은 부모-자식 관계를 가지며 계층 구조를 형성하는데 부모 위젯이 자식 위젯을 포함하여 더 큰 UI를 구성하게 된다 

예를 들어 Column 위젯 안에  Text 위젯이나 Button 위젯을 자식으로 두어 화면에 여러 요소를 배치할 수 있다 

 

③ 리프 위젯(Leaf Widget) : 가장 하위에 위치한 위젯으로 더 이상 자식을 가지지 않는 위젯. 

예를 들어 단순히 텍스트를 표시하는 Text 위젯이나 이미지의 Image 위젯 등이 있다 

 

☞ 위젯 트리의 구성

MaterialApp (루트 위젯)
	Scaffold (화면의 기본 구조)
    	AppBar (상단 앱 바)
        	Text (앱 바 타이틀)
        Center (중앙 정렬)
        	Column (수직 배열)
            	Text (텍스트 표시)
                ElevatedButton (버튼)

 

☞ 위젯 트리의 중요성 

Flutter의 위젯 트리는 반응형 UI를 구현하고 상태 관리를 효율적으로 하는데 핵심적인 역할을 한다

위젯 트리가 변경될 때는 Flutter는 변경된 부분만 다시 렌더링하여 성능을 최적화한다 

 

 

간단 정리 

사용자가 웹사이트에 접근하면 이 요청은 Flutter에서 main() 함수로 전달되고 runApp함수()가 호출되어 어플리케이션을 실행하게 된다