[Linux/Flutter] 플러터 Hello World 출력 간단 앱 만들기 예제(StatelessWidget 및 Text 문자열 생성)

 

목차

1. 리눅스 Flutter 개발 환경 구성 예제 - 5(Android, iOS 지원 플러터 앱 프로젝트 생성 예제) 이전 포스팅 링크 및 설명
2. 리눅스 Flutter "jre/bin/java -Xmx700m -Djava.awt" 에러 수정 예제 이전 포스팅 링크 및 설명
3. 리눅스 Flutter 개발 환경 구성 예제 - 2(iOS, 안드로이드 개발도구 다운로드) 이전 포스팅 링크 및 설명
4. 리눅스 Flutter "Hello World" 화면 출력 앱 만들기 예제
5. 리눅스 Flutter 앱 실행 후 결과 확인 예제

 

 

 

 

 

 

 

 

 

리눅스 Flutter 개발 환경 구성 예제 - 5(Android, iOS 지원 플러터 앱 프로젝트 생성 예제) 이전 포스팅 링크 및 설명

이전 포스팅에서는 안드로이드와 iOS를 지원하는 플러터 앱 프로젝트를 생성하는 방법에 대해 다뤘습니다. 해당 예제를 통해 리눅스 환경에서 Flutter 개발을 위한 기본적인 설정을 완료할 수 있습니다. 안드로이드 스튜디오 IDE를 활용하여 신규 Flutter 프로젝트를 만들 때 멀티 플랫폼(안드로이드, iOS)를 지원할 수 있도록 설정할 수 있습니다. 이러한 멀티플랫폼 지원이되는 앱 프로젝트를 생성하여 빌드 후 크롬 브라우저에서 실행 시켜볼 수 있습니다. 해당 내용이 궁금하시다면 아래 링크를 참고해주세요.

 

2024.01.24 - [Flutter] - [Linux/Flutter] 플러터 개발 환경 구성 예제 - 5(Android, iOS 지원 플러터 앱 프로젝트 생성 예제)

[Linux/Flutter] 플러터 개발 환경 구성 예제 - 5(Android, iOS 지원 플러터 앱 프로젝트 생성 예제)

 

 

 

 

 

 

 

리눅스 Flutter "jre/bin/java -Xmx700m -Djava.awt" 에러 수정 예제 이전 포스팅 링크 및 설명

다음으로 이전 포스팅에서는 리눅스 환경에서 Flutter 개발 시 발생할 수 있는 "jre/bin/java -Xmx700m -Djava.awt" 에러에 대한 해결 방법을 소개했습니다. 해당 예제를 통해 이러한 문제가 발생했을 때 어떻게 해결할 수 있는지 알 수 있습니다. 위 에러는 java 실행 파일에 잘못된 인자를 전달하여 발생할 수도 있지만, 보통 Flutter 개발 단계에서 저 에러가 발생하면 jre 디렉토리 경로를 잘못 설정해서 발생하는 경우가 대부분입니다. 따라서 jre 디렉토리 경로 설정 방법이 궁금하시다면 아래 링크를 참고해주세요.

 

2024.01.24 - [Flutter] - [Linux/Flutter] 플러터 "jre/bin/java -Xmx700m -Djava.awt" 빌드 에러 고치기 예제

[Linux/Flutter] 플러터 "jre/bin/java -Xmx700m -Djava.awt" 빌드 에러 고치기 예제

 

 

 

 

 

 

 

리눅스 Flutter 개발 환경 구성 예제 - 2(iOS, 안드로이드 개발도구 다운로드) 이전 포스팅 링크 및 설명

마지막으로 이전 포스팅에서는 iOS와 안드로이드 개발 도구를 다운로드하여 리눅스에서 Flutter 개발 환경을 구성하는 방법에 대해 다뤘습니다. 해당 예제를 통해 필요한 도구를 설치하고 환경을 설정할 수 있습니다. 보통은 한 개의 플랫폼에서 실행되는 앱을 개발하기때문에 여러개의 SDK 및 파일을 다운로드 할 필요없지만, 플러터는 멀티 플랫폼 지원 언어이기때문에 다양한 SDK를 다운로드해야합니다. flutter precache 명령을 사용하면 이러한 파일들을 모두 다운로드할 수 있습니다. 해당 내용이 궁금하시다면 아래 링크를 참고해주세요.

 

2024.01.23 - [Flutter] - [Linux/Flutter] 플러터 개발 환경 구성 예제 - 2(iOS, 안드로이드 개발도구 다운로드)

[Linux/Flutter] 플러터 개발 환경 구성 예제 - 2(iOS, 안드로이드 개발도구 다운로드)

 

 

 

 

 

 

 

리눅스 Flutter "Hello World" 화면 출력 앱 만들기 예제

아래는 간단한 "Hello World" 앱을 생성하여 화면에 출력하는 예제입니다. lib/main.dart 소스코드를 아래와 같이 작성해주세요. StatelessWidget을 사용하여 간단한 문자열 출력 뷰를 생성할 수 있습니다. MaterialApp 하위 속성중 body에 Text로 생성한 "Hello, World!" 문자열을 출력시킬 수 있습니다.

 

import 'package:flutter/material.dart';

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

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

 

Flutter의 StatelessWidget과 Text를 이용하여 Hello World 문자열을 출력하는 모습

 

 

 

 

 

리눅스 Flutter 앱 실행 후 결과 확인 예제

이 예제에서는 앞서 생성한 Flutter 앱을 실행하고 출력 결과를 확인할 수 있습니다. 앱 실행 디바이스를 Chrome 브라우저로 설정하여 앱 실행시 웹뷰 화면에 "Hello World!" 문자열이 가운데에 출력되는지 확인할 수 있습니다. 직접 위와 같은 소스 코드를 작성하여 실행해보세요.

 

1. Android Studio에서 클라이언트 디바이스를 Chrome으로 설정
2. Run을 선택하여 앱 실행

 

AppBar 타이틀 영역과 Body 영역에 Hello, World! 문자열이 출력되는 Flutter 앱