자기전에 4 - flutter - 기본 구조 살펴보기

기본 구조를 살펴볼건데 사실 나는 dart 언어 학습을 안하고 시작한다

typeScript 계열이다 뭐다 여러 말이 있는데 뭐 효율적인 사용법은 당장 몰라도 기본적인 기능은 기본 예시 보면서 진행해보면 되니까 ~

 

이전에 기본 생성된 프로젝트 폴더의  lib/main.dart 를 분석 해보자

import 'package:flutter/material.dart';

첫 줄에 가져오는 부분은 material 과 관련된 정보 같은데 해당 dart 파일을 확인하니

/// Flutter widgets implementing Material Design.
///
/// To use, import `package:flutter/material.dart`.
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=DL0Ix1lnC4w}
///
/// See also:
///
///  * [flutter.dev/widgets](https://flutter.dev/widgets/)
///    for a catalog of commonly-used Flutter widgets.
///  * [material.io/design](https://material.io/design/)
///    for an introduction to Material Design.

위와 같은 주석이 있다 

export 한 다른 dart 파일들은 material과 관련된 dart 파일 들이고 위젯이란게 있다 

얼추 검색 했을 땐 안드로이드의  View 역할 + a 인거 같은데 먼저 아래 링크를 확인 후에 widget을 알아보자 

https://flutter.dev/widgets/

Widget catalog

material 부터, 레이아웃, 애니메이션, 동기(async), 쿠퍼티노 ios 디자인, 반응형 모델, 스크롤링, 인풋 등 여러가지가 있다. 

해당 사이트를 보니 

https://flutter.dev/docs/get-started/install

부터 시작해서 진행하는게 가장 좋을듯 정석으로 플루터 공부 진행 할거면 저거부터 따라가보자

난 전부 하진 않고 하고싶은거만 빠르게 먼저 진행해보고 쓸만해 보이면 추가적으로 진행 해볼 생각

 

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

메인 함수에서 MyApp을 run한다 겠지? 

 

class MyApp extends StatelessWidget 로 MyApp Class가 시작된다

StatelessWidget 이란걸 부모로 가지는데 이를 통해

해당 Application 은 Widget이라는 것을 알 수 있고, 

State가 있는 또는 없는 상태의 widget이 있을 것이라는 것을 예측 해 볼 수 있다

 

1. Widget이 뭔지

2. StatelessWidget이 뭔지

3. State가 있는 위젯은 뭔지 살펴보자

 

1. 위젯이 뭐지?

https://flutter.dev/docs/development/ui/widgets-intro

위젯에 대한 설명으로, 간략히 설명하면 위젯은 UI의 설정과 상태값을 가지고 있고, 위젯 밖에 UI를 그린다는 것 같다

 

위젯 설명을 보다보시 위에 나온 runApp() 에 대한 설명이 간략히 나온다

최상위 root 위젯 트리에 해당 Widget을 만드는 함수라고 한다

 

2. StatelessWidget이 뭐지?

일반적으로는  StatelessWidget or StatefulWidget 이 있다고 한다 

StatelessWidget은 변경 될 일이 없는 위젯을 만들 때 쓰면 된다

 

3.State가 있는 위젯은?

StatefulWidget이 있다고 한다

위젯 수명동안 변경 될 수 있는 위젯을 만들 때 쓰면 된다고 한다 

 

필요하면 위젯의 종류는 상단의 widgets-intro에서 살펴보고 

 

다시 코드로 돌아가면 statelessWidget이 빌드 되면

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

위와 같은 동작을 하도록 override 한다(기본 페이지) return 값이 MaterialApp 이라고 되어 있는데, 기본 샘플 디자인이 Material이었으니 

이와 관련된 것 같다(테마 정보도 있는 걸 보면)

왠지 저 부분을 바꾸면 IOS의 Cupertino 스타일도 가능할 거 같으니 MaterialApp -> CupertinoApp으로 변경하고 빌드를 해봤다

 

귀신 같이 바로 에러가 뜬다.

google.com/codelabs/flutter-cupertino/#0

Cupertino 안에 들어가야 할 매개변수가 달라서 그랬던 듯 하다 필요하면 위의 예시로 디자인 변경

 

하지만 테스트니까 일단은 분석만 해보자

Basic Widget을 보면 

Text 라는 위젯이 있다 

이것을 쓰면 될 듯 하다 

 

https://flutter.dev/docs/development/ui/widgets/text

Text만 해도 여러개가 있는 것 같지만 그냥 기본으로 보이는 text로 먼저 테스트

 

코드의 home: MyHomePage(title: 'Flutter Demo Home Page'), 

부분을 따라가 보면 

class MyHomePage extends StatefulWidget {

으로 시작된다 

기본 홈 위젯은 상태가 있는 위젯인 거 같고

MyHomePage 위젯의 

@override
Widget build(BuildContext context) {

부분은 setState 함수가 호출되어 해당 위젯의 상태가 변할 때, 다시 build하여 UI를 그리는 것 같다

 

Home을 build 할 때, Scaffold를 return하는데, 이게 뭘까 검색해보니 Floating UI 인거 같다 (Android로 치면 fab elevation)

코드 상세 내용을 보니 실제로 floating action button 이 적혀 있다

 

floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),

onPressed는 안드로이드의 onClickListener의 역할을 하는 것 같다 

 

일단 기본 Hello world App 구조 살펴보기는 여기서 끝