1.hello – Nextra

Helloworld 프로젝트

Project 개설

Project View 로 전환

Start

lib/main.dart 와 test/widget_test.dart 파일을 모두 열어서 파일 내부의 내용들을 모두 지워줍니다. lib/main.dart , test/widget_test.dart 파일들은 모두 아래의 위치에 있습니다.

lib/main.dart 와 test/widget_test.dart 파일의 내부를 모두 지워주세요.

이번에는 아래의 코드를 작성합니다.

import 'package:flutter/material.dart';
 
void main(){
  runApp(MaterialApp(
    home: Scaffold(
 
    ),
  ));
}

runApp() 함수

runApp 함수 내에 MaterialApp 말고도 Cupertino 등 여러가지를 사용할 수 있습니다.

MaterialApp

앱의 가장 기본이 되는 단위. 최상위에 위치
이번 예제에서는 material.dart 내의 runApp() 함수를 사용하기에 MaterialApp 객체를 사용합니다.

Scaffold

MaterialApp 에서 화면을 구성할 때 가장 기본이 되는 도화지같은 개념입니다.

runApp() 함수는 MaterialApp 객체를 입력으로 받는 함수를 선택하시기 바랍니다.

이제 위의 코드를 구동시키면 아래와 같은 화면이 나타납니다. 이번 예제에서는 별도의 Device Manager 를 선택하지 않았기 때문에 웹에서 그 내용이 나타납니다.

디버그 모드에서 띄웠기에 Debug 라는 표시가 나타납니다.

이번에는 아래와 같이 body: Text(...) 을 추가해줍니다.

import 'package:flutter/material.dart';
 
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      body: Text('Hello, Flutter', style: TextStyle(
        color: Colors.blue,
      ),),
    ),
  ));
}

위의 코드에서 Ctrl + Alt + L 또는 Cmd + Alt + L 을 누르면 아래와 같이 들여쓰기가 됩니다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Text(
        'Hello, Flutter',
        style: TextStyle(
          color: Colors.blue,
        ),
      ),
    ),
  ));
}

별도로 Run 버튼을 새로 누르지 않더라도 새로고침이 되며, 출력결과는 아래와 같습니다.

이번에는 위젯을 추가해봅니다. 방금전 추가했던 Text 컴포넌트 위에 Alt + Enter 키를 누르면 여러가지 선택지가 나타나는데 이 중에서 Wrap with widget ... 을 선택해줍니다.

그리고 SafeArea 를 선택해줍니다.

완성된 코드는 아래와 같습니다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Text(
          'Hello, Flutter',
          style: TextStyle(
            color: Colors.blue,
          ),
        ),
      ),
    ),
  ));
}

코드 분리

이번에는 코드를 분리해봅니다. 에디터 하단의 공백에 stless 를 입력하면 Stateless Widget 의 기본 코드가 Live Template 을 통해서 나타납니다.

그리고 만들어진 Stateless Widget 에는 build 함수 내에 방금전 작성했던 SafeArea 코드를 리턴하도록 작성해줍니다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Text(
          'Hello, Flutter',
          style: TextStyle(
            color: Colors.blue,
          ),
        ),
      ),
    ),
  ));
}
 
class HelloworldWidget extends StatelessWidget {
  const HelloworldWidget({super.key});
 
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Text(
        'Hello, Flutter',
        style: TextStyle(
          color: Colors.blue,
        ),
      ),
    );
  }
}

그리고 HelloworldWidget 을 main() 에서 사용하도록 아래와 같이 수정해줍니다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      /// (1) : 이 부분을 수정해줬습니다.
      body: HelloworldWidget(),
    ),
  ));
}
 
// (2)
class HelloworldWidget extends StatelessWidget {
  const HelloworldWidget({super.key});
 
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Text(
        'Hello, Flutter',
        style: TextStyle(
          color: Colors.blue,
        ),
      ),
    );
  }
}

(1) : 원래 있던 코드 들을 (2) 에서 작성한 클래스 내의 build() 메서드 안으로 옮겨주었고, (2) 에서 작성한 위젯을 불러오도록 작성했습니다.

Text 위젯을 Center 위젯으로 한번 더 감싸기

Text 의 위치를 정 중앙에 위치하도록 해봅니다.

위에서 작성한 HelloworldWidget 에 Alt + Enter 키를 누르면 추천이 나타나는데 그 중 Wrap With Center 를 선택해줍니다.

그러면 코드가 아래와 같이 잘 적용됩니다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: HelloworldWidget(),
    ),
  ));
}
 
class HelloworldWidget extends StatelessWidget {
  const HelloworldWidget({super.key});
 
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Text(
          'Hello, Flutter',
          style: TextStyle(
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

변경된 화면은 아래와 같습니다.

Hot Reload 와 Hot Restart

Hot Reload, Hot Restart 모두 앱을 Re Compile 한 후 빌드하는 것이 아닙니다. 따라서 dependency 를 추가했다거나, 라이브러리 수정, Asset 추가 등과 같은 상황에는 적용되지 않습니다. 따라서 이런 경우에는 재시작해야 합니다.

만약 지나치게 많은 코드의 변경사항을 했을 경우 Reload → Restart 하는 순서로 실행중인 프로세스가 상위 재시동을 요청할 수도 있고, 상태관리를 하는 기능일 때에는 Hot Reload, Hot Restart 기능의 사용은 가급적 주의가 필요합니다.

Hot Reload, Hot Restart 기능은 Dart 의 JIT 컴파일러를 이용해 앱의 컴파일 과정 없이 코드의 변경사항을 즉시 반영하는 기능입니다. 참고로 Dart 언어는 JIT 컴파일러를 이용해서 프로그램의 실행 중에 컴파일을 할 수도 있고, AOT 컴파일러를 이용해서 전체 코드를 컴파일 한 후에 실행할 수도 있습니다. 주로 JIT 컴파일러는 개발 중에 사용되며, AOT 컴파일러는 실재 배포될 애플리케이션을 실행하는 데에 사용됩니다.

Hot Reload

Hot Reload 버튼은 위와 같은 아이콘이 적용된 버튼입니다. Hot Reload 버튼을 누르면 Ctrl + S 로 소스코드의 변경사항을 저장될 때마다 변경된 부분이 적용됩니다.

앱의 상태가 유지된 상태로 코드의 변경사항을 확인하면서 빠르게 개발을 수행할 수 있습니다. 주로 UI 수정에 많이 사용합니다.

Hot Restart

Hot Restart 버튼은 위와 같은 아이콘이 적용된 버튼입니다. Hot Restart 버튼을 누르면 Ctrl + S 로 소스코드의 변경사항을 저장할 때마다 Restart 됩니다. 앱의 모든 상태가 초기화되고, 앱의 코드 변경사항이 반영됩니다.

AVD Manager Setting Design Guide