[공부n일차] Flutter Layout Widgets

2021. 12. 19. 17:18공부 일기/Flutter

반응형

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

void runApp(Widget app ) Inflate the given widget and attach it to the screen. The widget is given constraints during layout that force it to fill the entire screen. If you wish to align your widget to one side of the screen (e.g., the top), consider using

api.flutter.dev

 

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

 

그럼.. 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 .. 하는 식으로 넣는건 소스 반영 제대로 된건가 확인하는 야메 습관.. )

 

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