Flutter - Hello World!

고비·2024년 4월 23일

flutter

환경설정 부분은 따로 정리를 못해놔서 추후에 추가하기로 하고, 빌드해놓은 플러터 프로젝트로 강의를 따라가며 Flutter의 기초를 익혀보려 한다.

📌 Widjet

플러터 앱은 widjet으로 구성되어 있고, 위젯을 레고블럭처럼 쌓아서 ui를 구성할 수 있다.
프로그래밍적 관점에서 위젯을 만든다는 건 class를 만든다는 것
class App{}은 그냥 class 일 뿐이다. class가 위젯이 되려면 flutter SDK에 있는 3개의 core Widjet중 하나를 상속(extend)받야야 한다.
그 중 가장 기초적이고 쉬운 Stateless 위젯을 상속받아 보자.
모든 위젯은 build 메소드를 구현해야 한다.
- build 메소드 - 화면에 UI를 build. 이 메소드가 무엇을 return 하던지 그 요소를 화면에 띄워준다.

그렇다면 어떤 widjet을 return 할 것인가?

우리가 만든 App 함수는 runApp 함수에 주는 Widjet이다 : App 함수는 우리 앱의 root
앱의 화면과 버튼 등의 모든 것이 App Widjet으로부터 온다.

root 앱은 두 가지 widjet 중 하나를 ruturn 할 수 있다.

사용자가 어떤 family style을 사용할지 flutter에게 알려주는 과정
특정 스타일을 따라하지 않고 커스터마이징을 하고 싶더라도, 두 테마 중 하나를 선택해야 함.
해당 과정은 기본 UI 설정 등 앱을 만들 재료를 선택하는 과정이고, 이후 내 입맛대로 커스터마이징 하면 되니 커스터마이징에 대한 걱정은 하지 않아도 됨.

(1) Material

구글
Flutter를 만든 게 구글이기 때문에 Material style이 훨씬 보기 좋은 건 놀라울 일이 아니다.

(2) Cupertino

애플

위의 과정을 통해 작성된 main.dart의 코드는 다음과 같다.

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

class App extends StatelessWidget {
  //build 입력 후 엔터를 치면 build 메서드가 자동완성 된다.
  @override // 부모 class에 이미 있는 메소드를 override 한다
  Widget build(BuildContext context) {
    //Buildcontext는 일단 무시하기
    return MaterialApp();
  }
}

코드를 저장 후 새로고침 버튼을 누르면 다음과 같이 검은 화면으로 바뀐다.

📌 화면 커스텀하기

MateralApp은 하나의 클래스이다. 마우스를 호버하면 나오는 속성 중 home에 접근하여 임의로 코드를 작성해 보자.

class App extends StatelessWidget {
  //build 입력 후 엔터를 치면 build 메서드가 자동완성 된다.
  @override // 부모 class에 이미 있는 메소드를 override 한다
  Widget build(BuildContext context) {
    //Buildcontext는 일단 무시하기
    return MaterialApp(
        home: Text("Hello World!") //마우스를 위에 가져다대면 home도 위젯임을 알 수 있다.
        );
  }
}

코드를 실행하면, 다음과 같이 못생긴 화면을 확인할 수 있다.

Scaffold

못생긴 화면은 flutter의 규칙 - 화면은 scaffold를 가져야 한다는 규칙을 어겼기 때문에 나타난다.
scaffold는 건축 현장에서 사용되는 가설 발판을 말하며, flutter에서는 모바일 앱의 구조를 제공하는 역할을 한다.
scaffold를 통해 네비게이션 바, 중앙 정렬, 상단 버튼 등을 구현할 수 있다.

class App extends StatelessWidget {
  //build 입력 후 엔터를 치면 build 메서드가 자동완성 된다.
  @override // 부모 class에 이미 있는 메소드를 override 한다
  Widget build(BuildContext context) {
    //Buildcontext는 일단 무시하기
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("안녕 플러터!"),
        ),
        body: Center(
          child: Text("Hello world!"),
        ),
      ),
    );
  }
}