[공부n일차] Flutter Layout Widgets

Flutter 에 대해서 예전부터 야금야금 조금씩만 알았는데.. 이거 좀 자유롭게 쓸 정도로 배워둬야겠다 싶어서 진짜 공부를 시작해본다. 

 

Flutter는 기본적으로 위젯(Widget)의 모음으로 이루어져 있다. 개별적으로 눈에 보이는 이미지, 텍스트, 버튼 등등 뿐만 아니라 화면에 각 위젯을 배치하는 Layout 도 위젯이다. 

 

Layout Widget 리스트는  https://docs.flutter.dev/development/ui/widgets/layout 에 잘 나와 있다. 

 

기존에 앱 개발 경험이 없어서.. Hello 찍는 기본적인 예제를 보고도 이게 뭔 소린지 이해가 안된다. 일단 제일 간단한 코드를 보자. 

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

이걸 딱 봤을 때.. 제일 먼저 이해가 안되는 부분이 바로

void main() => runApp( MyApp() );

 

=> 가 뭐지? -0-;;

 

flutter 에서 => 는 { return expr; } 과 동치라고 한다..( 멍... )

결론적으로..

 

isNoble(atomicNumber) {
  return _nobleGases[atomicNumber] != null;
}

bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;

위 두 코드는 같은 의미다. 

 

그러면 다시 돌아가서.. 

void main() => runApp( MyApp() );

이라는 소리는..

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

이거랑 같은 의미라는 소리다. 한번 바꿔서 넣어보자. 동일하게 결과가 나온다. 

 

자..그러면 이제 runApp 이라는건 어디서 온건가..

 

https://api.flutter.dev/flutter/widgets/runApp.html

runApp function - widgets library - Dart API

 

흠... 대충 위젯을 인자로 받아 최초 실행하는 그런 함수..인가보다..

 

그럼.. MyApp() 을 인자로 받았다는건데..

해당 코드에서 MyApp 이라는 class 선언은 있는데, 따로 인스턴스 생성을 하는 구문은 보질 못했다. 

StatelessWidget 을 상속받는데, 저 위젯 자체가 static 형태일 수도 있겠다. 찾아가보자.

 

abstract class StatelessWidget extends Widget {
	const StatelessWidget({ Key? key }) : super(key: key);
    @override
  	StatelessElement createElement() => StatelessElement(this);
    @protected
 	Widget build(BuildContext context);
}

에? abstract 클래스에 const 선언으로 생성자를 두는게... 무슨 의미인지 모르겠다. 이건 일단 넘어가야 한다는 생각이 강하게 든다. 더 파고 들면 개미지옥...;;

 

애써 모른체하고 다시 코드를 보자.. 암튼 runApp 에서 선언되어 있지도 않은.. 저 클래스의 생성자를 호출하면 위젯이 뿅 만들어져서 들어가면서 실행된다는 이야기지?  그럼 대충 MyApp() 부분을 대체해도 되겠지..?

 

흠.. 동작한다. 

void main() {
  return runApp(MaterialApp(
    title: 'Welcome to Flutter',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Flutter22'),
      ),
      body: Center(
        child: Text('Hello World22'),
      ),
    ),
  )
  );
}

(... 안에 2222 .. 하는 식으로 넣는건 소스 반영 제대로 된건가 확인하는 야메 습관.. )

 

아직 낯선 문법이 많지만... 일단 좀 신기하다는 느낌이 먼저 든다.