[Flutter/VS Code]기본 구조

 

 

 

프로젝트를 준비했다면 이제 직접 그려보자

 

---

UI를 그려보기 전에 일단 기본 구조부터 파악해보자

 

이전에 생성한 프로젝트를 들여다 보자

프로젝트 구조는 다음과 같다

lib 폴더 아래 main.dart 파일이 있는데

 

해당파일이 프로그램의 시작점이라고 보면 된다.

 

 

main.dart 파일을 들여다보면

세 클래스가 정의되어 있는 것을 볼 수 있다.

 

여러 언어로 개발을 해본 경험으로 미루어 보아

세 클래스가 실질적으로 UI를 그리는 클래스들

( Window, Frame, Form, Activity 등 )로 유추해 볼 수 있겠다.

 

크게 Stateless Widget과 Stateful Widget으로 구분할 수 있겠다.

 

 

 

우선 Widget을 알아보자

 

Flutter에서 모든 요소는 Widget이다. 레이아웃부터 텍스트 버튼까지 모든 요소가 Widget이다.

(다른 Widget을 포함(child 요소로)할 수 있는 Widget을 Container Widget으로 따로 구분하기도 한다.) 

 

 

Stateless(상태가 없는)/ Stateful(상태를 갖는) 용어는 네트워크에서 주로 사용되는 단어 같다.

세션 정보를 서버에 저장하고 세션 상태에 따른 응답을 하는 것과 

세션 상태에 무관하게 응답하며 세션 관리는 클라이언트가 하는 것이라고 하는데

Flutter에서랑은 별로 관계가 없는 것 같다.

 

Flutter에서는

Stateless Widget : 내용을 변경할 수 없는 화면 표시용 위젯

Stateful Widget   : 이벤트 등에 의해 화면에 변경된 내용을 표시하는 위젯

한마디로 화면에 정적으로 그려질 화면은 Stateless Widget에,

동적으로 그려질 화면은 Stateful Widget에 집어 넣으면 되겠다.

 

각설하고 다시 코드를 보자

 

다음과 같은 실행화면이 도대체 코드 어디에 나와있는지 보려면

_MyHomePageState 클래스의 build() 함수를 뒤져보면 되겠다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child:
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

실행화면과 비교해서 보면 이해가 쉽다.

 

build() 함수의 반환 값이 곧 UI를 그리는 Widget임을 알 수 있고

 

화면은 Scaffold 란 위젯을 기본으로 그려짐을 알 수있다.

Scaffold는 Bar, Body, Floating Button을 지원해주는 하나의 레이아웃이라고 보면된다.

Bar, Body, Floating Button으로 각각 Widget들이 정의 되어있는 것을 볼 수 있다

 

간단하게 화면에 버튼을 추가해보자

 

Body는 Center(대충 가운데 위치시키는 위젯으로 보임)로 이루어져있고, 

Center는 Column(대충 열로, 위->아래 혹은 아래->위로 쌓는것으로 보임)으로 이루어져있다

그리고 Column 구성요소로 두 Text가 들어가 있는 것을 알 수 있으니

두 Text사이에 Button을 하나 추가해보자

 

TextButton(
	onPressed: () {
    	// Respond to button press
        },
        child: Text("TEXT BUTTON"),
)

가장 기본적인 Button중 하나인 TextButton이다.

클릭 이벤트인 onPressed는 람다식으로 바로 넣어도 되고 외부의 함수를 넣어도 된다

 

위 내용을 Body>Center>Column> 두 Text 사이에 넣어주면 되겠다.

 

다음과 같이 추가할 수 있다.

 

코드는 다음과 같다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            TextButton(
              onPressed: _incrementCounter,
              child: Text("OJJJ BUTTON"),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }