[Flutter3.7][Dart2.19] Flutter 간단한 프로젝트코드 작성해보기

 

 본 글은 lib/main.dart 파일 수정을 전제로 합니다.

 

 

 

1. 기본적인 문구 출력하는 화면 코딩

 

// material.dart 파일을 import 합니다. material.dart 파일은 Flutter에서 Material Design을 구현하는 데 필요한 위젯과 기능들을 제공합니다.
import 'package:flutter/material.dart';

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

// MyApp 클래스를 정의합니다. 이 클래스는 StatelessWidget 클래스를 상속받습니다. StatelessWidget 클래스는 상태를 가지지 않는 위젯입니다.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text("Hello world!")
        ),
    );
  }
}

 

 

 

 

 

2. appBar 추가

 

// material.dart 파일을 import 합니다. material.dart 파일은 Flutter에서 Material Design을 구현하는 데 필요한 위젯과 기능들을 제공합니다.
import 'package:flutter/material.dart';

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

// MyApp 클래스를 정의합니다. 이 클래스는 StatelessWidget 클래스를 상속받습니다. StatelessWidget 클래스는 상태를 가지지 않는 위젯입니다.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Flutter!"),
        ),
        body: Text("Hello world!"),
      ),
    );
  }
}

 

 

 

 

 

3. 문구 가운데 정렬로 변경

 

// material.dart 파일을 import 합니다. material.dart 파일은 Flutter에서 Material Design을 구현하는 데 필요한 위젯과 기능들을 제공합니다.
import 'package:flutter/material.dart';

// 프로젝트의 root 부분이라고 볼 수 있습니다.
void main() {
  runApp(MyApp());
}

// MyApp 클래스를 정의합니다. 이 클래스는 StatelessWidget 클래스를 상속받습니다. StatelessWidget 클래스는 상태를 가지지 않는 위젯입니다.
// 일반적인 class인 "MyApp"을 Widget으로 바꿔주기 위해 flutter의 core Widget 중 하나인 StatelessWidget을 상속받습니다.
// Statless Widget은 아주 기초적인 Widget이고, 화면에 뭔가를 띄워주는 거 말고는 하는 일이 없습니다.
class MyApp extends StatelessWidget {
  // Widget이 된다는 것은, build 메소드를 구현해야만 하는 상황이 된다는 것입니다.
  // build() 메소드를 오버라이드(재정의)합니다. build() 메소드는 위젯을 생성합니다. 이 메소드에서는 MaterialApp 위젯을 반환합니다.
  @override
  // BuildContext라는 타입의 context를 argument를 선언합니다.
  Widget build(BuildContext context) {
    // build를 진행한 뒤 해당 작업의 결과로 또 다른 Widget을 return해야합니다.
    // 본 코드에서는 App Widget의 build 메소드가 MaterialApp Widget을 return하고 있습니다.
    return MaterialApp(
      // Scaffold는 화면의 구성 및 구조에 관한 것들을 가진 Widget입니다.
      // Scaffold는 앱 바닥에 있는 배치 위젯입니다. 여기서는 appBar와 body 위젯을 정의합니다.
      home: Scaffold(
        // AppBar는 앱 바에 대한 설정을 정의합니다. 여기서는 title 속성에 "Hello Flutter!" 문자열을 할당합니다.
        appBar: AppBar(
          title: Text("Hello Flutter!"),
        ),
        // body 위젯은 앱 화면에 표시될 내용을 정의합니다. 여기서는 Text 위젯을 Center 위젯 안에 정의하여 화면 가운데에 텍스트를 출력합니다. Text 위젯의 내용은 "Hello world!" 문자열입니다.
        body: Center(
          child: Text("Hello world!"),
        ),
      ),
    );
  }
}

 

 

 

 

 

4. 마우스 갖다대었을 때 나오는 문구 확인하여 이것저것 해보기

 - Scaffold에 대해 내용 확인하기

 

 Scaffold는 많은 선택지들이 있습니다. 본 코드에서 사용한 appBar와 body가 눈에 띕니다. 다른 선택지들도 활용해보고 감을 잡아볼 수 있습니다.

 - AppBar에 대해 내용 확인하기

 - Center에 대해 내용 확인하기

 

 

 

 

 

5. AppBar에 요소 추가 예제

 

 centerTitle & elevation을 추가한 예시입니다.

 

// material.dart 파일을 import 합니다. material.dart 파일은 Flutter에서 Material Design을 구현하는 데 필요한 위젯과 기능들을 제공합니다.
import 'package:flutter/material.dart';

// 프로젝트의 root 부분이라고 볼 수 있습니다.
void main() {
  runApp(MyApp());
}

// MyApp 클래스를 정의합니다. 이 클래스는 StatelessWidget 클래스를 상속받습니다. StatelessWidget 클래스는 상태를 가지지 않는 위젯입니다.
// 일반적인 class인 "MyApp"을 Widget으로 바꿔주기 위해 flutter의 core Widget 중 하나인 StatelessWidget을 상속받습니다.
// Statless Widget은 아주 기초적인 Widget이고, 화면에 뭔가를 띄워주는 거 말고는 하는 일이 없습니다.
class MyApp extends StatelessWidget {
  // Widget이 된다는 것은, build 메소드를 구현해야만 하는 상황이 된다는 것입니다.
  // build() 메소드를 오버라이드(재정의)합니다. build() 메소드는 위젯을 생성합니다. 이 메소드에서는 MaterialApp 위젯을 반환합니다.
  @override
  // BuildContext라는 타입의 context를 argument를 선언합니다.
  Widget build(BuildContext context) {
    // build를 진행한 뒤 해당 작업의 결과로 또 다른 Widget을 return해야합니다.
    // 본 코드에서는 App Widget의 build 메소드가 MaterialApp Widget을 return하고 있습니다.
    return MaterialApp(
      // Scaffold는 화면의 구성 및 구조에 관한 것들을 가진 Widget입니다.
      // Scaffold는 앱 바닥에 있는 배치 위젯입니다. 여기서는 appBar와 body 위젯을 정의합니다.
      home: Scaffold(
        // AppBar는 앱 바에 대한 설정을 정의합니다. 여기서는 title 속성에 "Hello Flutter!" 문자열을 할당합니다.
        appBar: AppBar(
          // 가운데 정렬 기능 해제
          centerTitle: false,
          // 앱바 아래에 그림자 20 크기만큼 생성해주기
          elevation: 20,
          title: Text("Hello Flutter!"),
        ),
        // body 위젯은 앱 화면에 표시될 내용을 정의합니다. 여기서는 Text 위젯을 Center 위젯 안에 정의하여 화면 가운데에 텍스트를 출력합니다. Text 위젯의 내용은 "Hello world!" 문자열입니다.
        body: Center(
          child: Text("Hello world!"),
        ),
      ),
    );
  }
}